Chrome paused in debugger отключить

Обновлено: 05.07.2024

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

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

Мы будем использовать браузер 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 .
При ошибке (если инструменты разработчика открыты и опция включена).

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

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

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

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

Что можно сделать?

ОТВЕТЫ

Ответ 1

Одна из возможных причин, что вы включили "паузу на исключениях" (значок маленькой стоп-знака с символом паузы (||) с в левом нижнем углу окна). Попробуйте щелкнуть по нему, чтобы вернуться в состояние off/gray (не красное или голубое состояние) и перезагрузить страницу.

Ответ 2

В моем случае у меня установлен флаг Any XHR true в настройках XHR Breakpoints , доступный на вкладке "Источники" в инструментах Chrome dev.

Снимите флажок, чтобы Chrome работал нормально снова.

Ответ 3

Это также может вызвать проблему

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

Не должно быть серым, как это

Ответ 4

И есть несколько вариантов ниже, если вы проверили некоторые, когда это условие активно, отладчик точки останова также активен

Ответ 5

Если вы перейдете в раздел "Источники", вы увидите кнопку паузы внизу DevTools. В принципе, в DevTools есть 3 варианта паузы при отладке js файла,

Не приостанавливать исключения ():

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

Приостановить все исключения ():

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

Пауза на неперехваченных исключениях ():

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

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

Ответ 6

Угу. Я просто изучаю инструменты chrome dev сегодня и нашел то же самое - если выше не удается, разверните область, изображенную здесь, и найдите точки останова, которые вы, возможно, установили и забыли.

Ответ 7

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

Ответ 8

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

Ответ 9

Другой пользователь упомянул об этом небольшими подробностями, но я пропустил его, пока я не вернулся сюда примерно 3 раза в течение 2 дней -

Существует раздел под названием "Контрольные точки EventListener", который содержит список других точек останова, которые могут быть установлены. Бывает, что я случайно включил одну из них в DOM Mutation, которая давала мне знать, когда что-либо в DOM было переопределено. К сожалению, это привело к тому, что я отключил кучу плагинов и надстроек, прежде чем понял, что это всего лишь моя машина. Надеюсь, это поможет кому-то еще.

Ответ 10

Действительно глупая проблема, с которой я столкнулся, привел меня сюда с отладчиком; command.: "debugger;" на нем установлены часы.

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

Чтобы отключить его, просто нажмите правой кнопкой мыши на "Наблюдение" и нажмите "Удалить выражение".

Ответ 11

Это действительно плохой опыт. если вышеупомянутый ответ не сработал, попробуйте это.

Нажмите на значок "Настройки", затем нажмите кнопку "Восстановить настройки по умолчанию и перезагрузить".

Нажмите "F8", пока он не станет нормальным.

Ответ 12

Вы можете просто перейти в Breakpoints в консоли разработчика Chrome, щелкнуть правой кнопкой мыши и удалить точки останова. Простой.

Ответ 13

Вы можете нажать CTLR + F8 , чтобы активировать или деактивировать точки взлома.

Это короткое решение.

Ответ 14

В моем цикле for произошла синтаксическая ошибка. Это вызвало ошибку паузы.

Расширение предназначено для отладки 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 без использования веб-сервера. Для этого добавляем третью конфигурацию запуска отладчика:

Давайте убедимся в том, что браузер был запущен с опцией 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

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

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

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

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

Вы научились проверять сгенерированный HTML и применённые стили? Уже смело можете отлаживать JavaScript в браузере? Надеюсь, поскольку в этой серии мы рассмотрим продвинутые функции отладчика Chrome, закрепив навыки, полученные в первой части.

Освоив новые навыки, мы поэкспериментируем с базовыми примерами Kendo UI, а в конце статьи возьмём реальный пример jQuery Grid, чтобы отточить на нем свежеприобретенные знания.

В этой статье:

Умное автодополнение

Умное автодополнение — известная функция в IDE, помогающая эффективнее писать код. В Chrome 68 разработчики DevTools включили аналогичные функции в консоль. А именно: упреждающее вычисление, автодополнение после выполнения функции и подсказки для аргументов.

