Отладка Js в браузере

Обновлено: 21.11.2024

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

Вы можете и будете сталкиваться с ошибками при написании программ. Ошибки не обязательно плохие. На самом деле, в большинстве случаев они помогают нам выявлять проблемы с нашим кодом. Крайне важно, чтобы вы знали, как отлаживать свой код и исправлять ошибки.

Отладка – это процесс проверки программы, поиска ошибок и их исправления.

Существуют разные способы отладки программы JavaScript.

1. Использование console.log()

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

Вы можете передать объект в console.log() или просто строку сообщения.

В предыдущем уроке мы использовали метод console.log() для вывода вывода. Однако вы также можете использовать этот метод для отладки. Например,

Использование метода console.log() в браузере открывает значение в окне отладчика.

Работа метода console.log() в браузере

Консоль.log() не зависит от браузера. Он также доступен в других механизмах JavaScript.

2. Использование отладчика

Ключевое слово debugger останавливает выполнение кода и вызывает функцию отладки.

Отладчик доступен почти во всех движках JavaScript.

Давайте рассмотрим пример

Давайте посмотрим, как можно использовать отладчик в браузере Chrome.

Работа отладчика в браузере

Приведенная выше программа приостанавливает выполнение программы в строке, содержащей отладчик.

Затем вы можете возобновить управление потоком после изучения программы.

Остальная часть кода будет выполнена, когда вы возобновите выполнение скрипта, нажав кнопку воспроизведения в консоли.

Работа отладчика в браузере

3. Установка точек останова

Точки останова для кода JavaScript можно установить в окне отладчика.

JavaScript остановит выполнение в каждой точке останова и позволит вам проверить значения. Затем вы можете возобновить выполнение кода.

Давайте рассмотрим пример установки точки останова в браузере Chrome.

Работа точек останова в браузере

Точки останова можно установить с помощью инструмента "Разработчики" в любом месте кода.

Установка точек останова аналогична включению отладчика в код. Здесь вы просто устанавливаете точки останова, щелкая номер строки исходного кода, вместо ручного вызова функции отладчика.

В приведенных выше методах мы использовали браузер Chrome, чтобы для простоты показать процессы отладки. Однако это не единственный вариант.

Все хорошие IDE предоставляют возможность отладки кода. Процесс отладки может немного отличаться, но концепция отладки та же.

Это руководство научит вас основному рабочему процессу отладки любой проблемы с JavaScript в DevTools. Прочтите или посмотрите видеоверсию этого руководства ниже.

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

Нажмите «Открыть демонстрацию». Демонстрация откроется в новой вкладке.

Введите 5 в текстовом поле "Номер 1".

Введите 1 в текстовое поле Число 2.

Нажмите «Добавить номер 1» и «Добавить номер 2». Надпись под кнопкой гласит: 5 + 1 = 51 . Результат должен быть 6 . Это ошибка, которую вы собираетесь исправить.

Рисунок 1. Результат 5 + 1 равен 51. Должно быть 6.

DevTools предоставляет множество различных инструментов для различных задач, таких как изменение CSS, профилирование производительности загрузки страниц и мониторинг сетевых запросов. На панели «Источники» выполняется отладка JavaScript.

Откройте DevTools, нажав Command+Option+I (Mac) или Control+Shift+I (Windows, Linux). Этот ярлык открывает панель консоли.

Рисунок 2. Панель консоли

Перейдите на вкладку "Источники".

Рис. 3. Панель "Источники"

Пользовательский интерфейс панели "Источники" состоит из трех частей:

Рис. 4. Три части пользовательского интерфейса панели "Источники"

Панель файлового навигатора. Здесь перечислены все файлы, запрашиваемые страницей.
Панель редактора кода. После выбора файла на панели File Navigator здесь отображается содержимое этого файла.
Панель отладки JavaScript. Различные инструменты для проверки JavaScript страницы. Если окно DevTools широкое, эта панель отображается справа от панели редактора кода.

Распространенный метод отладки такой проблемы – вставка в код большого количества операторов console.log(), чтобы проверять значения во время выполнения скрипта. Например:

Метод console.log() может выполнить работу, но точки останова могут сделать это быстрее. Точка останова позволяет приостановить выполнение кода в середине его выполнения и проверить все значения на данный момент времени. Точки останова имеют несколько преимуществ перед методом console.log():

С помощью console.log() вам нужно вручную открыть исходный код, найти соответствующий код, вставить операторы console.log(), а затем перезагрузить страницу, чтобы увидеть сообщения в консоли. С помощью точек останова вы можете приостановить соответствующий код, даже не зная, как он структурирован.
В операторах console.log() вам необходимо явно указать каждое значение, которое вы хотите проверить. С помощью точек останова DevTools показывает значения всех переменных в данный момент времени. Иногда на ваш код влияют переменные, о которых вы даже не подозреваете.

Короче говоря, точки останова могут помочь вам найти и исправить ошибки быстрее, чем метод console.log().

Если вы сделаете шаг назад и подумаете о том, как работает приложение, вы можете сделать обоснованное предположение, что неверная сумма ( 5 + 1 = 51 ) вычисляется в прослушивателе событий щелчка, связанном с Добавить номер 1 и номер 2 кнопка. Поэтому вы, вероятно, захотите приостановить выполнение кода примерно во время выполнения прослушивателя кликов. Точки останова прослушивателя событий позволяют сделать именно это:

На панели "Отладка JavaScript" нажмите "Точки останова прослушивателя событий", чтобы развернуть раздел. DevTools показывает список расширяемых категорий событий, таких как анимация и буфер обмена.

Рядом с категорией событий мыши нажмите "Развернуть" . DevTools показывает список событий мыши, таких как щелчок и нажатие мыши. Рядом с каждым событием есть флажок.

Установите флажок "Нажать". DevTools теперь настроен на автоматическую паузу при выполнении любого прослушивателя событий щелчка.

Рис. 5. Флажок щелчка включен

Вернитесь к демонстрации, нажмите "Добавить номер 1" и "Добавить номер 2" еще раз. DevTools приостанавливает демонстрацию и выделяет строку кода на панели «Источники». DevTools следует приостановить в этой строке кода:

Если вы остановились на другой строке кода, нажимайте «Возобновить выполнение скрипта», пока не остановитесь на нужной строке.

Примечание. Если вы остановились на другой строке, у вас есть расширение для браузера, которое регистрирует прослушиватель кликов на каждой странице, которую вы посещаете. Вы были приостановлены в прослушивателе кликов расширения. Если вы используете режим инкогнито для конфиденциального просмотра, который отключает все расширения, вы можете видеть, что каждый раз останавливаетесь на правильной строке кода.

Точки останова прослушивателя событий — это лишь один из многих типов точек останова, доступных в DevTools. Стоит запомнить все различные типы, потому что каждый тип в конечном итоге помогает вам как можно быстрее отлаживать разные сценарии. См. раздел Приостановка кода с помощью точек останова, чтобы узнать, когда и как использовать каждый тип.

Одной из распространенных причин ошибок является выполнение скрипта в неправильном порядке. Пошаговое выполнение вашего кода позволяет вам пройтись по его исполнению, по одной строке за раз, и выяснить, где именно он выполняется в другом порядке, чем вы ожидали. Попробуйте прямо сейчас:

На панели "Источники" DevTools нажмите Перейти к следующему вызову функции, чтобы выполнить выполнение функции onClick() по одной строке за раз. DevTools выделяет следующую строку кода:

Нажмите "Перейти к следующему вызову функции" . DevTools выполняет inputsAreEmpty(), не заходя в него. Обратите внимание, как DevTools пропускает несколько строк кода. Это связано с тем, что inputsAreEmpty() оценивается как false, поэтому блок кода инструкции if не выполняется.

Это основная идея пошагового выполнения кода. Если вы посмотрите на код в get-started.js, вы увидите, что ошибка, вероятно, где-то в функции updateLabel(). Вместо пошагового выполнения каждой строки кода вы можете использовать другой тип точки останова, чтобы приостановить код ближе к вероятному местоположению ошибки.

Точки останова по строке кода являются наиболее распространенным типом точек останова. Когда у вас есть определенная строка кода, на которой вы хотите сделать паузу, используйте точку останова строки кода:

Посмотрите на последнюю строку кода в updateLabel():

Слева от кода вы можете увидеть номер строки этой конкретной строки кода, который равен 32. Нажмите на 32. DevTools помещает синий значок поверх 32. Это означает, что есть строка- точка останова кода на этой строке. DevTools теперь всегда приостанавливается перед выполнением этой строки кода.

Нажмите Возобновить выполнение скрипта . Сценарий продолжает выполняться, пока не достигнет строки 32. В строках 29, 30 и 31 DevTools выводит значения addend1 , addend2 и суммы справа от точки с запятой в каждой строке.

Рис. 6. DevTools делает паузу в точке останова строки кода в строке 32

Значения addend1 , addend2 и sum выглядят подозрительно. Они заключены в кавычки, что означает, что это строки. Это хорошая гипотеза для объяснения причины бага. Теперь пришло время собрать больше информации. DevTools предоставляет множество инструментов для проверки значений переменных.

Когда вы остановились на строке кода, на панели «Область» отображаются локальные и глобальные переменные, определенные в данный момент, а также значение каждой переменной. Он также показывает переменные закрытия, когда это применимо. Дважды щелкните значение переменной, чтобы отредактировать его. Если вы не остановились на строке кода, панель «Область» пуста.

Рис. 7. Панель "Область"

Вкладка Watch Expressions позволяет отслеживать значения переменных с течением времени. Как следует из названия, Watch Expressions не ограничиваются только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression. Попробуйте прямо сейчас:

Перейдите на вкладку "Наблюдение".

Нажмите "Добавить выражение" .

Введите typeof sum .

Нажмите Enter. DevTools показывает тип суммы: "string". Значение справа от двоеточия является результатом вашего Watch Expression.

Рис. 8. Панель Watch Expression (внизу справа) после создания контрольного выражения typeof sum. Если окно DevTools большое, панель Watch Expression находится справа над панелью Event Listener Breakpoints.

Как и предполагалось, сумма оценивается как строка, хотя она должна быть числом. Теперь вы подтвердили, что это является причиной ошибки.

Помимо просмотра сообщений console.log(), вы также можете использовать консоль для оценки произвольных операторов JavaScript. Что касается отладки, вы можете использовать консоль для тестирования потенциальных исправлений ошибок. Попробуйте прямо сейчас:

Если панель консоли не открыта, нажмите Escape, чтобы открыть ее. Он открывается в нижней части окна DevTools.

В консоли введите parseInt(addend1) + parseInt(addend2) . Этот оператор работает, потому что вы остановились на строке кода, где addend1 и addend2 находятся в области действия.

Нажмите Enter. DevTools оценивает оператор и выводит 6 , что является результатом, который вы ожидаете от демонстрации.

Рис. 9. Панель консоли после вычисления parseInt(addend1) + parseInt(addend2) .

Вы нашли исправление ошибки. Осталось только опробовать исправление, отредактировав код и повторно запустив демонстрацию. Вам не нужно выходить из DevTools, чтобы применить исправление. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools. Попробуйте прямо сейчас:

Нажмите "Возобновить выполнение скрипта".
В редакторе кода замените строку 31, var sum = addend1 + addend2 на var sum = parseInt(addend1) + parseInt(addend2) .
Нажмите Command+S (Mac) или Control+S (Windows, Linux), чтобы сохранить изменения.
Нажмите «Деактивировать точки останова». Он меняет цвет на синий, указывая на то, что он активен. Пока это установлено, DevTools игнорирует любые установленные вами точки останова.
Попробуйте демоверсию с другими значениями. Теперь демо-версия рассчитывается правильно.

Внимание! Этот рабочий процесс применяет исправление только к коду, работающему в вашем браузере. Это не исправит код для всех пользователей, посещающих вашу страницу. Для этого вам нужно исправить код на ваших серверах.

Поздравляем! Теперь вы знаете, как максимально эффективно использовать Chrome DevTools при отладке JavaScript. Инструменты и методы, которые вы изучили в этом руководстве, помогут вам сэкономить бессчетное количество часов.

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

