Как Отключить дебаггер в хром?

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

Давайте отвлечёмся от написания кода и поговорим о его отладке.

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

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

Панель «Исходный код» («Sources»)

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

Работая в Chrome, откройте тестовую страницу.
Включите инструменты разработчика, нажав F12 (Mac: Cmd + Opt + I ).
Щёлкните по панели sources («исходный код»).

При первом запуске получаем следующее:

Кнопка-переключатель откроет вкладку со списком файлов.

Кликните на неё и выберите hello.js . Вот что появится:

Интерфейс состоит из трёх зон:

В зоне Resources (Ресурсы) показаны файлы HTML, JavaScript, CSS, включая изображения, используемые на странице. Здесь также могут быть файлы различных расширений Chrome.
Зона Source показывает исходный код.
Наконец, зона Information and control (Сведения и контроль) отведена для отладки, вскоре мы к ней вернёмся.

Чтобы скрыть список ресурсов и освободить экранное место для исходного кода, щёлкните по тому же переключателю .

Консоль

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

Результат выполнения инструкций сразу же отображается в консоли.

Например, результатом 1+2 будет 3 , а инструкция hello(«debugger») ничего не возвращает, так что получаем undefined :

Точки останова (breakpoints)

Давайте разберёмся, как работает код нашей тестовой страницы. В файле hello.js щёлкните по строчке номер 4 . Да, щёлкайте именно по самой цифре, не по коду.

Ура! Вы поставили точку останова. А теперь щёлкните по цифре 8 на восьмой линии. Номер строки будет окрашен в синий цвет.

Вот что в итоге должно получиться:

Точка останова – это участок кода, где отладчик автоматически приостановит исполнение JavaScript.

Пока исполнение поставлено «на паузу», мы можем просмотреть текущие значения переменных, выполнить команды в консоли, одним словом, мы выполняем отладку кода.

В правой части графического интерфейса мы видим список точек останова. А когда таких точек выставлено много, да ещё и в разных файлах, этот список поможет эффективно ими управлять:

Быстро переместиться к любой точке останова в коде – нужно щёлкнуть по точке в правой части экрана.
Временно деактивировать точку – в общем списке снимите галочку напротив ненужной в данный момент точки.
Удалить точку – щёлкните по ней правой кнопкой мыши и выберите Remove (Удалить).
…и так далее.

Можно задать и так называемую условную точку останова – щёлкните правой кнопкой мыши по номеру строки в коде. Если задать выражение, то именно при его истинности выполнение кода будет приостановлено.

Этот метод используется, когда выполнение кода нужно остановить при присвоении определённого выражения какой-либо переменной или при определённых параметрах функции.

Команда Debugger

Выполнение кода можно также приостановить с помощью команды debugger прямо изнутри самого кода:

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

Остановимся и оглядимся

В нашем примере функция hello() вызывается во время загрузки страницы, поэтому для начала отладки (после того, как мы поставили точки останова) проще всего её перезагрузить. Нажмите F5 (Windows, Linux) или Cmd + R (Mac).

Выполнение прервётся на четвёртой строчке:

Чтобы понять, что происходит в коде, щёлкните по стрелочкам справа:

Watch показывает текущие значения выражений.

Нажмите на + и введите выражение. В процессе выполнения отладчик автоматически пересчитывает и выводит его значение.

Call Stack показывает последовательность вызовов функций.

В нашем примере отладчик работает с функцией hello() , вызванной скриптом из файла index.html (там нет функции, поэтому вызов «анонимный»).

При нажатии на элемент списка (например, на «anonymous») отладчик переходит к соответствующему коду, и нам представляется возможность его проанализировать.

Scope показывает текущие переменные.

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

В Global перечисляются глобальные переменные (т.е. объявленные за пределами функций).

Не обращайте пока внимание на ключевое слово this – его мы изучим чуть позже.

Пошаговое выполнение скрипта

А теперь давайте пошагаем по нашему коду.

В правой части панели для этого есть несколько кнопок. Рассмотрим их.