Давайте рассмотрим эти возможности на примере следующей функции:

Упреждающее вычисление

Вот что отобразится в консоли отладчика Chrome с включённым упреждающим вычислением:

Таким образом можно вычислять выражения в коде в консоли, если у этих выражений нет побочных эффектов (когда выполнение кода не только возвращает значение, но и делает ещё что-то). Подробнее о побочных эффектах можно узнать из вопроса «JavaScript-замыкания и побочные эффекты простым языком?» на StackOverflow

Совет: такое же вычисление происходит, когда вы открываете вкладку «Исходники» (Source) в режиме отладки и наводите на выражение или выделяете его.

Автодополнение после выполнения функции

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

Совет: сохраните результат функции в переменной (см. «Автодополнение IntelliSense для объектов на стороне клиента») и для проверки результата выполните функцию в консоли.

Затем используйте API консоли и сохраните выражение в переменной как var lastEvaluatedExpression = $_; .

Подсказки для аргументов

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

Лёгкое обращение к выбранным элементам и выполненным выражениям

В предыдущем разделе я не пояснил, что делает переменная $_. Это не магия, а часть встроенного API командной строки. Отладчик Chrome присваивает объекты и выражения списку предопределенных переменных. Например, при вычислении выражения 40+2 получится 42. И, допустим, мне лень запоминать, как называлась переменная или что это было за выражение, а тем более ждать 7.5 миллионов лет, пока компьютер высчитывает этот ответ. С отладчиком Chrome теперь достаточно переменной $_ .

API командной строки в отладчике Chrome сохраняет объекты и результаты выражения в предопределённые переменные. Консоль предоставляет ещё и такие полезные сокращения: $0 , $1 , $2 , $3 и $4 . $0 ссылается на последний выбранный элемент в панели «Элементы», $1 — на предыдущий, и так далее. Это может оказаться полезным, когда нужно получить ссылку на DOM-элемент, предоставляющий компонент или виджет, и вам нужно быстро проверить его доступные части.

Давайте поупражняемся с этим на примере PanelBar для Kendo UI, где мы обратимся к первому элементу, скроем его, а после покажем снова.

Совет: отладчик Chrome может подсказать вам, как оптимизировать изменения HTML и DOM, которые происходят в вашем приложении (см. «Молниеносное отображение списка в Angular»)

Просмотр всплывающих подсказок и элементов, которые скрываются автоматически

Просматривать всплывающие подсказки бывает нелегко, поскольку они исчезают через какое-то время. С другими автоматически скрываемыми элементами — вроде тех, что отображаются при взаимодействии с юзером (к примеру, клик мышью или перетаскивание) — та же история. Чтобы их отловить, я часто прибегал ко всяким ухищрениям, придумывая жуткий код, который будет на них ссылаться. Встречайте setTimeout() и debugger .

setTimeout() нужен для выполнения определённой логики через заданное время. А ещё он меняет порядок выполнения функций. Это пригодится при выполнении функции после быстрой анимации (см. «Почему setTimeout(fn, 0) иногда полезен?»)

Разобравшись, как работает setTimeout() , мы можем объединить его мощь с оператором debugger , и тогда можно будет активировать режим отладки, когда автоматически скрываемый элемент виден, и не бояться, что он тотчас же исчезнет.

На анимации ниже показано, как можно просмотреть всплывающую подсказку, вызывая setTimeout(function(), 3000) в консоли:

Совет: чтобы вывести в лог элементы, на которые в данный момент перешёл фокус, вставьте следующий код консоль: window.focusedelement; setInterval(function()< if(window.focusedElement != document.activeElement)>)

Для отмены повторения с интервалом можно перезагрузить страницу или использовать clearInterval() :

Продвинутая отладка с помощью отладчика Chrome

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

Точки останова по изменению DOM

Они прерывают выполнение скрипта, если у выбранного элемента в DOM меняется структура, атрибут или он удаляется с помощью JavaScript. Чтобы включить/выключить эту возможность, кликните правой кнопкой по элементу в панели «Элементы», наведите на пункт «Остановить» (Break) в контекстном меню и выберете «модификации поддерева» (subtree modifications), «модификации атрибута» (attribute modifications) или «удаление узла» (node removal).