Условные точки останова, которые запускаются только тогда, когда заданное вами условие истинно.
Точки останова для перехваченных и неперехваченных исключений.
Точки останова XHR, которые срабатывают, когда запрошенный URL-адрес совпадает с предоставленной вами подстрокой.

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

Есть несколько элементов управления пошаговым выполнением кода, которые не объяснялись в этом руководстве. Подробнее см. в разделе Шаг за строкой кода.

Что касается отладки JavaScript, чем быстрее, тем лучше. Вот наши главные советы по более быстрой и эффективной отладке.

Быстрее отлаживать JavaScript

Знание своих инструментов может иметь большое значение, когда дело доходит до достижения цели. Несмотря на репутацию языка JavaScript, который сложно отлаживать, если вы держите в рукаве несколько хитростей, устранение ошибок и ошибок займет меньше времени.

Мы составили список из 16 советов по отладке, которые вы, возможно, не знаете, но, возможно, захотите запомнить, когда в следующий раз вам понадобится отлаживать код JavaScript!

Большинство этих советов относятся к Chrome и Firefox, хотя многие из них также применимы и к другим инспекторам.

1. отладчик

После console.log отладчик — мой любимый инструмент быстрой и грязной отладки. Если вы поместите отладчик; строку в вашем коде, Chrome автоматически остановится там при выполнении. Вы даже можете обернуть его в условные операторы, чтобы он выполнялся только тогда, когда вам это нужно.

2. Отображать объекты в виде таблицы

Иногда у вас есть сложный набор объектов, которые вы хотите просмотреть. Вы можете либо использовать console.log и прокрутить список, либо запустить хелпер console.table. Так легче увидеть, с чем вы имеете дело!

3. Попробуйте все размеры

Хотя иметь все мобильные устройства на рабочем столе было бы здорово, в реальном мире это невозможно. Как насчет изменения размера окна просмотра? Chrome предоставляет вам все, что вам нужно. Перейдите в свой инспектор и нажмите кнопку переключения режима устройства. Смотрите, как оживают ваши медиа-запросы!

4. Как быстро найти элементы DOM

Отметьте элемент DOM на панели элементов и используйте его в консоли. Chrome Inspector сохраняет последние пять элементов в своей истории, поэтому последний отмеченный элемент отображается с $0, предпоследний отмеченный элемент $1 и так далее. Если вы отметите следующие элементы в порядке «элемент-4», «элемент-3», «элемент-2», «элемент-1», «элемент-0», вы можете получить доступ к узлам DOM следующим образом в консоли: /p>

5. Сравните циклы с помощью консоли.время() и console.timeEnd()

Было бы очень полезно точно знать, сколько времени потребовалось для выполнения того или иного действия, особенно при отладке медленных циклов. Вы даже можете настроить несколько таймеров, назначив методу метку. Давайте посмотрим, как это работает:

6. Получить трассировку стека для функции

Вероятно, вы знаете, что JavaScript-фреймворки быстро создают много кода.

У вас будет много просмотров и много событий, поэтому в конечном итоге вы столкнетесь с ситуацией, когда захотите узнать, что вызвало конкретный вызов функции. Поскольку JavaScript не очень структурированный язык, иногда бывает сложно получить представление о том, что и когда произошло. Это тот случай, когда console.trace (или просто трассировка в консоли) пригодится для отладки JavaScript. Представьте, что вы хотите увидеть всю трассировку стека для вызова функции funcZ в экземпляре автомобиля в строке 33:

Строка 33 выведет:

Теперь мы видим, что func1 вызвала func2, которая вызвала func4. Затем Func4 создал экземпляр Car, а затем вызвал функцию car.funcX и так далее. Даже если вы думаете, что хорошо знаете свой сценарий, это все равно может быть весьма полезным. Допустим, вы хотите улучшить свой код. Получите трассировку и большой список всех связанных функций. Каждое из них кликабельно, и теперь вы можете переключаться между ними. Это похоже на меню только для вас.

7. Деминификация кода как простой способ отладки JavaScript