– продолжить выполнение. Быстрая клавиша – F8 .

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

Вот, что мы увидим, кликнув на неё:

Выполнение кода возобновилось, дошло до другой точки останова внутри say() , и отладчик снова приостановил выполнение. Обратите внимание на пункт «Call stack» справа: в списке появился ещё один вызов. Мы теперь внутри функции say() .

– сделать шаг (выполнить следующую команду), не заходя в функцию. Быстрая клавиша – F10 .

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

– сделать шаг. Быстрая клавиша – F11 .

В отличие от предыдущего примера, здесь мы «заходим» во вложенные функции и шаг за шагом проходим по скрипту.

– продолжить выполнение до завершения текущей функции. Быстрая клавиша – Shift + F11 .

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

– активировать/деактивировать все точки останова.

Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова.

– разрешить/запретить остановку выполнения в случае возникновения ошибки.

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

Если щёлкнуть правой кнопкой мыши по строчке кода, в контекстном меню можно выбрать опцию «Continue to here» («продолжить до этого места»).

Этот метод используется, когда нам нужно продвинуться на несколько шагов вперёд до нужной строки, но лень выставлять точки останова.

Логирование

Если нужно что-то вывести в консоль из кода, применяется функция console.log .

К примеру, выведем в консоль значения от нуля до четырёх:

Обычный пользователь сайта не увидит такой вывод, так как он в консоли. Напомним, что консоль можно открыть через инструменты разработчика – выберите вкладку «Консоль» или нажмите Esc , находясь в другой вкладке – консоль откроется в нижней части интерфейса.

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

Итого

Приостановить выполнение скрипта можно тремя способами:

Точками останова.
Использованием в коде команды debugger .
При ошибке (если инструменты разработчика открыты и опция включена).

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

Нами описаны далеко не все инструменты разработчика. С полным руководством можно ознакомиться здесь: https://developers.google.com/web/tools/chrome-devtools.

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

И, конечно, вы можете просто покликать в разных местах инструментов разработчика. Пожалуй, это наискорейший способ ими овладеть. Не забывайте про правый клик мыши и контекстные меню!

Как отключить отладку в Chrome?

Просто нажмите Ctrl + F8. В качестве альтернативы вы можете нажать соответствующую кнопку рядом с кнопками, управляющими отладчиком. Таким образом, казнь не остановится.

Как остановить отладку?

Чтобы остановить отладчик, попробуйте две вещи:

Щелкните «Инструменты»> «Веб-разработчик»> и убедитесь, что флажок «Отладчик» не установлен.
Вместо этого переключите инструменты> Нажмите «Отладчик», нажмите шестеренку в правом углу и снимите флажок «Показывать при запуске».

Как отключить приостановленный отладчик в Chrome?

Чтобы отключить его, просто щелкните правой кнопкой мыши указанные часы и выберите «Удалить выражение для наблюдения». Существует раздел под названием «Точки останова EventListener», в котором содержится список других точек останова, которые можно установить.

Как включить отладку в Chrome?

Ctrl + Shift + C, чтобы переключить режим проверки элемента. ⌥ + ⌘ + J, чтобы открыть Инструменты разработчика и перенести фокус на консоль. ⌥ + ⌘ + C для переключения режима проверки элемента. Нажмите функциональную клавишу F12 в браузере Chrome, чтобы запустить отладчик JavaScript, а затем нажмите «Сценарии».

Как вы отлаживаете?

7 шагов для эффективной и действенной отладки

1) Всегда воспроизводите ошибку, прежде чем начинать изменять код.
2) Понять трассировку стека.
3) Напишите тестовый пример, воспроизводящий ошибку.
4) Знайте свои коды ошибок.
5) Гугл! Бинг! Утка! Утка! Идти!
6) Парная программа — ваш выход из этого.
7) Празднуйте свое решение.

Как мне остановить отладочную паузу?

TL; DR Щелкните правой кнопкой мыши в области, где вы обычно устанавливаете точки останова, выберите «никогда не останавливаться здесь», и вы можете предотвратить остановку отладчика при исключениях или операторах отладчика.

