Отладка консоли iOS 6 исчезла?

Я использовал "Debug Console" для мобильного Safari для печати сообщений console.log, когда я пытаюсь устранить неполадки. С iOS 6 в расширенных настройках Safari "Web Inspector" заменил "Debug Console". К сожалению, моя компания не позволяет мне подключать телефоны, которые мы тестируем, к компьютерам, на которых мы разрабатываем.

Кто-нибудь знает, как включить сообщения, напечатанные с помощью console.log(), для показа на iPhone с iOS 6?

Ответы

Ответ 1

Я нашел полезным вывод любых ошибок JS с предупреждением в window.onerror → 

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

Я вставляю это в начало скриптов, чтобы любые ошибки времени выполнения выводились в собственном предупреждении. Работает и на рабочем столе.

Ответ 2

Они удалили его. Теперь вам потребуется отладка через Safari.

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

На самом деле это довольно просто настроить.
1) Убедитесь, что параметр "Веб-инспектор" включен в настройках iPhone "Настройки" > "Safari" > "Дополнительно".
2) Подключите телефон к компьютеру Mac OSX.
3) Откройте Safar 6 и убедитесь, что режим разработки находится в настройках Safari = > Дополнительно = > Показать меню разработки

Ответ 3

Если у вас нет Mac OSX, вы можете использовать эту script как консольную замену:

https://github.com/robotnic/waterbug

Отображается сообщение об ошибке, возможно регистрировать все виды переменных, вы должны повернуть свой iPhone или iPad на 90 ° вправо, чтобы открыть консоль.

Ответ 4

Еще один возможный вариант - это мобильный букмарклет. Он включает Firebug Lite, который имеет консоль и еще немного больше. Он не работает совсем так же, как и предыдущая консоль Mobile Safari, и у вас должно быть подключение для его использования.

Ответ 5

Просто создайте свою консоль в нижней части экрана. Это быстрое решение, но лучше, чем делать предупреждения повсюду. Обязательно поместите это в корневой файл html (внизу) или конвертируйте во все JS и поместите в корневой файл JS (вверху).

<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>