Как разработчик, вы часто хотите отладить код. Возможно, вы уже использовали console.log В некоторых проблемах, который является простейшим способом отлаживать.
В этой статье мы расскажем вам некоторые из самых крутых трюков, отладки используя собственные отладочные инструменты браузеров.
Краткое представление о редакторе кода FreeCodecamp:
Перед прыжками в отладку давайте утечним некоторые секретные факты об этом Удивительный код проверки двигателя на FCC.
Мы используем индивидуальные CodeMirror , как редактор кода. А Eval () Функция Используется для оценки кода JavaScript, представленный в виде строки из редактора. Когда Eval () Вызывается, браузеры будут втаконы в результате чего выполнить ваш код. Мы узнаем больше, почему этот секрет важен в более поздних разделах этой статьи.
Теперь переходя к трюкам:
Google Chrome devtools.
Google Chrome – один из самых популярных браузеров со встроенным JavaScript Engine, называемый V8 и предлагает отличный набор инструментов для разработчиков, называемых Chrome devtools Отказ Посещение их Полный гид отладки JavaScript настоятельно рекомендуется.
1: Основы devtools
Запуск Chrome devtools
Хит F12.
. В качестве альтернативы вы можете нажать
Ctrl + Сдвиг + I
на Windows и Linux или
CMD + Сдвиг + I
на Mac или если вы просто любите свою мышь, перейдите в Меню> Дополнительные инструменты> Инструменты разработчика Отказ
Знакомство о источниках и вкладки консоли.
Эти две вкладки – это возможно, будут вашими лучшими друзьями при отладке. Источники Вкладка может использоваться для визуализации всех сценариев, которые на веб-странице вы посещаете. Эта вкладка имеет разделы для окна кода, дерево файлов, стеки вызовов и смотреть Windows и т. Д.
Консоль Вкладка – это то, где все вывод журнала идет. Кроме того, вы можете использовать приглашение вкладки консоли для выполнения кода JavaScript. Это своего рода синонимом командной строки в Windows или терминал на Linux.
Совет: переключите консоль в любое время в devtools, используя Esc. ключ.
2: Общие ярлыки и особенности
Пока вы можете посетить Полный список ярлыков Ниже приведены несколько наиболее используемых:
Особенности Windows, Linux Mac Поиск ключевого слова, Regex поддерживается. Ctrl. + F`gmd + F Поиск и открыть файл Ctrl. + P`gmd + P Перейти к линии Ctrl. + G + : line_no`gmd + G + : line_no Добавить точку останова Ctrl. + B или щелкните по линии нет. CMD + B или щелкните по линии нет. Пауза/резюме для выполнения скрипта F8 F8 Шаг по следующей функции Вызов F10 F10 Шаг в следующую функцию Вызов F11 F11.
3: Используя исходную карту для нашего кода
Одна из самых крутой особенности, которую вы будете любить Отладка динамического сценария , на лету, через Исходные карты Отказ
Каждый скрипт может быть визуализирован на вкладке источника DevTools. Вкладка «Источник» имеет все исходные файлы JavaScript. Но код из редактора кода выполнен через Eval () В контейнере просто называется виртуальной машиной (VM) в процессе браузера.
Как вы уже догадались, это то, что наш код на самом деле является сценарием, который не имеет имени файла. Таким образом, мы не видим это на вкладке «Источник».
Вот приходит взлом!
Мы должны использовать Исходные карты Чтобы назначить имя JavaScript из нашего редактора. Это довольно просто:
Позвольте сказать, что мы на Факториализировать Задача, а наш код выглядит так:
function factorialize(num) {
if(num <= 1){
...
}
factorialize(5);Все, что нам нужно сделать, это добавить //#.js. К вершине кода, то есть первая строка:
//# sourceURL=factorialize.js
function factorialize(num) {
if(num <= 1){
...И Эврика это все!
Теперь откройте Devtools и найдите имя файла. Добавьте точки перерыва, отладки и наслаждайтесь!
Больше информации о отладке:
- Руководство для начинающих к скворению ошибок
- Отладка советов и трюков для начинающих
- Как получить максимальную отдачу от отладочной консоли вашего браузера
Оригинал: “https://www.freecodecamp.org/news/how-to-debug-javascript-with-your-browsers-devtools/”