Как мне отладить свой браузер?

Шаг 1. Откройте приложение в веб-браузере Chrome.
Шаг 2. Откройте консоль разработчика, проверив свою веб-страницу и выбрав вкладку «Исходный код» или выберите «Просмотр» → «Разработчик» → «Просмотр исходного кода».
Шаг 3: Установите точку останова в исходном коде примерно так, как мы делали в браузере Mozilla.

Как вы отлаживаете сайт?

Как отладить мобильный сайт?

Откройте параметры разработчика. На устройстве Android откройте меню «Настройки» и выберите «Параметры разработчика».
USB отладки. Теперь откройте меню параметров разработчика и выберите параметр отладки по USB.
Настройте Chrome для проверки DOM.
Начать отладку.

Что значит отладка?

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

Как удалить приостановленное из Chrome?

Как я могу решить проблему с приостановкой синхронизации Google Chrome?

Сбросьте Google Chrome. Нажмите кнопку меню «Настроить Google Chrome», которая находится в правом верхнем углу окна браузера. …
Отключите параметр Очистить файлы cookie и данные сайта при выходе из Chrome. …
Добавьте страницу учетной записи Google к разрешенным сайтам.

Как удалить все точки останова в отладчике Chrome?

Теперь это возможно на вкладке «Источники» в Инструментах разработчика Chrome. См. Снимок экрана ниже и щелкните правой кнопкой мыши в разделе «Точки останова» в левом окне. С недавнего времени (Chrome 18) вы можете щелкнуть правой кнопкой мыши любую точку останова на панели «Точки останова» и вуаля! Пункт всплывающего меню «Удалить все точки останова JavaScript»!

Как отлаживать JSP в Chrome?

Щелкните правой кнопкой мыши в представлении «Исходный код» и выберите «Отладка как> Отладка на сервере». Процесс такой же, как и при запуске приложения. …
Нажмите OK, чтобы перезапустить в режиме отладки.
В диалоговом окне «Отладчик JSP» нажмите «Да».
Приложение запускается.

Как отлаживать HTML в Chrome?

Отладка вашего сайта с помощью инструментов разработчика Chrome

В браузере Chrome откройте сайт, который хотите отладить.
Щелкните правой кнопкой мыши элемент, который нужно отладить. В этом примере мы анализируем желтую кнопку.
Нажмите «Проверить».

Что такое файл отладки на моем компьютере?

Когда Windows 10 зависает или дает сбой, вы иногда можете обнаружить отладку. txt на рабочем столе. Вы можете открыть файл с помощью простого текстового редактора. Файл отладки обычно содержит информацию об обнаруженных вами ошибках.

Как использовать отладчик консоли?

Чтобы открыть консоль отладки, используйте действие консоли отладки в верхней части панели отладки или используйте команду View: Debug Console (Ctrl + Shift + Y). Выражения оцениваются после нажатия клавиши Enter, и REPL консоли отладки показывает предложения по мере ввода.

Подробный гайд по отладке кода на JavaScript в Chrome Devtools

Рассказываем, как использовать панель Chrome Devtools удобна для отладки.

Поиск и исправление ошибок может быть затруднительным для новичков. Если думаете, что использовать console.log () для отладки кода лучшее решение, то вы неправы.

В этой статье мы расскажем об отличных инструментах Google Chrome Devtools для дебаггинга Этот процесс является гораздо более эффективным способом решения данной проблемы.

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

Шаг 1: Воспроизведите баг

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

Чтобы самому проделать действия из этого туториала, сделайте следующее:

Вот веб-страница, с которой мы будем работать в этом уроке. Не забудьте открыть её в новой вкладке;
Введите число 5 в поле «Number 1»;
Введите число 1 в поле «Number 2»;
Кликните на кнопку «Add»;
Посмотрите, вам говорят, что 5+1=51;

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

Шаг 2: Приостановите выполнение с помощью точки останова

DevTools позволяют остановить выполнение кода в процессе и посмотреть значения всех переменных в этот момент времени. Инструмент для приостановки кода называется брейкпоинтом. Попробуйте:

