Chrome breakpoint on error - Исправление ошибок и поиск оптимальных решений проблем

I am looking for an equivalent in Chrome to the «break on all errors» functionality of Firebug. In the Scripts tab, Chrome has a «pause on all exceptions», but this is not quite the same as breaking on all errors.

For instance, when loading a page with the following code, I would like Chrome to break on the line foo.bar = 42. Instead, even when enabling the «Pause on all exceptions», I don’t get the expected result.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <script type="text/javascript">

            function doError() {
                foo.bar = 42;
            }

            window.onload = function() {
                try {
                    doError();
                } catch (e) {
                    console.log("Error", e);
                }
            }
        </script>
    </head>
    <body>
    </body>
</html>

You can try the code pasted above on this page or using this jsFiddle.

Venkat

2,5682 gold badges26 silver badges59 bronze badges

asked Feb 9, 2010 at 23:33

I got trouble to get it so I post pictures showing different options:

Chrome 101.0.4951.64 [27 May 2022]

Very similar UI since at least Chrome 38.0.2125.111 [11 December 2014]

In tab Sources :

When button is activated, you can Pause On Caught Exceptions with the checkbox below:

Previous versions

Chrome 32.0.1700.102 [03 feb 2014]

Chrome 27.0.1453.93 Stable

answered Jun 26, 2013 at 15:39

MaxenceMaxence

12.9k4 gold badges28 silver badges28 bronze badges

Edit: The original link I answered with is now invalid.The newer URL would be https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints#exceptions as of 2016-11-11.

I realize this question has an answer, but it’s no longer accurate. Use the link above ^

(link replaced by edited above) — you can now set it to break on all exceptions or just unhandled ones. (Note that you need to be in the Sources tab to see the button.)

Chrome’s also added some other really useful breakpoint capabilities now, such as breaking on DOM changes or network events.

Normally I wouldn’t re-answer a question, but I had the same question myself, and I found this now-wrong answer, so I figured I’d put this information in here for people who came along later in searching.

answered Jan 3, 2011 at 19:13

This is now supported in Chrome by the «Pause on all exceptions» button.

To enable it:

Go to the «Sources» tab in Chrome Developer Tools
Click the «Pause» button at the bottom of the window to switch to «Pause on all exceptions mode».

Note that this button has multiple states. Keep clicking the button to switch between

«Pause on all exceptions» — the button is colored light blue
«Pause on uncaught exceptions», the button is colored purple.
«Dont pause on exceptions» — the button is colored gray

answered Apr 10, 2013 at 14:23

Brad ParksBrad Parks

64.2k63 gold badges254 silver badges322 bronze badges

Just about any error will throw an exceptions. The only errors I can think of that wouldn’t work with the «pause on exceptions» option are syntax errors, which happen before any of the code gets executed, so there’s no place to pause anyway and none of the code will run.

Apparently, Chrome won’t pause on the exception if it’s inside a try-catch block though. It only pauses on uncaught exceptions. I don’t know of any way to change it.

If you just need to know what line the exception happened on (then you could set a breakpoint if the exception is reproducible), the Error object given to the catch block has a stack property that shows where the exception happened.

answered Feb 12, 2010 at 23:17

Matthew CrumleyMatthew Crumley

101k24 gold badges107 silver badges129 bronze badges

Unfortunately, it the Developer Tools in Chrome seem to be unable to «stop on all errors», as Firebug does.

answered Feb 23, 2010 at 19:49

avernetavernet

30.3k44 gold badges125 silver badges162 bronze badges

Источник

Debug is a skill that every developer must master, and adding breakpoints to the code is the basic of debugging. This article will share 5 ways to add breakpoints in Chrome DevTool.

1# Add breakpoints directly

Go to Source Tag of Chrome Devtools, click the line number where the code is located to add a breakpoint.

111

This should be the most common way for everyone to add breakpoints.

2# Conditional breakpoints

But sometimes, we want a breakpoint to take effect only under certain conditions. At this time, we can take the following approach.

Right-click the line number column
Choose Add conditional breakpoint
Enter your condition in the dialog

For Example, we want to pause the code when i is greater than 10,

for(let i=0; i<20; i++){
     console.log(`i * i = ${i * i}`)
}

Enter fullscreen mode

Exit fullscreen mode

We can:

3# DOM change breakpoints

In some cases, we don’t want to pause the code at a certain location, but only when a DOM element changes. At this time, we can do this:

Click the Elements tab.
Go to the element that you want to set the breakpoint on.
Right-click the element.
Hover over Break on then select Subtree modifications, Attribute modifications or Node removal.

For example, we want to pause the code when the hello element will change:

<div id="hello">
    Hello 2022.
