Как вы отлаживаете программы JavaScript? Наиболее примитивным методом является использование Alert () для печати содержимого на странице, и слегка улучшенный метод - использовать console.log () для вывода контента на консоли JavaScript. Что ж, использование этих двух методов действительно решило много проблем отладки небольших сценариев JavaScript. Тем не менее, было бы жалко не использовать инструменты разработчиков, которые становятся все более и более мощными в Chrome. В этой статье в основном представлены настройки точки останова JavaScript и функции отладки, то есть панель источников (ранее называемые сценариями). Если вы опытны в различных методах отладки Java в Eclipse, концепции здесь похожи. Версия Chrome, используемая при написании этой статьи, составляет 25.0.1364.172.
Основная среда
Слева от источника - источник контента, включая различные ресурсы на странице. Среди них он разделен на источники и сценарии контента. Источники - это различные ресурсы, содержащиеся на самой странице. Они организованы в соответствии с доменами, которые появляются на странице, на что нам нужно обратить внимание. Асинхронно загруженные файлы JS также появятся здесь после загрузки. Контент -сценарии - это расширение Chrome, которое организовано в соответствии с идентификатором расширения. Этот тип расширения на самом деле является ресурсом, встроенным на страницу, и они также могут читать и писать DOM. Только разработчики, которые пишут и отлаживают расширения, подобные этим, должны заботиться о них. Если в вашем браузере нет установленных расширений, сценарии контента ничего не увидят.
Панель средней основной области источников используется для отображения содержимого файла ресурса слева.
На правой стороне источников панель находится функциональная область отладки. Верхний ряд кнопок-это пауза/продолжение, пошаговый, пошаговый прыжок, пошаговый прыжок, отключить/включить все точки останова. Ниже приведены различные конкретные функциональные области. Это будет введено позже.
Обратите внимание, что области с обеих сторон могут по умолчанию сокращаться и не отображаться с обеих сторон. Нажмите на телескопические кнопки с обеих сторон, чтобы отобразить. Когда левая область отображается, по умолчанию автоматически сокращается. Нажмите кнопку PIN -кода рядом с ним, и она не будет возвращена.
Есть также некоторые кнопки функций внизу, которые очень полезны.
Установите точки останова на исходном коде
Через источник контента слева откройте соответствующий файл JavaScript, нажмите номер строки файла и установите и удалите точки останова. Каждая добавленная точка останова будет отображаться в списке точек останова в области отладки справа. Нажав на точку останова в списке, найдет точку останова в области контента. Если у вас есть несколько файлов и несколько точек перерыва, очень удобно быстро определить местонахождение точек останова в списке точек останова.
Есть два состояния для каждой добавленной точки останова: активируйте и отключите. Только что добавленные точки останова являются активированными состояниями, а состояние отключения состоит в том, чтобы сохранить точку останова, но временно отменить функцию точки останова. Перед каждой точкой перерыва в списке точек останова имеется флажок, и рассеяние отключает точку останова. Точки останова также могут быть отключены в правом щелчке меню позиции точки останова. Вы также можете временно отключить все добавленные точки останова на кнопке на правой ленте и нажать его, чтобы восстановить исходное состояние.
Условная точка останова : выберите «Редактировать точку останова ...» в правом щелчке в меню позиции точки останова, чтобы установить условие, чтобы запустить точку останова, то есть написать выражение, и точка останова будет запускаться только тогда, когда выражение является истинной. Проверьте стек вызовов среды точек останова (стек вызовов): Когда точка остановки останавливается, стек вызовов в области отладки справа будет отображать стек вызовов метода, где текущая точка останова. Например, существует функция g (), в которой вызывается функция f (), и я устанавливаю точку останова в f (). Затем, когда я выполняю функцию g () в консоли, точка останова будет запускается, и стек вызовов будет отображаться следующим образом:
Верх - f (), а затем g (). Каждый слой в стеке вызовов называется кадром. Нажатие на каждый кадр может прыгать в точку вызова этого кадра.
Кроме того, вы можете перезапустить выполнение текущего кадра на кадре, используя меню правой кнопкой мыши, то есть с начала кадра. Например, на кадре функции f () точка останова перейдет к началу f () и повторной эксплуатации, а значение переменной в контексте также будет восстановлено. Таким образом, объединяя такие функции, как изменение переменных и редактирование кода, вы можете многократно отлаживать в текущем кадре, не обновляя страницу и снова запустить точку останова. Просмотреть переменные
Ниже списка стека вызовов находится список переменных Scope, где в настоящее время вы можете просмотреть значения локальных и глобальных переменных. Выполнить выбранную код
Во время отладки точки останова вы можете использовать мышь для выбора переменной или выражения, которую вы хотите просмотреть, а затем щелкнуть правой кнопкой мыши меню, чтобы выполнить «Оценка в консоли», чтобы увидеть текущее значение выражения. Кнопка «прерывание/продолжение» в верхней части области отладки в правой стороне оператора JavaScript, которая будет выполнена в следующий раз, имеет функцию. Когда нет запуска точки останова, нажатие этой кнопки введет состояние прерывания «подготовка». В следующий раз, когда страница выполнит оператор JavaScript, она автоматически прерывается, например, код, который будет выполняться при запуска действий Click. Временно изменение кода JavaScript. Обычно мы привыкаем к этому циклу при отладке кода: изменить код → Обновить страницу → перепроверьте. Но на самом деле, контент в файле JS может быть временно изменен в Chrome. Сохранить (Ctrl+S) может вступить в силу немедленно и немедленно повторно разбираться с консолью и другими функциями. Но обратите внимание, что эта модификация является временной, а модификация страницы обновления исчезнет.
Перерыв в исключении
Вы можете увидеть кнопку под интерфейсом. Это переключатель, который устанавливает, прерывается ли программа, когда она сталкивается с исключением при запуске. Нажав эту кнопку, переключится между 3 состояниями:
По умолчанию, перерыва не будет встречено
Все исключения будут прерваны, включая захваченные ситуации
Прерывайте только в случае возникновения неверного исключения
В основном объясните разницу между состоянием 2 и состоянием 3
пытаться{
бросить «исключение»;
} catch (e) {
console.log (e);
}
Код в вышеупомянутом попытке столкнется с исключением, но код подъема может поймать исключение. Если все исключения будут прерваны, код будет автоматически прерывать, когда он будет выполнен в операторе THRE, который создаст исключение; И если он прерывается только тогда, когда он столкнется с исключением, то это не прерывается здесь. Как правило, мы будем больше обеспокоены тем, что столкнулись с исключениями.
Установите точки останова на элементах DOM
Иногда нам нужно прослушать определенный DOM, измененный, не заботясь о том, какая линия кода модифицирована (или может быть много мест, которые будут изменены). Затем мы можем установить точки останова непосредственно на DOM.
Как показано на рисунке, на панели Elements of Elements вы можете установить три точки останова в правом щелчке на элементе: после того, как дочерний узел модифицирует свои собственные атрибуты и изменяет свой собственный узел, точка разрыва DOM будет отображаться в списке DOM-точек на правой стороне панели источников. После выполнения, чтобы внести соответствующие изменения в DOM, код остановится на этом, как показано на рисунке ниже.
XHR Break Point
В зоне отладки есть точки отладки XHR. Нажмите + и введите строку, содержащуюся в URL, чтобы прослушать запрос Ajax для URL. Входное содержание эквивалентно фильтру URL. Если ничего не заполнено, послушайте все запросы XHR. После того, как вызов XHR будет запускается, он сломается в месте, где запрошен Quest.Send ().
Trigger Breakpoint по типу события
Список слушателей событий в области отладки справа, где перечислены различные возможные типы событий. Проверьте соответствующий тип события, и он автоматически прерывается, когда код JavaScript, который запускает событие такого типа.
Отладка ярлыка
Комплект клавиш во всех инструментах разработки можно найти в настройках в правом нижнем углу интерфейса. F8, F10, F11 или SHITF+F11 обычно используется при отладке точек останова, но функциональные клавиши, такие как F10, могут противоречить клавишам краткости по умолчанию системы. Это не имеет значения, они могут быть заменены на CMD+/, CMD+', cmd+; , Shift+cmd+; соответственно. //@ Sourceurl name Код, созданный Eval. Иногда какой -то очень динамический код создается в текущем контексте JavaScript в форме строки через функцию eval (), а не загружать как отдельный файл JS. Таким образом, вы не найдете файл в области контента слева, поэтому отлаживать трудно. На самом деле, мы просто добавляем строку «//@ SourceUrl = имя» в конце кода, созданного Eval, чтобы назвать этот код (браузер будет относиться конкретно этой специальной форме комментариев), чтобы он появился в области содержимого слева, как вы загружаете файл JS с указанным именем, вы можете установить точки разрыва и отладки. На рисунке ниже мы выполняем кусок кода через Eval и используем Sourceurl, чтобы назвать его Dynamicscript.js. После выполнения этот «файл» появляется в области содержимого слева, а его содержание - это контент в Eval. Вы также можете взглянуть на этот пример названия динамически скомпилированного кода CoffeeScript:
var coffee = coffeeScript.compile (code.value) + "//@ Sourceurl =" + (evalname.value || "Coffeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!");
eval (кофе);
Фактически, //@ SourceUrl может использоваться не только в коде Eval, но и любой файл JS или даже код, введенный консоли JavaScript, может использоваться с тем же эффектом! Кнопка «Код формата» (симпатичная печать) используется для переформатирования грязного кода в красивый код, например, некоторые сжатые файлы JS, которые в основном нечитаемы или отладки. Нажмите на формат, а затем неформатируйте его. Перед благоустройством
Прекрасная ссылка: инструменты разработчика Chrome Официальная документация официальная документация