Вернитесь на нашу тестовую страницу и включите DevTools, нажав Cmd + Option + I (Mac) или Ctrl + Shift + I (Windows, Linux);
Перейдите к вкладке «Sources»;
Разверните «Event Listener». DevTools раскроет список категорий событий, таких как анимация и буфер обмена;
Поставьте флажок в ячейке «click»;

Почему так происходит?

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

Шаг 3: Выполните пошаговую отладку

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

На панели «Sources» нажмите «Step into next function call button»

Эта кнопка позволит последовательно отследить выполнение функции onClick. Остановите процесс, когда DevTools выделит следующую строку кода:

Теперь нажмите кнопку «Step over next function call button»;

Теперь DevTools знает, что нужно выполнить inputAreEmpty (), без дебаггинга его содержимого. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит потому, что inputAreEmpty () возвращает false, поэтому блок if не выполнялся.

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

Шаг 4: Выберите другую точку останова

Тип line-of-code является наиболее популярным брейкпоинтом. Если вы знаете, где может быть ошибка, используйте этот тип:

Посмотрите на последнюю строку кода в updateLabel (), которая выглядит так:
Слева от этого кода вы увидите номер строки: 32. Нажмите 32. Теперь DevTools всегда будет приостанавливаться до выполнения этой строки кода;
Нажмите кнопку «Resume script execution button». Сценарий продолжит выполняться, до следующей строки кода с брейкпоинтом;
Посмотрите на строки кода в updateLabel (), которые уже выполнены. DevTools выводит значения addend1, addend2 и sum.

Значение суммы выглядит подозрительно. Похоже, оно оценивается не как число, а как строка. Это ещё одна частая причина ошибок.

Шаг 5: Проверьте значения переменных

Распространенной причиной ошибок является то, что переменная или функция генерируют не то значение, которое нужно. Многие разработчики используют console.log (), чтобы посмотреть, как меняются значения, но console.log () для этого плохо подходит, как минимум по двум причинам: во-первых, может потребоваться вручную редактировать код с большим количеством вызовов console.log (), во-вторых, вы можете не знать, какая переменная связана с ошибкой, поэтому придётся выводить сразу несколько переменных.

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

На панели «Sources» выберите вкладку «Watch»;
Затем нажмите «Add Expression»;
Введите typeof sum;
Нажмите enter. DevTools покажет typeof sum: «string». Это значение является результатом Watch Expression.

Как и предполагалось, sum расценивается как строка, а не как число. Это та самая ошибка, о которой мы говорили выше.

Ещё одной альтернативой DevTools для console.log () является консоль. Разработчики часто используют её для перезаписи значений переменных при отладке. В вашем случае консоль может быть удобна, чтобы проверить способы исправить ошибку. Пример:

Если вы не открыли панель с консолью, нажмите Escape, чтобы открыть его. Он открывается в нижней части окна DevTools;
В консоли введите parseInt (addend1) + parseInt (addend2);
Нажмите enter. DevTools выводит число 6, что и является ожидаемым результатом.

Шаг 6: Внесите исправления

Вы определили где ошибка. Осталось только исправить её, отредактировав код и перезапустив демо. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools:

В редакторе кода на панели «Sources» замените var sum = addend1 + addend2 на var sum = parseInt (addend1) + parseInt (addend2) ; Это строка №31.
Нажмите Cmd + S (Mac) или Ctrl + S (Windows, Linux), чтобы применить изменения. Фон кода изменится на красный, чтобы показать, что сценарий был изменен в DevTools;
Нажмите «Deactivate breakpoints»

Цвет поменяется на синий. В этом режиме, DevTools игнорирует любые брейкпоинты, которые вы установили.

Нажмите «Resume script execution».

Впишите в поля числа, протестируйте. Теперь всё должно работать как следует!

Возможно вас заинтересуют следующие материалы:

Как отключить JavaScript в Chrome Developer Tools?