</div>
<script>
    document.getElementById("hello").onclick = (event) => {
      event.target.innerText = new Date().toString()
    }
</script>

Enter fullscreen mode

Exit fullscreen mode

We can:

Note:

Subtree modifications. Triggered when a child of the currently-selected node is removed or added, or the contents of a child are changed. Not triggered on child node attribute changes, or on any changes to the currently-selected node.
Attributes modifications: Triggered when an attribute is added or removed on the currently-selected node, or when an attribute value changes.
Node Removal: Triggered when the currently-selected node is removed.

4# XHR/Fetch breakpoints

If you want to pause the code when JavaScript is trying to make an HTTP request to a URL, we can do this:

Click the Sources tab.
Expand the XHR Breakpoints pane.
Click Add breakpoint.
Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR’s request URL.
Press Enter to confirm.

For example, we want to pause the code when the script tries to requesting api.github.com .

<body>
  <div id="hello">
    Hello 2022.
  </div>
  <script>
    fetch("https://api.github.com")
     .then(res => {
       console.log(res)
     })
  </script>
</body>

Enter fullscreen mode

Exit fullscreen mode

We can:

Im33

5# Event listener breakpoints

Of course, we can also pause the code when a certain event is triggered.

<body>
  <div id="hello">
    Hello 2022.
  </div>
  <script>
    document.getElementById("hello").onclick = (event) => {
      console.log('hello 2022')
    }
  </script>
</body>

Enter fullscreen mode

Exit fullscreen mode

If you want to pause the code after the hello element is clicked, then we can do this:

Источник

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

Перед тем, как двигаться дальше, поговорим об отладке скриптов.

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

На текущий момент самые многофункциональные инструменты — в браузере Chrome. Также очень хорош Firebug (для Firefox).

Общий вид панели Sources

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

Зайдите на страницу с примером браузером Chrome.

Откройте инструменты разработчика: key:F12 или в меню Инструменты > Инструменты Разработчика.

Выберите сверху Sources.

Вы видите три зоны:

Зона исходных файлов. В ней находятся все подключённые к странице файлы, включая JS/CSS. Выберите pow.js, если он не выбран.
Зона текста. В ней находится текст файлов.
Зона информации и контроля. Мы поговорим о ней позже.

Обычно зона исходных файлов при отладке не нужна. Скройте её кнопкой .

Общие кнопки управления

Три наиболее часто используемые кнопки управления:

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

Консоль
: Очень полезная кнопка, открывает тут же консоль для запуска команд. Можно смотреть код и тут же запускать функции. Её нажатие можно заменить на клавишу key:Esc.

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

Точки останова

Открыли файл pow.js во вкладке Sources? Кликните на 6-й строке файла pow.js, прямо на цифре 6.

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

Выглядеть это должно примерно так:

Слово Брейкпойнт (breakpoint) — часто используемый английский жаргонизм. Это то место в коде, где отладчик будет автоматически останавливать выполнение JavaScript, как только оно до него дойдёт.

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

Вы можете видеть, что информация о точке останова появилась справа, в подвкладке Breakpoints.

Вкладка Breakpoints очень удобна, когда код большой, она позволяет:

Быстро перейти на место кода, где стоит брейкпойнт кликом на текст.
Временно выключить брейкпойнт кликом на чекбокс.
Быстро удалить брейкпойнт правым кликом на текст и выбором Remove, и так далее.

- Остановку можно инициировать и напрямую из кода скрипта, командой `debugger`:

    ```js
    function pow(x, n) {
      ...
      debugger; // <-- отладчик остановится тут
      ...
    }
    ```
- *Правый клик* на номер строки `pow.js` позволит создать условную точку останова (conditional breakpoint), т.е. задать условие, при котором точка останова сработает.

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

Остановиться и осмотреться

Наша функция выполняется сразу при загрузке страницы, так что самый простой способ активировать отладчик JavaScript — перезагрузить её. Итак, нажимаем key:F5 (Windows, Linux) или key:Cmd+R (Mac).

Если вы сделали всё, как описано выше, то выполнение прервётся как раз на 6-й строке.

Обратите внимание на информационные вкладки справа (отмечены стрелками).

В них мы можем посмотреть текущее состояние:

Watch Expressions — показывает текущие значения любых выражений.

Можно раскрыть эту вкладку, нажать мышью + на ней и ввести любое выражение. Отладчик будет отображать его значение на текущий момент, автоматически перевычисляя его при проходе по коду.
Call Stack — стек вызовов, все вложенные вызовы, которые привели к текущему месту кода.

На текущий момент видно, отладчик находится в функции pow (pow.js, строка 6), вызванной из анонимного кода (index.html, строка 15).
Scope Variables — переменные.