Точки остановка для XHR/Fetch

Они прерывают выполнение скрипта, если адрес запрошенного ресурса содержит строку, на которую настроена точка останова. Чтобы включить/выключить эту возможность: разверните область «Точки останова для XHR» (XHR Breakpoints) в панели «Исходники», кликните на кнопку «Добавить точку останова» (Add breakpoint) и введите нужную часть URL.

Точки останова для обработчиков событий

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

Точки останова для исключений

Они прерывают выполнение скрипта, когда выбрасываются обработанные или необработанные исключения. Чтобы включить/выключить эту возможность: нажмите кнопку «Пауза при исключении» (Pause on Exception) во вкладке «Исходники»; когда эта кнопка включена, появляется добавочная опция «Пауза при обработанных исключениях» (Pause on caught exceptions).

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

Нажмите на кнопку «Продолжить» (Continue), чтобы показать раскрывающийся список и выберите кнопку «Продолжить без прерывания» (Continue without interruption).
Нажмите F12 , чтобы быстро закрыть отладчик Chrome.

Во вкладке «Исходники» стоит упомянуть еще несколько областей.

Вкладка «Выражения для отслеживания» (Watch expressions): позволяет отслеживать значения переменных и выражений в разные моменты времени.
Раздел «Стек вызовов» (Call Stack) показывает путь выполнения, который привёл код к этой точке останова в обратном хронологическом порядке.
Панель «Область видимости» (Scope): показывает, какие локальные и глобальные переменные определены в данный момент.

Контексты выполнения в отладчике Chrome

Вы когда-нибудь сталкивались с ошибкой ReferenceError (говорящей, что функция не определена) при попытке выполнить уже объявленную функцию в консоли браузера? Вы не одиноки, это частый случай.

К примеру, такую ошибку можно поймать, когда страница со скриптом загружаеся в <iframe> , поэтому находится в другом контексте выполнения. Вкратце, контекст выполнения похож на область видимости, и у каждой страницы, <iframe> или расширения браузера есть свой контекст выполнения. Между разными контекстами можно переключаться с помощью раскрывающегося списка в консоли:

Немного соображений насчёт контекста выполнения:

Когда вы просматриваете какой-либо элемент, в качестве контекста выполнения автоматически выбирается страница, содержащая этот элемент
Чтобы получить логи из всех контекстов в консоли, уберите галочку «Только выбранный контекст» (Selected context only) в настройках консоли.
С правой стороны есть ссылка на файл, выполнивший функцию, которая отвечает за запись в логе.

Эти контексты хорошо видны в «песочнице» по Kendo UI, в которой мы сейчас потестируем вышеприведенные советы.

Пример: компонент jQuery Grid из Kendo UI

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

Задача: используйте JavaScript для изменения фона плавающего элемента, созданного при перетаскивании заголовка в этом примере из «песочницы» на основе демо компонента jQuery Grid из Kendo UI.

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

Нужно поменять контекст на сам пример: Контексты выполнения в отладчике Chrome
В правильном контексте прервите выполнение скрипта на странице после появления элемента: Просмотр всплывающих подсказок и элементов, которые скрываются автоматически
Просмотр плавающего элемента: Просмотр сгенерированного HTML-кода элемента
Доступ к элементу в консоли: Лёгкое обращение к выбранным элементам и вычисленным выражениям
Используйте функциональность автодополнения, чтобы найти правильные свойства стилей элемента: Умное автодополнение

К этому моменту вы должны быть уже на «ты» с отладчиком Chrome — никакая магия CLI, автоматически скрывающиеся элементы или сложные сценарии отладки не могут помешать вам. Мы здорово овладели всем этим и одолели тёмную сторону. Кроме шуток, надеюсь, что эта статья была полезной и ответила хотя бы на один сложный вопрос — дайте знать. А что насчёт ваших советов и приёмов? Пожалуйста, поделитесь ими (потому что вам не всё равно) в комментариях ниже.

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