Я пытаюсь отладить функции веб-сайта, когда пользователи отключают свой JavaScript. Мне было интересно, как отключить JavaScript для страницы из Google Chrome DevTools?

18 ответов

Нажмите ⋮ меню в углу инструментов разработчика, нажмите «Настройки», затем установите флажок » Disable Javascript в » Debugger .

Инструменты для разработчиков (F12)
Три вертикальных точки в правом верхнем углу.
Настройки
На вкладке «Настройки» слева

Появится раздел «Отладчик» с опцией (возможно, справа).

Теперь в DevTools встроено командное меню, облегчающее отключение JavaScript. Это было примерно с апреля 2016 года или около того.

Откройте DevTools.
Нажмите Command + Shift + P (Mac) или Control + Shift + P (Windows, Linux), чтобы открыть меню команд. Убедитесь, что курсор находится в окне DevTools, а не в окне просмотра браузера.
Введите Disable JavaScript (или некоторую версию этого. это нечеткий поиск), а затем нажмите Enter .

Используйте команду » Enable JavaScript когда хотите снова включить ее.

chrome://chrome/settings/content Javascript/Управление исключениями

Это расширение делает это быстрее: Quick Javascript Switcher

Вы также можете запустить Chrome с отключенным JavaScript по умолчанию, используя флаг:

Вы использовали бы это, например, запустив Chrome следующим образом:

В OSX мне пришлось щелкнуть тройные вертикальные точки и снять флажок в разделе настроек. Который также можно открыть с помощью f1

Самый быстрый способ, вероятно, следующий:

F12, чтобы открыть консоль разработчика
Ctrl + Shift + P, чтобы открыть командный инструмент (Windows)
Введите «отключить JavaScript» и нажмите Enter

Нажмите ⋮ меню в углу инструментов разработчика, нажмите Настройки
Нажмите на Дополнительно внизу
Нажмите на настройки контента
Нажмите на JavaScript
Выключить

Быстрый путь:

1) просто нажмите CTRL + SHIFT + P

2) заполните поле 3 буквами dis и появится это поле и выберите пункт Disable Javascript

Чтобы временно заблокировать JavaScript в домене:

Нажмите кнопку слева на адрес в адресной строке (который говорит View site information )
В раскрывающемся списке рядом с JavaScript выберите Always block on this site
Обновить страницу

Использование только клавиатуры, по крайней мере, для Windows 10:

F12 , показывает инструменты разработчика
F1 , показывает Настройки
tab , переместится на флажок «Отключить JavaScript»
space , переключает опцию
esc , скрывает настройки

Перейдите к настройкам (Windows: три вертикальные точки в правом верхнем углу) → Настройки или нажмите F1.
В разделе «Общие» вы найдете «отключить JavaScript»

Значок шестерни больше не является частью инструментов разработчика. Начиная с Chome 30.0, его даже невозможно вернуть (В Google Developer Developer Tools значок панели инструментов исчез. Что дает?)

Preferences
Показать дополнительные параметры
Нажмите кнопку «Настройки контента»
Перейдите к разделу «JavaScript»
Установите флажок напротив «Не разрешать запуск JavaScript на сайте»

Полные и быстрые инструкции для браузеров Chrome (Opera incl.)

Первый путь

Если Инструменты разработчика не открыты, нажмите клавишу F12 на клавиатуре, чтобы отобразить Инструменты разработчика. В браузере Opera вы должны использовать комбинацию клавиш Ctrl + Shift + i на клавиатуре, чтобы открыть ее.
Чтобы показать настройки, просто нажмите клавишу F1 на клавиатуре. Когда вы это делаете, окно инструментов разработчика должно быть сфокусировано. Или, если вы хотите, чтобы открыть настройки с помощью мыши, то вы должны нажать на ⋮ кнопку в правом верхнем углу Инструменты разработчика, а затем нажмите Settings в меню.

Затем вам нужно прокрутить окно настроек вниз, а затем вы увидите флажок для отключения JavaScript следующим образом:

Просто установите этот флажок и нажмите клавишу esc на клавиатуре, чтобы скрыть настройки. Если вы хотите включить его, вы должны сделать то же самое снова.

Второй способ

Если инструменты разработчика не открыты, откройте его, как описано в первом способе.
Нажмите комбинацию клавиш Ctrl + Shift + P (для Windows или Linux) или Cmd (⌘) + Shift + P (для Mac), чтобы открыть меню команд. Убедитесь, что основное внимание уделяется окну DevTools.
Введите там «Отключить JavaScript» и затем нажмите Enter или щелкните по нему мышью. Если вы хотите вернуть назад включенный JS, затем снова откройте меню команд и введите там «Включить JavaScript», а затем нажмите Enter или щелкните по нему мышью. Вы также можете написать только «JavaScript» или «Java», а затем выбрать его с помощью мыши.

Если все это не работает

По некоторым причинам возможно, что это не работает. В этом случае я открываю новый пустой сайт в «Режиме инкогнито» и делаю все это там.

Самый быстрый способ

В Chrome Web Store или на сайте Opera Addon вы можете найти и установить расширения, которые делают это за один клик. Просто выполните поиск «Javascript Switcher» :

Расширение Debugger for Chrome для VS Code

Расширение предназначено для отладки js-кода в редакторе VS Code с использованием Chrome DevTools протокола. Это альтернатива тому, чтобы отлаживать js-код в панели разработчика браузера Chrome. Для начала работы нужно установить это расширение в разделе плагинов.

Давайте создадим директорию project , а внутри нее еще две директории — src и dist . В директории src будут исходники, а в директории dist — готовая сборка. И откроем проект в VS Code — нужно кликнуть по директории project правой кнопкой мыши и выбрать в контекстном меню «Открыть с помощью VS Code».

Для работы отладчика нужно создать файл конфикурации launch.json в директории project/.vscode . Но вручную его создавать не нужно, при первом запуске отладчика файл будет создан автоматически. Для этого нужно кликнуть по иконке «Запуск и отладка», потом по ссылке «создать файл launch.json».

Расширение Debugger for Chrome может работать в двух режимах — либо самостоятельно запускать экземпляр Chrome ( launch ), либо присоедениться к уже работающему экземпляру Chrome ( attach ). Вообще говоря, можно запустить отладку даже без веб-сервера, но удобнее все-таки иметь работающий веб-сервер, например LiveServer . Как установить и настроить расширение Live Server для VS Code — можно прочитать здесь.

Подготовка к отладке

Давайте в директории project/dist создадим файл index.html , который подключает js-файл script.js . И создадим файл script.js , в котором добавим точку останова, чтобы проверить работу отладчика.

Режим launch (запуск)

1. Запуск отладки в режиме launch без сервера

Для начала запустим отладку без использования веб-сервера. Редактируем файл конфигурации отладчика launch.json :

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

Будет запущен браузер Chrome, в котором будет открыт файл project/dist/index.html . Поскольку в этом html-файле подключается js-файл project/dist/script.js — выполнение остановится в точке останова.

2. Запуск отладки в режиме launch с LiveServer

Теперь добавим вторую конфигурацию запуска отладки — уже с использованием веб-сервера LiveServer.

У меня LiveServer работает на порту 5555 (по умолчанию 5500), корень веб-сервера — project/dist . Разумеется, перед запуском отладки надо запустить веб-сервер — кнопка запуска LiveServer находится в правом нижнем углу. Но LiveServer не должен сам запускать браузер, поэтому добавляем опцию liveServer.settings.NoBrowser в файл конфигурации settings.json редактора VS Code.

Режим attach (присоединение)

3. Запуск отладки в режиме attach без сервера

Для начала запустим отладку в режиме attach без использования веб-сервера. Для этого добавляем третью конфигурацию запуска отладчика:

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

Давайте убедимся в том, что браузер был запущен с опцией remote-debugging-port , для этого открываем еще одну вкладку, набираем в адресной строке chrome://version и проверяем значение «Командная строка».

