38 votes

La console de débogage iOS 6 a disparu?

Je utilisais le "Console de débogage" pour Safari mobile afin d'imprimer des messages console.log lorsque je fais du dépannage. Avec iOS 6, dans les paramètres avancés de Safari, l'"Inspecteur Web" a remplacé la "Console de débogage". Malheureusement, mon entreprise ne me permet pas de brancher les téléphones que nous testons sur les ordinateurs sur lesquels nous développons.

Est-ce que quelqu'un sait comment activer l'affichage des messages imprimés en utilisant console.log() sur les iPhones avec iOS 6?

28voto

reekogi Points 854

J'ai trouvé utile de sortir toutes les erreurs JS avec une alerte sur window.onerror ->

window.onerror = function(error) {
    alert(error);
};

Je copie cela en haut des scripts afin que toutes les erreurs d'exécution soient affichées dans une alerte native. Fonctionne également sur ordinateur de bureau.

19voto

user139078 Points 291

Ils l'ont enlevé. Vous devrez maintenant faire des délugages à travers Safari.

http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers

C'est en fait assez facile à configurer.
1) Assurez-vous que votre paramètre Web Inspector est activé sous Paramètres iPhone => Safari => Avancé.
2) Branchez votre téléphone à un ordinateur Mac OSX.
3) Ouvrez Safari 6 et assurez-vous que le mode Develop est activé dans Préférences Safari => Avancé => Afficher le menu Développement

14voto

bernard Points 198

Si vous n'avez pas Mac OSX, vous pouvez utiliser ce script comme remplacement de console:

https://github.com/robotnic/waterbug

Il affiche un message d'erreur, il est possible de journaliser tous les types de variables, vous devez tourner votre iPhone ou iPad de 90° vers la droite pour ouvrir la console.

4voto

Mattio Points 817

Une autre option possible est le bookmarklet de performance mobile de Steve Souders. Il inclut Firebug Lite, qui possède une console et bien plus encore. Il ne fonctionne pas tout à fait de la même manière que la console précédente de Mobile Safari et vous devez avoir une connexion pour l'utiliser.

1voto

Joey Points 307

Créez simplement votre propre console en bas de l'écran. C'est une solution rapide mais c'est mieux que de faire des alertes partout. Assurez-vous de mettre cela dans le fichier html racine (en bas) ou de le convertir tout en JS et de le mettre dans le fichier JS racine (en haut).

#console {
    resize: both;
    height :200px;
    overflow: scroll;
    background: white;
    color: black;
    border: 1px solid black;
    width: 95vw;
    padding: 5px;
    margin: auto;
}

logger = (...params) => {
  const newLog = document.createElement("div");
  newLog.textContent = params.reduce((str, param) => {
      if (typeof param === 'string') return `${str} ${param}`;
      return `${str} ${JSON.stringify(param)}`;
    }, '');
    document.getElementById('console').appendChild(newLog);
  }
  window.onerror = (error) => {
    const newLog = document.createElement("div");
     newLog.style.color = 'red';
     newLog.textContent = error;
    document.getElementById('console').appendChild(newLog);
};
  console.log = logger;
  console.warn = logger;

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X