Иногда у вас может возникнуть проблема в производственной среде, и ваши исходные карты не дойдут до сервера. Не бойтесь. Chrome может преобразовывать ваши файлы Javascript в более удобочитаемый формат. Код не будет таким полезным, как ваш реальный код, но, по крайней мере, вы сможете увидеть, что происходит. Нажмите кнопку <> Pretty Print под средством просмотра исходного кода в инспекторе.

8. Быстрый поиск функции для отладки

‍1. Найдите строку в инспекторе и добавьте точку останова
2. Добавьте отладчик в свой скрипт

‍В обоих этих решениях вам придется вручную перемещаться по своим файлам, чтобы изолировать конкретную строку, которую вы хотите отладить. Что, вероятно, менее распространено, так это использование консоли. Используйте debug(funcName) в консоли, и скрипт остановится, когда достигнет функции, которую вы передали.

Это быстро, но недостатком является то, что он не работает с приватными или анонимными функциями. В противном случае это, вероятно, самый быстрый способ найти функцию для отладки. (Примечание: есть функция console.debug, которая не одно и то же, несмотря на схожее название.)

Введите debug(car.funcY) в консоли, и скрипт остановится в режиме отладки, когда получит вызов функции car.funcY:

9. Нерелевантные скрипты черного ящика

Сегодня в наших веб-приложениях часто используется несколько библиотек и фреймворков. Большинство из них хорошо протестированы и относительно свободны от ошибок. Но отладчик по-прежнему обращается ко всем файлам, которые не имеют отношения к этой задаче отладки. Решение состоит в том, чтобы поместить в черный ящик сценарий, который вам не нужно отлаживать. Это также может включать ваши собственные сценарии. Подробнее об отладке черного ящика читайте в этой статье.

10. Найдите важные вещи в сложной отладке

При более сложной отладке иногда требуется вывести много строк. Одна вещь, которую вы можете сделать, чтобы сохранить лучшую структуру ваших выходных данных, — это использовать больше консольных функций, например, console.log, console.debug, console.warn, console.info, console.error и т. д. Затем вы можете отфильтровать их в своем инспекторе. Иногда это не совсем то, что вам нужно, когда вам нужно отлаживать JavaScript. Вы можете проявить творческий подход и стиль ваших сообщений, если вы того пожелаете. Используйте CSS и создавайте свои собственные структурированные консольные сообщения, когда хотите отлаживать JavaScript:

В console.log() вы можете установить %s для строки, %i для целых чисел и %c для пользовательского стиля. Вы, вероятно, можете найти лучшие способы использования этих стилей.Если вы используете одностраничную структуру, вам может понадобиться один стиль для сообщений просмотра, а другой — для моделей, коллекций, контроллеров и т. д.

11. Наблюдайте за конкретными вызовами функций и аргументами

В консоли Chrome вы можете следить за определенными функциями. Каждый раз, когда функция вызывается, она будет регистрироваться со значениями, которые были переданы.

Это отличный способ увидеть, какие аргументы передаются в функцию. В идеале консоль могла бы сказать, сколько аргументов ожидать, но не может. В приведенном выше примере func1 ожидает три аргумента, но передает только два. Если это не обрабатывается в коде, это может привести к возможной ошибке.

12. Быстрый доступ к элементам в консоли

Более быстрый способ сделать querySelector в консоли — использовать знак доллара. $(‘css-selector’) вернет первое совпадение с селектором CSS. $$(‘css-selector’) вернет их все. Если вы используете элемент более одного раза, стоит сохранить его как переменную.

13. Почтальон великолепен (но Firefox быстрее)

Многие разработчики используют Postman для экспериментов с запросами Ajax. Почтальон превосходен, но может быть немного раздражающим открытие нового окна браузера, создание новых объектов запроса и последующее их тестирование.

Вот как вы будете редактировать и повторно отправлять запросы в Firefox. Откройте Инспектор и перейдите на вкладку Сеть. Щелкните правой кнопкой мыши нужный запрос и выберите "Редактировать и отправить повторно".

Теперь вы можете изменить все, что захотите. Измените заголовок, отредактируйте параметры и нажмите "Отправить повторно".

Ниже я представляю запрос дважды с разными свойствами:

14. Перерыв при смене узла

