Как отключить дебаггер chrome

Обновлено: 06.07.2024

Как известно, веб-разработка делится на 2 части: frontend (фронтенд) и backend (бэкенд).

Вольно выражаясь, фронтенд это то, что работает в браузере, т.е. верстка (html + css) и браузерные скрипты (javascript).

Бэкенд — это скрипты, работающие на сервере.

В этой статье разберем инструменты разработчика (DevTools), которые встроены во все современные браузеры. Эти инструменты — незаменимая вещь для фронтенд-разработчика.

Разбирать будем на примере инструментов разработчики, которые встроены в браузер Google Chrome.

Открыть инструменты разработчика можно 3-мя способами:

Нажать клавишу F12
Нажать сочетание клавиш ctrl+shift+i

Через меню браузера: в правом верхнем углу три точки -> Дополнительные инструменты -> Инструменты разработчика См. картинку: Через меню браузера: в правом верхнем углу три точки -> Дополнительные инструменты -> Инструменты разработчика См. картинку:

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

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

Инструменты разработчика для верстальщика

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

Панель «Elements»

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

Панель «Elements» разделена на две области: дерево элементов страницы и свойства выбранного элемента. Панель «Elements» разделена на две области: дерево элементов страницы и свойства выбранного элемента.

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

Щелкнуть по нему правой кнопкой мыши и выбрать пункт меню «Посмотреть код» Щелкнуть по нему правой кнопкой мыши и выбрать пункт меню «Посмотреть код» При помощи визуального поиска: щелкаем мышью по стрелочке, которая находится в левом верхнем углу блока инструментов разработчика и мышью выбираем нужный элемент: При помощи визуального поиска: щелкаем мышью по стрелочке, которая находится в левом верхнем углу блока инструментов разработчика и мышью выбираем нужный элемент: При активных инструментах разработчика нажать ctrl+f и в появившейся строке поиска ввести: тег, класс, атрибут, текст элемента… При активных инструментах разработчика нажать ctrl+f и в появившейся строке поиска ввести: тег, класс, атрибут, текст элемента…

На панели «Elements» можно увидеть все css-правила, применяемые к элементу.

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

И в этом случае вкладка «Elements» просто незаменима. На скриншоте ниже показан элемент, на который действует множество правил, находящихся в разных местах и разных файлах, сразу видно, в каком файле и на какой строке находится то или иное правило:

Это очень удобно при изучении чужого кода.

Например, мы изучаем популярнейший css-фреймворк bootstrap. Среди его классов, относящихся к сетке (т.е. к позиционированию элементов) имеется класс .row. Любой, кто верстает с использованием этого фреймворка использует этот класс, практически, на каждой странице. Для чего же он нужен?

Открывает инструменты разработчика, находим элемент с этим классом, выделяем его и смотрим:

Глядя на эти правила, мы понимаем, что:

Этот класс является flex-контейнером для вложенных элементов display: flex;
Элементы, находящиеся внутри этого контейнера, будут выстраиваться в несколько строк flex-wrap: wrap;
Ну и видим, справа и слева минусовые отступы.

Но и это далеко не всё. Мы можем просмотреть правила, которые применяются при срабатывании псевдоклассов. Таких как :hover, :active и т.д. См. скриншот: Но и это далеко не всё. Мы можем просмотреть правила, которые применяются при срабатывании псевдоклассов. Таких как :hover, :active и т.д. См. скриншот:

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

Переключившись на вкладку «computed» можно посмотреть окончательную версию всех стилей, примененных к элементу:

Проверка разметки на адаптивность

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

Для этого мы можем использовать «Переключение в режим устройства» (Toggle device mode). Повторное нажатие на эту иконку, вернет обычный режим:

И после этого, можно выбирать какое-то устройство из списка или выбрать произвольную ширину:

Вы можете выбрать устройство и повернуть его:

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

Инструменты разработчика для javascript-программиста