Теперь надо открыть в браузере файл project/dist/index.html , это можно сделать с помощью сочетания клавиш Ctrl+O. Нужно убедиться, что отладчик браузера Chrome в панели разработчика остановился на точке останова, если это не так — перезагрузить страницу с помощью F5.

И наконец, присоединяемся к этому экземпляру Chrome из редактора VS Code — как обычно, жмем F5 для запуска отладчика.

Если открыта только одна вкладка браузера, не возникает вопроса — к какой вкладке присоединяться. Но если вкладок две или три, нужно сообщить расширению «Debugger for Chrome» — к какой из них нужно присоединиться. Это можно сделать с помощью опции url , в которой надо указать содержимое адресной строки нужной вкладки.

4. Запуск отладки в режиме attach с LiveServer

Теперь запустим отладку в режиме attach с использования сервера LiveServer. Для этого добавляем четвертую конфигурацию запуска отладчика:

Запускать браузер LiveServer должен с опцией remote-debugging-port — поэтому открываем файл настроек VS Code settings.json и добавляем еще одну настройку. Все экземпляры Chrome должны быть закрыты перед тем, как LiveServer запустит новый экземпляр.

Перед запуском отладки надо запустить веб-сервер — кнопка запуска LiveServer находится в правом нижнем углу. Теперь все готово — как обычно, жмем F5 для запуска отладчика.

Глобальные настройки отладчика

Все настройки для отдельного проекта launch.json можно перенести в файл настроек settings.json редактора VS Code — тогда они будут использоваться для всех проектов.

Профиль Chrome для отладки

Расширения Chrome, которые используются для повседневного использования и для веб-разработки часто конфликтуют. Было бы удобно иметь возможность запускать два разных экземпляра Chrome с разными профилями. Один — для повседневного использования при просмотре сайтов, другой — исключительно для веб-разработки.

Давайте создадим еще один ярлык запуска Chrome и изменим строку запуска в свойствах этого ярлыка:

Теперь запустим Chrome с использованием этого ярлыка, чтобы создать новый профиль Developer :

Путь к новому профилю можно посмотреть, если набрать в адресной строке браузера chrome://version :

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

Теперь можно установить все расширения, которые нужны для веб-разработки. А из профиля Default для повседневного использования — эти расширения удалить.

Используем новый профиль

1. Отладка в режиме launch без сервера и с профилем Developer

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

Опция userDataDir указывает на директорию для хранения профилей, по умолчанию имеет значение временной директории. При запуске отладчика создается временный профиль Default , с которым и будет запущен браузер.

Но нам нужно запустить браузер с нашим профилем Developer , который расположен совсем в другом месте, поэтому используем значание false и указываем название профиля, который нужно использовать.

Опция может принимать значение true — использовать временный профиль, false — не использовать временный профиль, путь — использовать указанный путь к директории с профилями.

2. Отладка в режиме launch с LiveServer и c профилем Developer

Давайте скажем веб-серверу, чтобы он сам не запускал браузер — это будет делать отладчик:

И скажем отладчику, чтобы он запускал браузер с использованием профиля Developer :

3. Отладка в режиме attach без сервера и с профилем Developer

В этом случае нам надо самим запускать браузер с профилем Developer (ярлык для этого у нас уже есть), но еще мы должны указать дополнительную опцию remote-debugging-port — создать еще один ярлык или исправить существующий.

4. Отладка в режиме attach с LiveServer и с профилем Developer

Давайте скажем веб-серверу, чтобы запускал браузер с использованием профиля Developer и с доп.опцией remote-debugging-port .

Вместо заключения

Получилось несколько многословно, но это из-за того, что мы рассмотрели все возможные варианты запуска отладчика. В реальности запускать отладчик чаще всего удобнее в режиме attach с использованием веб-сервера. LiveServer уже запущен, все изменения сразу отражаются в окне браузера, а если потребовалась отладка — присоединяемся к уже открытому окну.

Как настроить расширение Debugger for Chrome для Visual Studio Code

Перевод статьи «How to set up the debugger for Chrome extension in Visual Studio Code».