DOM может быть забавным. Иногда что-то меняется, и ты не знаешь почему. Однако, когда вам нужно отладить JavaScript, Chrome позволяет приостановить работу при изменении элемента DOM. Вы даже можете отслеживать его атрибуты. В Chrome Inspector щелкните элемент правой кнопкой мыши и выберите нужный параметр перерыва:

15. Воспользуйтесь сервисами ускорения страницы

Существует множество сервисов и инструментов, которые можно использовать для проверки JavaScript вашей страницы и выявления замедлений или проблем. Одним из таких инструментов является Raygun Real User Monitoring. Это может быть полезно по другим причинам, помимо выявления проблем с JavaScript — медленная загрузка внешних скриптов, ненужный CSS, слишком большие изображения. Это может помочь вам узнать о проблемах JavaScript, которые вызывают непреднамеренное длительное время загрузки или неправильное выполнение.

Вы также сможете измерять улучшения производительности JavaScript и отслеживать их с течением времени.

16. Точки останова везде

Наконец, проверенная и верная точка останова может оказаться успешной. Попробуйте использовать точки останова по-разному в разных ситуациях.

Вы можете щелкнуть элемент и установить точку останова, чтобы остановить выполнение при изменении определенного элемента. Вы также можете перейти на вкладку «Отладчик» или вкладку «Источники» (в зависимости от вашего браузера) в инструментах разработчика и установить точки останова XHR для любого конкретного источника, чтобы он останавливался на запросах Ajax. В том же месте вы также можете приостановить выполнение кода при возникновении исключений. Вы можете использовать эти различные виды контрольных точек в инструментах браузера, чтобы максимизировать свои шансы найти ошибку, не тратя время на сторонние наборы инструментов.

Заключение

Подводя итог, можно сказать, что существует множество способов отладки кода JavaScript. Мы перечислили шестнадцать из них здесь. Существует также полезная статья, в которой перечислены инструменты отладки JavaScript, если вы хотите приступить к расширению инструментов своего браузера с помощью сторонней помощи.В любом случае вы сможете использовать эти советы, чтобы приступить к отладке кода JavaScript и получить код без ошибок, готовый к развертыванию и отправке!

Хотите получить стопроцентную видимость ошибок JavaScript?

Raygun предоставляет диагностическую информацию, необходимую для быстрого обнаружения и диагностики ошибок JavaScript. Благодаря поддержке всех фреймворков JavaScript и реализации с помощью нескольких строк кода вы можете начать исправлять ошибки прямо во время перерыва на кофе.
Попробуйте бесплатную пробную версию и начните мониторинг через несколько минут.

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

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

Краткий обзор редактора кода FreeCodeCamp:

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

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

Теперь переходим к хитростям:

Инструменты разработчика Google Chrome

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

1 : Основы DevTools

Запуск Chrome DevTools

в Windows и Linux или

на Mac или если вам просто нравится мышь, выберите Меню > Дополнительные инструменты > Инструменты разработчика.

Знакомство с источниками и вкладками консоли.

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

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

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

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

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

Функция Windows, Linux Mac
Поддерживается поиск по ключевому слову, регулярное выражение. Ctrl + F``Cmd + F
Найти и открыть файл 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 "на лету" с помощью исходных карт.

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

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

А вот и взлом!

Мы должны использовать исходные карты, чтобы присвоить имя JavaScript из нашего редактора. Это довольно просто:

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

И это Эврика!

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

Подробнее об отладке:

Если эта статья была вам полезна, отправьте твит .

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

freeCodeCamp – это поддерживаемая донорами некоммерческая организация, освобожденная от налогов в соответствии со статьей 501(c)(3) (идентификационный номер федерального налогоплательщика США: 82-0779546)

Наша миссия: помочь людям научиться программировать бесплатно. Мы достигаем этого, создавая тысячи видеороликов, статей и интерактивных уроков по кодированию — все они находятся в свободном доступе. У нас также есть тысячи учебных групп freeCodeCamp по всему миру.

Пожертвования в пользу freeCodeCamp идут на наши образовательные инициативы и помогают оплачивать серверы, услуги и персонал.

Читайте также: