web-dev-qa-db-fra.com

La console de débogage iOS 6 a disparu?

J'avais l'habitude d'utiliser la "Debug Console" pour Safari mobile pour imprimer les messages console.log lors du dépannage. Avec iOS 6, dans les paramètres avancés de Safari, le "Web Inspector" a remplacé la "Debug Console". Malheureusement, mon entreprise ne me permet pas de brancher les téléphones avec lesquels nous testons sur les ordinateurs sur lesquels nous développons.

Quelqu'un sait-il comment activer l'affichage des messages imprimés à l'aide de console.log () sur les iPhones avec iOS 6?

iphoneiosios6
38
Matt

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

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

Je le colle en haut des scripts afin que toutes les erreurs d'exécution soient générées dans une alerte native. Fonctionne également sur le bureau.

28
reekogi

Ils l'ont enlevé. Vous devrez maintenant déboguer via 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 Inspecteur Web est activé sous Paramètres iPhone => Safari => Avancé.
2) Branchez votre téléphone à un ordinateur Mac OSX.
3) Ouvrez Safar 6 et assurez-vous que le mode Développement est sur Safari Préférences => Avancé => Afficher le menu Développement

19
user139078

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 d'enregistrer toutes sortes de variables, vous devez tourner votre iPhone ou iPad à 90 ° vers la droite pour ouvrir la console.

14
bernard

Une autre option possible est celle de Steve Souders bookmark de performances mobiles . Il comprend Firebug Lite, qui a une console et bien plus encore. Elle ne fonctionne pas exactement de la même manière que la précédente console Mobile Safari et vous devez disposer d'une connexion pour l'utiliser.

4
Mattio

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 convertir en tous les JS et de mettre dans le fichier JS racine (en haut).

<div id="console"></div>
<style media="screen">
#console {
    resize: both;
    height :200px;
    overflow: scroll;
    background: white;
    color: black;
    border: 1px solid black;
    width: 95vw;
    padding: 5px;
    margin: auto;
}
</style>
<script type="text/javascript">
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;

</script>
1
Joey