Программирование состоит не только из написания кода. Редко случается, что мало-мальски сложный код начинает сразу работать так, как было задумано. В большинстве случаев “что-то идет не так”. Чтобы заставить программу (скрипт) выполняться так, как задумал разработчик, ее «отлаживают».

Отладка — этап разработки, на котором обнаруживают и устраняют ошибки. Часто она занимает больше времени, чем собственно написание кода.

Для фронтенд javascript-программиста средой выполнения скриптов, которые он пишет, является браузер. Дальше посмотрим какие возможности для отладки предоставляют нам «инструменты разработчика» в Google Chrome.

Панель «Console»

В принципе, при написании js-скриптов консоль, обычно, открыта всегда, поскольку любые необработанные ошибки, сразу видны. Видны файл и строка, где произошла ошибка:

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

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

Chrome был обновлен после этого ответа. Теперь вам нужно нажать кнопку ⋮ в правом верхнем углу, затем "Настройки (F1) -> отладчик -> отключить JavaScript", чтобы добраться до этой опции.

Инструменты Разработчика (F12) В
три вертикальные точки в правом верхнем углу
настройки
на вкладке "Настройки" слева

будет раздел "отладчик" с опцией (возможно, справа)

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

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

использовать когда вы хотите включить его обратно.

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

Это расширение делает его быстрее : Быстрый Javascript Switcher

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

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

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

самый быстрый способ, вероятно, это:

F12, чтобы открыть консоль разработчика
ctrl + shift + p, чтобы открыть командный инструмент (windows)
введите "отключить javascript" и нажмите enter

перейти к опции (окна: три вертикальные точки в правом верхнем углу) - > Настройки, или нажмите F1.
В общем разделе вы найдете "отключить JavaScript"

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

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

F12 , показывает инструменты разработчика
F1 показывает параметры
tab , переходит к флажку "отключить Javascript"
пробел переключает опцию
esc , скрывает параметры

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

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

вставьте его: chrome:/ / настройки / содержимое

перейдите в раздел "Javascript" и отключите его.

и там вы можете вставить URL вашего сайта в Manage exceptions.. и измените приоритет JavaScript с ALLOW на BLOCK.

быстрый способ:

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

2) заполните поле тремя буквами dis и появится это поле и выберите пункт Отключить Javascript

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

Нажав на "перезагрузите эту страницу" и выполняется остальной код и даже утверждает формы, как если нажав F8 и"продолжить" и.

Обновление:

При нажатии F5 (обновить) во время выполнения паузы:

Гугл Хром (v22) запускает скрипт. Если скрипт отправляет HTTP-запрос, HTTP-ответ на этот запрос отображается. Исходная страница не обновляется.
Т. е. 9 просто замирает. Т. е. есть вариант, что "остановить отладку и", при нажатии которой (если вы не нажмете F5 раньше), продолжает работать скрипт вне отладчика.
Поджигатель ведет себя так же, как хром.

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

Обновление (январь 2014):

Обновить во время отладки:

Хром v31: позволяет скрипты для запуска и остановки на дополнительные точки останова (но не отправлять AJAX-запросы), а затем обновляет.
Т. е. 11: обновить ничего не делает, но вы можете нажать F5, чтобы продолжить.
Версии 26 для Firefox: позволяет скрипты для выполнения, но не останавливается на дополнительные точки останова, отправляет AJAX-запросы, то освежает.

Перейдите на эту же страницу при отладке:

Хром v31: так же как обновить.
Т. е. 11: скрипты расторгнут, новый сеанс браузера запускается (так же как закрытие и снова открытие).
Версии 26 для Firefox: ничего не происходит.

Также juacala предложен эффективный способ. Например, если вы используете jQuery, работает удалить $ из консоли прекратится после выполнения любой метод jQuery встречаются. Я испытывал его во всех вышеперечисленных браузеров и могу подтвердить, что это работает.

Обновление (март 2015):

Обновление (январь 2019):

В Хроме, там есть "Диспетчер задач" по, доступное через <и>сдвиг</роз>+<и>ЭКУ</роз> или через

