freeCodeCamp

7.2 KiB

Raw Blame History

title	localeTitle
Debugging JavaScript with Browser Devtools	Отладка JavaScript с помощью браузера Devtools

Как разработчик вы часто захотите отладить код. Возможно, вы уже использовали console.log в некоторых проблемах, что является самым простым способом для отладки.

В этой статье мы расскажем вам о самых крутых трюках, чтобы отлаживать с помощью встроенных средств отладки браузеров.

Краткое описание редактора кода FreeCodeCamp:

Прежде чем перейти к отладке, вы можете пропустить некоторые секретные факты об этом замечательном механизме проверки кода в FCC.

Мы используем настраиваемый CodeMirror , как редактор кода. Функция eval() используется для оценки кода JavaScript, представленного в виде строки из редактора. Когда вызывается eval() , браузеры будут выполнять ваш код. Мы узнаем больше, почему этот секрет важен в последующих разделах этой статьи.

Теперь перейдем к трюкам:

Google Chrome DevTools

Google Chrome - один из самых популярных браузеров со встроенным движком JavaScript под названием V8 и предлагает отличный набор инструментов для разработчиков под названием Chrome DevTools . Очень рекомендуется посетить их полное руководство по отладке JavaScript .

1: Основы DevTools

Запуск Chrome DevTools

Хит F12

, В качестве альтернативы вы можете нажать

Ctrl + Shift + I

на Windows и Linux или

Cmd + Shift + I

на Mac, или если вы просто любите свою мышь, перейдите в Menu > More Tools > Developer Tools .

Знакомство с `Sources` и вкладками `console` .

Эти две вкладки, возможно, будут вашими лучшими друзьями во время отладки. Вкладка « Sources » может использоваться для визуализации всех скриптов, которые находятся на веб-странице, которую вы посещаете. На этой вкладке есть разделы для окна кода, дерева файлов, стек вызовов и окна просмотра и т. Д.

На вкладке console отображается весь выход журнала. Кроме того, вы можете использовать приглашение вкладки консоли для выполнения кода JavaScript. Его синонимом командной строки на Windows или терминалом в Linux.

Совет. Переключайте консоль в любое время в DevTools с помощью Esc .

2: Общие ярлыки и функции

В то время как вы можете посетить полный список ярлыков , ниже приведены несколько наиболее используемых:

Возможности Windows, Linux Mac
Поиск ключевого слова, регулярное выражение поддерживается. Ctrl + F``Cmd + F
Поиск и P``Cmd файла Ctrl + P``Cmd + P
Перейти к строке Ctrl + G + :line_no``Cmd + G + :line_no
Добавьте точку останова Ctrl + B или нажмите на строку №. Cmd + B , или щелкните по строке №.
Пауза / возобновление выполнения F8 F8
Перейдите к следующему вызову функции F10 F10
Шаг следующего вызова функции F11 F11

3: Использование исходной карты для нашего кода

Одной из самых крутых функций, которые вам понравится, является отладка Dynamic Script , на лету, через Source Maps .

Каждый скрипт можно визуализировать на вкладке «Источник» DevTools. На вкладке источника есть все исходные файлы JavaScript. Но код из редактора кода выполняется через eval() в контейнере, который просто называется виртуальной машиной (VM) в рамках браузера.

Как вы, наверное, догадались, что наш код на самом деле является скриптом, который не имеет имени файла. Поэтому мы не видим этого на вкладке «Источник».

Вот идет хак!

Мы должны использовать Source Maps для присвоения имени JavaScript из нашего редактора. Его довольно просто:

Допустим, что мы находимся на вызове Factorialize , и наш код выглядит так:

function factorialize(num) { 
  if(num <= 1){ 
  ... 
 } 
 factorialize(5);

Все, что нам нужно сделать, это добавить //# sourceURL=factorialize.js в начало кода, то есть первую строку:

//# sourceURL=factorialize.js 
 
 function factorialize(num) { 
  if(num <= 1){ 
  ...

И Эврика, вот и все!

Теперь откройте DevTools и найдите имя файла. Добавить точки останова, отладить и наслаждаться!

7.2 KiB Raw Blame History Unescape Escape