На текущий момент строка 6 ещё не выполнилась, поэтому result равен undefined.

В Local показываются переменные функции: объявленные через var и параметры. Вы также можете там видеть ключевое слово this, если вы не знаете, что это такое — ничего страшного, мы это обсудим позже, в следующих главах учебника.

В Global — глобальные переменные и функции.

Управление выполнением

Пришло время, как говорят, «погонять» скрипт и «оттрейсить» (от англ. trace — отслеживать) его работу.

Обратим внимание на панель управления справа-сверху, в ней есть 6 кнопок:

— продолжить выполнение, горячая клавиша key:F8.
: Продолжает выполнения скрипта с текущего момента в обычном режиме. Если скрипт не встретит новых точек останова, то в отладчик управление больше не вернётся.

Нажмите на эту кнопку.

Скрипт продолжится, далее, в 6-й строке находится рекурсивный вызов функции `pow`, т.е. управление перейдёт в неё опять (с другими аргументами) и сработает точка останова, вновь включая отладчик.

При этом вы увидите, что выполнение стоит на той же строке, но в `Call Stack` появился новый вызов.

Походите по стеку вверх-вниз -- вы увидите, что действительно аргументы разные.

— сделать шаг, не заходя внутрь функции, горячая клавиша key:F10.
: Выполняет одну команду скрипта. Если в ней есть вызов функции — то отладчик обходит его стороной, т.е. не переходит на код внутри.

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

Обратим внимание, в данном случае эта кнопка при нажатии всё-таки перейдёт внутрь вложенного вызова `pow`, так как внутри `pow` находится брейкпойнт, а на включённых брейкпойнтах отладчик останавливается всегда.

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

Эта кнопка позволяет подробнейшим образом пройтись по очереди по командам скрипта.

— выполнять до выхода из текущей функции, горячая клавиша key:Shift+F11.
: Выполняет команды до завершения текущей функции.

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

— отключить/включить все точки останова.
: Эта кнопка никак не двигает нас по коду, она позволяет временно отключить все точки останова в файле.

— включить/отключить автоматическую остановку при ошибке.
: Эта кнопка — одна из самых важных.

Нажмите её несколько раз. В старых версиях Chrome у неё три режима  -- нужен фиолетовый, в новых -- два, тогда достаточно синего.

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

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

Правый клик на номер строки открывает контекстное меню, в котором можно запустить выполнение кода до неё (Continue to here). Это удобно, когда хочется сразу прыгнуть вперёд и breakpoint неохота ставить.

Консоль

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

В неё можно перейти, нажав кнопку «Console» вверху-справа, а можно и открыть в дополнение к отладчику, нажав на кнопку или клавишей key:ESC.

Самая любимая команда разработчиков: console.log(...).

Она пишет переданные ей аргументы в консоль, например:

// результат будет виден в консоли
for (var i = 0; i < 5; i++) {
  console.log("значение", i);
}

Полную информацию по специальным командам консоли вы можете получить на странице Chrome Console API и Chrome CommandLine API. Почти все команды также действуют в Firebug (отладчик для браузера Firefox).

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

Ошибки

Ошибки JavaScript выводятся в консоли.

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

Перейдите во вкладку Console инструментов разработчика (key:Ctrl+Shift+J / key:Cmd+Shift+J).

В консоли вы увидите что-то подобное:

Красная строка — это сообщение об ошибке.

Если кликнуть на ссылке pow.js в консоли, справа в строке с ошибкой, то мы перейдём непосредственно к месту в скрипте, где возникла ошибка.

Однако почему она возникла?

Более подробно прояснить произошедшее нам поможет отладчик. Он может «заморозить» выполнение скрипта на момент ошибки и дать нам возможность посмотреть значения переменных и стека на тот момент.

Для этого:

Перейдите на вкладку Sources.
Включите останов при ошибке, кликнув на кнопку
Перезагрузите страницу.

После перезагрузки страницы JavaScript-код запустится снова и отладчик остановит выполнение на строке с ошибкой:

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

Итого

Отладчик позволяет:

Останавливаться на отмеченном месте (breakpoint) или по команде debugger.
Выполнять код — по одной строке или до определённого места.
Смотреть переменные, выполнять команды в консоли и т.п.

В этой главе кратко описаны возможности отладчика Google Chrome, относящиеся именно к работе с кодом.

Пока что это всё, что нам надо, но, конечно, инструменты разработчика умеют много чего ещё. В частности, вкладка Elements — позволяет работать со страницей (понадобится позже), Timeline — смотреть, что именно делает браузер и сколько это у него занимает и т.п.

Осваивать можно двумя путями:

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

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

Источник