меню &ампер;остатки→; дополнительные инструменты &ампер;остатки→; менеджер задач

Вы можете выбрать вашу целевую страницу и нажав на "кнопку Завершить процесс и".

Также обратите внимание на сочетания клавиш: ф8 и сочетание клавиш Ctrl+\

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

В консоли выполните следующие действия:

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

Я надеюсь, что это помогает!

Хорошо, что можно остановить и снова повтор всего, установив или сняв его.

Если вы столкнулись с этим при использовании отладчик заявление,

или, может быть, вызов несуществующей функции:

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

Затем, когда вы нажмете клавиши Ctrl-R, то следующий бросок будет нанесен удар, и страница обновится.

(проверено в Chrome v38, около 2017 год.)

Вы можете сделать это, но вы должны подготовить первый код.

Инструкция для прекращения выполнения скрипта в инструменты Google для разработчиков Chrome:

(1) Подготовьте свой код во-первых, создавая глобальный переменной:

(2) любое место, где вы можете бросить, проверить значение этой переменной:

(3) приостановить выполнение скрипта на или перед выше тестовой линии(с)

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

(6) продолжить выполнение скрипта. Сценарий вернет false при выполнении теста на стадии (2) выше

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

(а) вставить точку останова в коде: просто введите отладчик; в строке сам по себе. Если инструменты разработчика открыта, то скрипт будет прыгать в отладчике в этой точке. Если не открыть инструменты разработчика, код будет игнорировать заявление.

(б) избегать прыжков в библиотеке jQuery при отладке кода? Блэкбокс это. См черный ящик инструкция для Chrome - или - в Firefox

Как пройти код JavaScript в отладчике Google Chrome, как прекратить выполнение скрипта, если я не хочу продолжать? Единственный способ, который я нашел, это закрыть окно браузера.

Нажатие «Обновить эту страницу» запускает остальную часть кода и даже отправляет формы, как если бы вы нажимали F8 «Продолжить».

ОБНОВЛЕНИЕ :

При нажатии F5 (Обновить) во время приостановки скрипта:

Закрытие, а затем повторное открытие окна браузера - это не всегда самый простой способ, потому что это уничтожит состояние сеанса браузера, и это может быть важно. Все ваши точки останова также потеряны.

ОБНОВЛЕНИЕ (январь 2014) :

Обновить во время отладки:

Chrome v31: позволяет запускать сценарии и останавливается на дальнейших точках останова (но не отправляет ajax-запросы), затем обновляется.
IE 11: обновление ничего не делает, но вы можете нажать F5, чтобы продолжить.
Firefox v26: позволяет запускать сценарии, но не останавливается на дальнейших точках останова, отправляет запросы ajax, а затем обновляет.

Перейдите на ту же страницу во время отладки:

Chrome v31: такой же, как Refresh.
IE 11: сценарии прекращаются, начинается новый сеанс браузера (аналогично закрытию и открытию снова).
Firefox v26: ничего не происходит.

Также Juacala предложил эффективный обходной путь. Например, если вы используете jQuery, запустите delete $ из консоли остановит выполнение, как только встретится любой метод jQuery. Я протестировал его во всех вышеперечисленных браузерах и могу подтвердить, что он работает.

ОБНОВЛЕНИЕ (март 2015) :

Обходной путь Juacala все еще полезен при отладке в IE или Firefox.

ОБНОВЛЕНИЕ (январь 2019) :

Наконец-то в Chrome Dev Tools добавлен правильный способ остановить выполнение скрипта, что приятно (хотя и немного скрыто). Обратитесь к ответу Джеймса Гентеса за подробностями.

введите debugger; в консоль инструментов dev, и он сразу же положит вещи в отладчик и остановит скрипт. Ответ Джеймса Гентеса кажется лучшим решением в 2019 году Почему все говорят об остановке сценария? Речь идет о прекращении / разрыве всего следующего «следующего / запланированного» кода.

В Chrome есть «Диспетчер задач», доступный через Shift + ESC или через