Отладка веб-приложений с помощью Visual Studio Code повышает эффективность вашей работы. Она помогает сэкономить много времени и поддерживать чистоту кода. А все потому, что вам не приходится писать целую кучу console.log и вы можете просматривать выполнение вашего кода построчно. Но раз вы уже здесь, вы, вероятно, и так знаете о преимуществах отладки веб-приложений. Итак, начнем…

Разбираемся в настройках

Для начала вам нужно установить расширение Debugger for Chrome. (Для этого откройте VS Code, нажмите Ctrl+P, вставьте в открывшейся строке команду ext install msjsdiag.debugger-for-chrome и нажмите enter). После установки отладчик можно начинать использовать практически сразу.

Но вы можете настраивать поведение отладчика для каждого своего проекта (поэтому для дальнейших действий следует сразу открыть папку нужного проекта).

Далее вам нужно создать файл запуска для Visual Studio Code Debugger. Этот файл будет содержать различные настройки отладчика для выбранного проекта.

Для создания файла запуска нужно перейти в раздел отладки в панели действий (Activity Bar ) и кликнуть на значок шестеренки.

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

После этого в папке вашего проекта появится директория .vscode с файлом launch.json. Этот файл также откроется в вашем VS Code; в нем мы и будем указывать настройки конфигурации.

Конфигурация

Есть два вида конфигурации отладчика: launch и attach. Устанавливаются они в опции request. Выбирать нужный вид можно для каждого отдельного объекта конфигурации.

Launch

Конфигурация Launch предполагает запуск отдельного экземпляра Chrome, в котором выполняется указанный файл или URL.

Если вы указываете URL, вам нужно указать директорию, файлы которой обслуживаются, в опции webRoot. Это можно сделать путем указания абсолютного пути или с использованием преобразователя $ (он указывает на папку, открытую в вашем рабочем пространстве Visual Studio Code).

Примечание: будьте осторожны при указании webRoot, поскольку эта опция используется, чтобы резолвить URL к файлам на вашем компьютере.

В примере вы можете видеть два варианта конфигурации launch: один предполагает запуск локального сервера, а другой – отдельного файла.

[javascript]
<
«version»: «0.2.0»,
«configurations»: [
<
«type»: «chrome»,
«request»: «launch»,
«name»: «Launch Chrome against localhost»,
«url»: «http://localhost:8080»,
«webRoot»: «$»
>,
<
«type»: «chrome»,
«request»: «launch»,
«name»: «Open a specific file»,
«file»: «$/index.html»
>
]
>[/javascript]

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

Примечание: когда вы остановите отладчик, окно Chrome закроется.

Attach

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

Windows

Есть два способа запустить Chrome с удаленной отладкой в Windows. Самый простой – кликнуть правой кнопкой мыши по ярлыку Google Chrome. Затем нужно выбрать нужную опцию в свойствах и добавить следующую команду в поле target.

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

Другой способ – открыть командную строку и выполнить в ней следующую команду (заменив при этом на настоящее местоположение установки вашего Chrome):

macOS

Откройте терминал и выполните следующую команду:

Linux

Откройте терминал и выполните следующую команду:

Указанные команды (во всех трех вариантах) открывают Chrome с дополнительной опцией, которая указывает порт для удаленной отладки – 9222. Узнать больше по этой теме можно здесь.

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

Вот пример конфигурации attach:

[javascript]
<
«version»: «0.2.0»,
«configurations»: [
<
«type»: «chrome»,
«request»: «attach»,
«name»: «Attach to Chrome»,
«port»: 9222,
«url»: «http://localhost:3000»,
«webRoot»: «$/src»
>
]
>
[/javascript]

Примечание: если вы не установите опцию «url», вам будет предложен список из ваших открытых вкладок.

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

Заключение

Поздравляем! Вы научились устанавливать и настраивать отладчик для Chrome в Visual Studio Code. Также вы научились запускать Google Chrome с включенной возможностью удаленной отладки. Теперь пора исследовать это расширение и углубить свои знания. Я настоятельно советую изучить репозиторий этого расширения.