Меню → Дополнительные инструменты → Диспетчер задач

Вы можете выбрать задачу на странице и завершить ее, нажав кнопку «Завершить процесс».

chrome 48 это будет только ЗАКРЫТЬ инструмент Dev, а не завершать его, открывая его снова, вы можете увидеть, что программа все еще работает ( tried setInterval() ) Я не вижу «Диспетчер задач» в разделе «Дополнительные инструменты», а shift + esc ничего не делает . (Chrome 50, OSX) Shift + ESC работает в Chrome / Windows, хотя . Ух ты, я так давно этого хотел, и он был там годами! Это самый полезный ответ StackOverflow, который я видел весь год! В Macintosh (Chrome v.63) эта опция отображается в меню «Окно» в третьей группе. Там нет очевидного сочетания клавиш.

Также обратите внимание на сочетания клавиш: F8 и Ctrl + \

Ярлык особенно полезен, когда у вас есть бесконечно запущенный скрипт, который вы хотите остановить, чтобы проверить консоль. Спасибо. @DanDascalescu У меня Chrome 80.0.3987.149, и он выглядит так же Может быть, мы смотрим на кнопку в разных состояниях исполнения? Мое в том, что я выбрал body элемент здесь в SO, установил "break on -> поддеревья модификации", а затем щелкнул где угодно. Кнопка выглядит как на скриншоте, который я разместил.

Один из способов сделать это - приостановить выполнение сценария, посмотреть, какой код следует за тем, где вы остановились в данный момент, например:

В консоли сделайте следующее:

Затем запустите сценарий: он вызовет фатальную ошибку при попытке доступа somethingElse , и сценарий умрет. Вуаля, вы прекратили сценарий.

РЕДАКТИРОВАТЬ: Первоначально я удалил переменную. Это не достаточно хорошо. Вы должны удалить функцию или объект, для которого JavaScript пытается получить доступ к свойству.

you have to delete a function or an object такой мерзкий взлом! (в пользовательском интерфейсе это было бы хорошо, как кнопка « убить всех» ) Это довольно неприятно, но я не могу придумать другого пути. Год спустя я возвращаюсь к тому же вопросу . И я не могу понять это! Есть ли способ сделать его более общим? Вы не можете понять, как прекратить выполнение скрипта? Я всегда был в состоянии сделать это. У вас есть пример, который не позволяет вам убить сценарий таким образом? @ Хашим, ты должен быть в состоянии поставить точку останова внутри функции. Поэтому убедитесь, что внутренняя часть функции находится на отдельной строке от определения функции. В вашем случае вам потребуется в консоли, как только она будет приостановлена, набрать «document.getElementById ('see_older'). ParentNode.removeChild (document.getElementById ('see_older'));". Это потому, что у вас нет ничего в javascript для взлома. К сожалению, это тоже меняет HTML. Если вы можете изменить код на "var el = document.getElementById ('see_older'); \ n el.getEl . ", то вы можете просто сделать "delete el;" и это остановит это.

Если вы столкнулись с этим при использовании debugger заявления,

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

или, может быть, вызвать несуществующую функцию:

(Конечно, это не помогает, если вы пытаетесь пройтись по функциям, хотя, возможно, вы могли бы динамически добавить в throw 1 или z() или что-то подобное на панели «Источники», Ctrl-S, чтобы сохранить, а затем Ctrl-R, чтобы обновить . это может, однако, пропустить одну точку останова, но может работать, если вы находитесь в цикле.)

Если вы выполняете цикл и ожидаете debugger повторного запуска оператора, вы можете просто ввести throw 1 вместо него.

Затем, когда вы нажмете Ctrl-R, будет выполнен следующий бросок, и страница обновится.

(протестировано с Chrome v38, около апреля 2017 г.)

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

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

Надеюсь, это поможет!

PS: Я пытался найти вариант для прекращения выполнения в некоторых руководствах / руководствах, таких как следующие, но не смог найти его. Как я уже говорил, вероятно, нет такой возможности.

Я помог? Кажется, что нет опции завершения, но для того, чтобы предотвратить выполнение следующего кода, вы можете либо прокомментировать его ранее, либо удалить следующий код / вызвать "live" в отладчике Chrome (эта последняя опция сделает кнопку продолжения вести себя как прекратить). Я знаю, что они не являются идеальными решениями, но я думаю, что они являются наиболее приемлемыми. Любые комментарии? Во многих случаях код, который необходимо предотвратить, выполняется в стеке вызовов (функции, которые получат управление после возврата текущей функции). Конечно, я могу пойти и отредактировать функции в стеке вызовов, а затем найти и отредактировать все функции, которые могут быть вызваны асинхронно. Я уверен, что браузер должен обновлять страницу с помощью сценария, все еще находящегося в состоянии паузы, если он был приостановлен во время нажатия кнопки «Обновить страницу». Я также думаю, что это должно быть ожидаемое поведение для любого браузера (к сожалению, это не так). На самом деле я нашел обходной путь для прекращения выполнения скрипта !: В chrome я открываю отладчик для отладки одного из моих приложений и устанавливаю точку останова. Я запускаю страницу. Выполнение приостанавливается в точке останова. Затем я изучаю проблему и понимаю, что является причиной ошибки. Чтобы прекратить выполнение, я нажимаю кнопку X рядом с URL (чтобы остановить загрузку страницы), а затем, при продолжении сценария (F8), он прекращается. Я думаю, это довольно простой способ добиться этого. Что вы думаете об этом? Кнопка X в Chrome заменяется кнопкой «Обновить» после загрузки страницы, поэтому после этого невозможно нажать X (я также пробовал ее в IE, в котором X все время доступен, но он всегда зависает). Я также проверил ваше предложение во время загрузки страницы и обнаружил, что сценарий не завершается после нажатия X и затем F8. Вероятно, что сценарии, которые еще не были загружены в браузер во время нажатия X, впоследствии не загружаются, но это должно быть очевидно. О, вы правы, это был быстрый тест, который не был репрезентативным . Тогда кажется, что решения нет.

Ссылаясь на ответ, данный @scottndecker на следующий вопрос , в chrome теперь есть опция «отключить JavaScript» в разделе «Инструменты разработчика»:

Вертикально . в правом верхнем углу
настройки
А в разделе «Настройки» перейдите в раздел «Отладчик» в самом низу и выберите «Отключить JavaScript».

Хорошо, что вы можете остановиться и запустить снова, просто установив / сняв отметку.

Если вы не согласны с мнением из-за того, что вы путаетесь между меню инструментов разработчика и меню Chrome, это очень печально :( Не работал для меня Я установил флажок Отключить JavaScript, но скрипт просто продолжает работать.

Вы можете сделать это, но сначала вы должны подготовить свой код.

Инструкции по прекращению выполнения скрипта в Google Chrome Dev Tools:

(1) Сначала подготовьте свой код, создав глобальную переменную:

(2) В любом месте, где вы можете выйти, проверьте значение этой переменной:

(3) Приостановить выполнение скрипта во время или перед вышеупомянутыми тестовыми строками.

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

(6) Продолжить выполнение скрипта. Сценарий будет, return false когда он выполняет тест из шага (2) выше

(A) Этот прием работает с глобальными переменными и объектами, но он не будет работать с локальными переменными. Обратите внимание, что this:
newVar = 'never used before';
создает новое свойство объекта window (работает с указанным выше трюком), а это:
var newVar = 'never used before';
создает локальную переменную (НЕ работает с указанным выше трюком!)

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

(a) Вставьте точку останова в код: просто введите debugger; строку отдельно. Если DevTools открыт, сценарий перейдет в отладчик в этот момент. Если DevTools не открыт, код будет игнорировать оператор.

(б) Хотите избежать использования библиотеки jQuery при отладке кода? Черный ящик это. См. Инструкции черного ящика для Chrome - или - для Firefox

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