Содержание

Отладка JavaScript в Qt Creator—ArcGIS AppStudio

Вывод в консоль

Предпочтительным методом отладки ваших приложений AppStudio является использование сообщений console.log вашего кода QML, поскольку эти сообщения отображаются в консоли Qt Creator и подходят для всех платформ. Для работы не нужна инсталляция набора Qt. Необходим только AppStudio.

Для запуска приложения в Qt Creator щелкните Запуск в меню Инструменты > Внешние > AppStudio. Вы также можете нажать Alt+Shift+R на клавиатуре или нажать кнопку Запустить в левом нижнем углу окна Qt Creator.

Режим отладки Qt Creator

Версия Qt Creator в комплекте с AppStudio версии 4.0 обеспечивает немедленный доступ к инструментам отладки Qt Creator. Чтобы открыть ваше приложение в режиме отладки, либо нажмите F5 в Qt Creator, либо нажмите кнопку Начать отладку запуска проекта в левом нижнем углу окна Qt Creator.

См. раздел Взаимодействие с отладчиком в документации по Qt для получения подробной информации об использовании инструментов отладки в Qt Creator.

Хотя документация Qt содержит информацию об отладке C ++, для использования этого языка требуется лицензия Qt SDK, которая не предоставляется в AppStudio.

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

Точки останова можно использовать в Qt Creator, чтобы прерывать ваше приложение, когда оно достигает определенных строк кода, передавая вам управление. Затем вы можете проверить состояние приложения и продолжить выполнение построчно или непрерывно.

Можно вставить точку останова в приложении следующими способами:

  • Нажмите F9 (F8 в macOS) с указателем на строке, где вы хотите вставить точку останова.
  • Щелкните слева от номера строки.
  • Дважды щелкните в пустое место вида Точки останова и и укажите номер строки в появившемся окне Добавить точки останова.
  • Выберите в виде Точки останова Добавить точку останова и введите номер строки в появившемся окне Добавить точки останова.

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

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

Чтобы переместить точку останова, выберите ее и перетащите в нужное место. Чтобы удалить точку останова, нажмите еще раз F9 (F8 в macOS), щелкните значок точки останова или щелкните правой кнопкой точку останова и выберите Удалить выбранные точки останова или Удалить все точки останова.

Более подробно о точках останова см. в разделе Задание точек останова в документации Qt.

Профиль QML

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

Чтобы включить QML Profiler,сначала убедитесь, что в вашем приложении не запущен Qt Creator. Затем, с открытым видом Проект, выберите Анализировать > QML Profiler. Откроется ваше приложение с открытым разделом QML Profiler в Qt Creator. Выполните нужные вам действия в приложении и щелкните Остановить в разделе QML Profiler. В разделе QML Profiler есть диаграмма сцены поведения вашего приложения. В вашем виде кода также будут отображаться процентные значения за время, которое ваше приложение потратило на выполнение каждой части своего кода.

Для получения подробной информации о QML Profiler см.Профилирование приложений QML документации по Qt.


Отзыв по этому разделу?

Отладка и устранение распространённых ошибок в JavaScript

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

Свойство не определено

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}

console.log(girl.named.lucky)

Этот код выдаёт ошибку «Uncaught TypeError: Cannot read property ‘lucky’ of undefined». Дело в том, что объект girl не имеет свойства named, хотя у него есть свойство name. Поскольку свойство girl.named не определено, мы не можем получить к нему доступ, то есть оно просто не существует. Если мы заменим girl.named.lucky на girl.name, то код вернёт нам «Lucky».

Свойство — некоторое значение, привязанное к объекту JavaScript. Почитать больше об объектах можно здесь (статья на английском языке).

Отладка ошибок TypeError

Ошибки типа TypeError появляются, когда вы пытаетесь выполнить действия с данными, которые не соответствуют нужному типу, например применяете

.bold() к числу, запрашиваете свойство undefined или пытаетесь вызвать как функцию что-то, не являющееся функцией. Например, вы увидите такую ошибку, если вызовете girl(), поскольку это объект, а не функция. В последнем случае вы получите «Uncaught TypeError: yourVariable.bold is not a function» и «girl is not a function».

Для отладки этих ошибок надо разобраться с переменными. Что такое girl? И что такое girl.named? Вы можете понять это изучая код, выводя переменные с помощью console.log, используя команду debugger или просто напечатав имя переменной в консоли. Удостоверьтесь, что вы можете манипулировать содержащимся в переменной типом данных. Если тип данных не подходит, модифицируйте его нужным образом, добавьте условие или блок

try..catch, чтобы контролировать выполнение операции, или используйте эту операцию на другом объекте.

Переполнение стека

Если верить авторам песни «Baby One More Time», слово «hit» в строчке «Hit me baby, one more time» означает «позвони», то есть Бритни хочет, чтобы её бывший позвонил ей ещё раз. Это, возможно, приведёт к ещё большему количеству звонков в будущем. По сути это рекурсия, которая может вызвать ошибку в случае переполнения стека вызовов.

Конкретные сообщения об ошибке зависят от браузера, но выглядят они примерно так:

Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)

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

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

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

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

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

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

while без условия завершения.

let worldEnded = false

while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

Исправить это можно примерно так же, как и предыдущий пример.

let worldEnded = false

while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Отладка бесконечных циклов и рекурсий

Для начала, если возникла проблема с бесконечным циклом, закройте вкладку, если вы пользуетесь Chrome или Edge, или окно браузера, если у вас Firefox. Затем просмотрите код: есть ли там что-то, что создаёт бесконечный цикл или рекурсию. Если ничего не обнаружили — добавьте в цикл или функцию команду

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

В приведённом выше примере стоило бы добавить debugger самой первой строкой функции или цикла. Затем нужно открыть отладочную вкладку в Chrome и изучить переменные в Scope. С помощью кнопки «next» можно проследить, как они меняются с каждой итерацией. Обычно это помогает найти решение проблемы.

Здесь можно найти руководство на английском языке по отладке с помощью Chrome’s DevTools, а здесь — для Firefox.

Ошибка синтаксиса

SyntaxError — вероятно самая распространённая разновидность ошибок в JavaScript. Эти ошибки возникают, если вы не соблюдаете правила синтаксиса языка. Копируя посыл песни Бритни «Everytime», JavaScript говорит отсутствующим скобкам и кавычкам: «Вы нужны мне, крошки».

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

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

Перевод статьи Oops, I did it again: A guide to debugging common JavaScript errors

Отладка Node.js с помощью Google Chrome

Отладка (debugging) — это процесс выявления и устранения ошибок в программных приложениях, который представляет собой нечто большее, чем просто просто вывод значений переменных. Задача этой статьи состоит в том, чтобы показать способ эффективной отладки приложений на Node.js при помощи последней версии Google Chrome DevTools.

Почему console.log не самый лучший вариант?

Использование console.log для отладки кода обычно погружает разработчика в бесконечный цикл «остановить приложение — добавить console.log — перезапустить приложение». Такой способ отладки не только замедляет разработку приложения, но также загрязняет код за счет нагромождения лишних частей. Наконец, попытка вывести значения переменных наряду с логированием других потенциальных операций может затруднить отладку в тех случаях, когда вы захотите найти проверяемые значения.

Инструменты отладки

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

Настройка Google Chrome для отладки Node.js

В браузере Chrome 57+ функция отладки Node.js включена по умолчанию, поэтому нет необходимости вручную активировать ее в панели Experimental Feature, как это требовалось в старых версиях.

Обновите Google Chrome до последней версии (если вы этого еще не сделали) и убедитесь, что используете Node.js 6.4+.

Чтобы начать отладку, запустите приложение Node.js с помощью флага — inspect.

$ node --inspect <your_file>.js

 

Запуск приложения на Node.js в режиме отладки — Debugging Mode.

 

Затем можете проигнорировать URL-адрес, начинающийся с «chrome-devtools: //», который отобразится в терминале, а вместо него перейдите по адресу «about: inspect» в Google Chrome.

 

Функция “Inspect” в инструментах разработчика — Chrome DevTools.

 

Наконец, нажмите «Open dedicated DevTools for Node» («Открыть специальный набор инструментов DevTools для отладки Node»), чтобы начать отладку кода своего приложения.

 

Инструмент разработки на Node

 

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

Chrome DevTools в действии

Во второй части этой статьи я хочу продемонстрировать Chrome DevTools в действии на примере отладки следующего приложения на Express.

'use strict'

const express = require('express')
const app = express()

const PORT = process.env.PORT || 3000

function capitalize (str) {
  const firstLetter = str.charAt(0) // we can check what's inside here
  return `${firstLetter.toUpperCase()}${str.slice(1)}`
}

app.get('/:name?', (req, res) => {
  const name = req.params.name ? capitalize(req.params.name) : 'World'
  res.send(`Hello ${name}!`)
})

app.listen(PORT, () => console.log(`App listening on *:${PORT}`))

Это код простейшего приложения на Express, оригинал которого можно посмотреть на github.

Давайте запустим его с флагом — inspect и откроем специальный инструмент браузера Chrome отладки Node по инструкции, описанной выше.

На этом этапе у вас будет доступ ко всем функциям, с которыми вы, возможно, уже знакомы: контрольные точки (breakpoints), карта привязки к исходному коду (source map), проверка снимка кучи (heap snapshot), профилирование, горячая замена переменных JavaScript (hot-swapping) и так далее.

 

Использование Breakpoints для отладки приложения на Express.

 

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

 

Подмена JavaScript-значений на лету (1). Подмена JavaScript-значений на лету (2).

 

Чем еще удобен Chrome в качестве инструмента для отладки, так это тем, что он позволяет производить отладку не только клиентской, но и серверной части JavaScript-приложения, и всё это с помощью одного и того же интерфейса ?.

Перевод статьи Jacopo Daeli: “Debugging Node.js with Google Chrome”

Рекомендации по отладке | Flexberry PLATFORM Documentation

Отладка

Отладка JavaScript и Ember.js с использованием Chrome Web Tools

При разработке массивных SPA наиболее удобно отлаживать код JavaScript с помощью стандартной консоли браузера Google Chrome (Chrome Web Tools).

Приложения на Ember.js также удобно отлаживать с помощью аддона Ember Inspector

Наиболее частоиспользуемые вкладки инструмента:
  • Elements — HTML-код отображаемой страницы.
  • Console — JavaScript-консоль. Контекстом выполнения команд является текущий контекст всего веб-приложения. То есть, если код остановлен (например, точкой останова), то текущим контекстом будет являться место, где остановилось выполнение программы. Это очень удобно.
  • Sources — проводник файлов веб страницы. Непосредственно в этой вкладке можно отлаживать JavaScript-код.
  • Network — отображение работы с сетью. С помощью этой вкладки можно удобно отслеживать обмен данными между клиентским приложением и бекендом.
  • Ember — если вы используете аддон Ember Inspector, то в этой вкладке можно более детально, но в то же время просто посмотреть “под капот” фреймворка: просмотреть все Routes приложения, информацию о рендере, цепочки Promises и так далее.
Отладка кода

Для отладки JavaScript проще всего пользоваться точками останова (breakpoints). Точку останова можно поставить на строчку кода JavaScript, либо, при необходимости, можно остановить выполнение JS при определённом изменении DOM. Это делается следующим образом во вкладке Elements:

Открыть JS-файл через DevTools можно нажав Ctrl+P и введя название искомого файла, либо можно вручную найти его во вкладке Sources. После этого можно установить точку останова нажатием на номер строки. При нажатии на ПКМ точку останова можно настроить, например, задать условие остановки.

Используя правый сайдбар можно посмотреть стек вызовов (Call Stack) [3], настроить выражения для отслеживания (Watch) [2]. В разделе Scope показаны контексты, в разделе Breakpoints находится список точек останова, сработавшая выделена цветоп. В верхней части сайдбара находятся кнопки пошагового исполнения [1], кнопка игнорирования точек останова и кнопка, включающая остановку исполнения при возникновении исключения [6].

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

Просмотр запросов

Просмотреть запросы к бекенду можно на вкладке Network. Во вкладке отображается таймлайн исполнения запросов, и их список [1]. После выбора запроса в списке можно получить детальную информацию о запросе [2], а так же полученный ответ [3] и полученый JSON [4].

Отладка C# с использованием Visual Studio

Отладка C# кода проводится аналогично отладке JS-кода, о ней написано выше. Стандартные инструменты среды Visual Studio (на момент написания использована VS2017) позволяют комфортно отлаживать программу. Попасть в интерфейс отладки проще всего с помощью установки точки останова.

В меню можно установить настройки срабатывания точки останова. Это может быть как какое-то логическое условие, так и количество попаданий в строку. Кроме этого, можно настроить вывод какой-то информации в Output window, а не просто остановку.

Рассмотрим окно Visual Studio в режиме отладки.

  1. Вкладки Locals, Watch. С помощью этих вкладок можно смотреть значения переменных в текущем контексте (Locals) или заданные вручную (Watch). Кроме этого, посмотреть текущее значение переменной можно просто наводя на неё указатель мыши.
  2. Вкладка Call Stack показывает стек вызовов, во вкладке Exception Settings можно настроить поведение при различных исключениях.
  3. В разделе Diagnostic Tools находится информация об использовании приложением памяти и ресурсов процессора, данные отображены на таймлайне. Кроме этого, на таймлайн наносятся различные события (например, при работе с ASP.NET на таймлайн наносятся запросы к серверу) и исключения. Нажатие на событие на таймлайне позволяет перейти в режим Historical Debugging.

Отладка Mono-приложений

1.Выполнить команду

1.Выполнить команду docker pull flexberry/monodevelop:latest

2.Установить XServer для Windows, запустить XServer

3.Выполнить команду docker run -dti --network host -e "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/root/projects/scripts" -e "DISPLAY=XX.XX.XX.XX:0.0" -v d:/projects:/root/projects flexberry/monodevelop:latest /usr/bin/mate-terminal --disable-factory

2.Установить XServer под windows.

4.В открывшимся окне терминала выполнить команду: monodevelop&

5.Открыть нужный проект, в свойствах указать: 0.0.0.0

4.Выполнить команду

Кроме этого в свойствах необходимо отключить сборку. Сборку необходимо осуществлять в Visual Studio, но отлаживать в Mono.

6.Скачать и собрать MdbConverter.exe.

В Visual Studio указать: MdbConverter\pdb2mdb\bin\Debug\MdbConverter.exe . d:\projects /root/projects

5.В открывшимся окне терминал выполнить команду:

6.Открыть нужный проект и в свойствах указать:

7.В Visual Studio указать:

MdbConverter.exe. с:/catalog:/childrencatalog

Чтобы собрать MdbConverter необходимо:

  1. Выполнить git clone https://github.com/Flexberry/mono
  2. git checkout MdbConverter
  3. Открыть в Visual Studio проект mono\mcs\tools\pdb2mdb\MdbConverter.csproj
  4. Выполнить Build.

8.В итоге можно выполнять отладку:

Программное обеспечение

Окно отладки в MonoDevelop выглядит следующим образом: Работа с ним аналогична с работой с Visual Studio в режиме отладки.

Перейти

Отладка JavaScript в PhpStorm | Руководство по PhpStorm

Последнее обновление: 10.07.2017 г.

Публикация: 07.07.2017 г.

Информация

В этом руководстве описывается отладка JavaScript-кода в PhpStorm. Все действия, описанные здесь, были воспроизведены с корректными ожидаемыми результатами на PhpStorm 2016.1.2.

Ты когда-нибудь задумывался, что происходит в памяти браузера и DOM при работе с JavaScript? С помощью PhpStorm можно заниматься отладкой JavaScript-кода и выполнять его поэтапно, проверяя переменные (и даже изменяя их) во время выполнения скрипта. Давай посмотрим, как это делается.

Заметка

Помимо отладки JavaScript-кода, c помощью PhpStorm можно заниматься и отладкой PHP-кода.


1. Установка расширения для браузера Google Chrome

Для отладки JavaScript-кода в PhpStorm используется расширение JetBrains IDE Support для браузера Google Chrome. Это расширение обеспечивает связь между тем, что происходит в IDE, и тем, что происходит в браузере, и наоборот. Если расширение не установится автоматически при первом запуске сеанса отладки, то тебе придётся установить его вручную.

Заметка

Также указанное расширение имеет функцию Live Edit. Это позволяет тебе в режиме реального времени, без перезагрузки страницы, видеть изменения при редактировании кода на PHP, JS, HTML, CSS. Ты правишь что-то в IDE — результат моментально отображается в браузере.

Внимание

Если браузер закрыт при запуске сеанса отладки в IDE, то PhpStorm автоматически запустит его. Если расширение не установлено при запуске сеанса отладки, то PhpStorm предупредит об этом.

Установить расширение для браузера Google Chrome можно следующим образом:

  1. Открой Chrome, перейди к настройкам и выбери раздел Extensions или в адресной строке браузера набери:

    chrome://extensions

  2. Найди и установи расширение JetBrains IDE Support в интернет-магазине Chrome.
  3. Подтверди добавление нового расширения в браузер Chrome.

После установки расширения, можно заняться отладкой JavaScript-кода в PhpStorm.


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

В редакторе PhpStorm можно установить точки останова. Точки останова — это строки кода, в которых отладчик приостанавливает выполнение программы и позволяет увидеть, что происходит внутри JavaScript-кода. Ты можешь установить или удалить точки останова, щёлкнув в любой строке кода c левой стороны от редактора или поместив курсор на строку кода использовать горячие клавиши Ctrl + F8 (Cmd + F8 на Mac OS X). IDE показывает точку останова, как большую красную точку с левой стороны от редактора.

Заметка

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


3. Запуск сеанса отладки

После добавления точек останова, ты можешь начать сеанс отладки. Это можно сделать, с помощью панели инструментов или создав конфигурацию отладки JavaScript-кода, с помощью главного меню PhpStorm [Run → Edit Configurations…]. Также ты можешь использовать контекстное меню файла, который нуждается в отладке, выбрав пункт Debug <filename>.

Последний способ создаст конфигурацию отладки за тебя, а также запустит браузер.

4. Отладка

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

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


4.1. Пошаговое выполнение кода

С помощью иконок на панели инструментов или горячих клавиш ты можешь перемещаться по коду:

  • Step Into (F7) — выполнение следующего выражения, таким способом их можно проверять одно за другим.
  • Step Over (F8) — выполнение следующего выражения в целом, без перехода вглубь стека выполнения.
  • F9 — выполнение выражений до следующей точки останова.

4.2. Наблюдение

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


4.3. Параметры точек останова и условные точки останова

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

Для этого с помощью главного меню IDE [Run → View Breakpoints] или горячих клавиш Ctrl + Shift + F8 (Cmd + Shift + F8 на Mac OS X) можно открыть диалоговое окно Breakpoints и настроить точки останова. Можно указать условие, при котором точка останова является допустимой, где отладчик должен приостановить выполнение программы. Например, когда переменная итератора i равна 3, как показано ниже:

Заметка

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


4.4. Изменение переменных при выполнении кода

При отладке также полезна возможность, которая позволяет изменять переменные прямо во время выполнения кода. Например, ты можешь изменить переменную для тестирования конкретного условия. Переменные можно редактировать во время выполнения с помощью пункта контекстного меню Set value… (F2) на панели Variables окна инструмента Debug.

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

Заметка

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


5. Карты кода

*

Отладчик JavaScript также позволяет тебе работать с картами кода. Это очень удобно при использовании минифицированного JavaScript-кода или таких языков, как CoffeeScript или TypeScript, которые компилируются в JavaScript.

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

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


6. Плагин Spy-js

*

Также в PhpStorm для отладки JavaScript-кода можно использовать плагин Spy-js. Он позволяет заниматься отладкой без точек останова и профилированием без специальных инструментов. Spy-js использует исторические данные исполнения, чтобы предоставить отладочную информацию после запуска кода. Более подробную информацию о плагине Spy-js ты можешь найти в блоге PhpStorm.

Пункт является опциональным при изучении руководства: Отладка JavaScript в PhpStorm.

Контрольные вопросы

Источники и дополнительные материалы

Отладка JavaScript в Firefox с помощью Debugger. Подробная инструкция

А вы знали, что в новую версию Firefox встроен обалденный отладчик Debugger для языка JavaScript. Данный отладчик был встроен в «Лису» в новую версию браузера Quantum. На тот момент разработчики решили кардинально пересмотреть инструментарий для разработки в своем продукте, чтобы он соответствовал современным технологическим требованиям к веб-разработке.

Ведь, как мы знаем, любое современное, продвинутое приложение так или иначе содержит код JavaScript, поэтому отличный отладчик в Firefox — это как раз то, что надо.

Отладчик Debugger в Firefox

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

Любой компонент React — легковесный, легкотестируемый и прост в разработке. В Debugger применяется React Storybook, поэтому удалось достичь скоростного использования интерфейса пользователя и документирования используемых компонентов.

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

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

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

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

Отладка JavaScript в Firefox при помощи Debugger

По старинке часто для отладки кода применяется console.log. Да, это, безусловно, частично спасало ситуацию, но «консоль» не способна по-настоящему осуществить отладку. Все, что делает console, так это «рассказывает» вам о вашем приложении и не более того.

Поэтому в Firefox решили добавить настоящий отладчик JavaScript.

Чтобы им воспользоваться, нужно сделать следующее:

  • открыть приложение для отладки;
  • запустить debugger.html.

После запуска отладчика вы увидите, что он разделен на три части:

  1. блок со списком файлов слева;
  2. блок с самим кодом приложения в центре;
  3. панель с инструментами справа.

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

  • toolbar;
  • использование выражений для отслеживания;
  • точку останова;
  • стэк вызовов;
  • возможности применения.

Нужно помнить, что одним из главных отличий отладчика JavaScript в Firefox от стандартной «Консоли» является то, что отладчик способен глубоко «прогружаться» в исходный код. Поэтому не нужно забывать добавлять точки останова на какой-нибудь строке, для того чтобы Дебаггер смог встать на паузу, а вы смогли посмотреть и изучить код.

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

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

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

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

Отладчик в Firefox способен отлаживать не только код JavaScript, но он также он может отладить код приложения, разработанного на React/Redux. В целом Дебаггер позволяет просматривать и отлаживать спутанный и минифицированный код программы, вызывающий ошибку. То есть типичный код молодых программистов.

Отладка JavaScript в Firefox, в частности сам Debugger, нужно изучать, чтобы иметь возможность правильно им пользоваться. Для этого команда Firefox опубликовала подробный список инструкций, как правильно запустить их отладчик на своем ПК. Все, что остается, — это найти их страницу на GitHub и изучить именно тот момент отладки, который вас интересует.

 

Отладка Express

В Express используется внутренний модуль debug для регистрации информации о сопоставлениях маршрутов, используемых функциях промежуточной обработки, режиме приложения и выполнении цикла “запрос-ответ”.

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

Для просмотра всех внутренних протоколов, используемых в Express, при запуске приложения задайте для переменной среды DEBUG значение express:*.


$ DEBUG=express:* node index.js

В Windows используется соответствующая команда.


> set DEBUG=express:* & node index.js

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


$ DEBUG=express:* node ./bin/www
  express:router:route new / +0ms
  express:router:layer new / +1ms
  express:router:route get / +1ms
  express:router:layer new / +0ms
  express:router:route new / +1ms
  express:router:layer new / +0ms
  express:router:route get / +0ms
  express:router:layer new / +0ms
  express:application compile etag weak +1ms
  express:application compile query parser extended +0ms
  express:application compile trust proxy false +0ms
  express:application booting in development mode +1ms
  express:router use / query +0ms
  express:router:layer new / +0ms
  express:router use / expressInit +0ms
  express:router:layer new / +0ms
  express:router use / favicon +1ms
  express:router:layer new / +0ms
  express:router use / logger +0ms
  express:router:layer new / +0ms
  express:router use / jsonParser +0ms
  express:router:layer new / +1ms
  express:router use / urlencodedParser +0ms
  express:router:layer new / +0ms
  express:router use / cookieParser +0ms
  express:router:layer new / +0ms
  express:router use / stylus +90ms
  express:router:layer new / +0ms
  express:router use / serveStatic +0ms
  express:router:layer new / +0ms
  express:router use / router +0ms
  express:router:layer new / +1ms
  express:router use /users router +0ms
  express:router:layer new /users +0ms
  express:router use / <anonymous> +0ms
  express:router:layer new / +0ms
  express:router use / <anonymous> +0ms
  express:router:layer new / +0ms
  express:router use / <anonymous> +0ms
  express:router:layer new / +0ms

При последующем запросе, адресованном приложению, вы увидите протоколы, заданные в коде Express:


  express:router dispatching GET / +4h
  express:router query  : / +2ms
  express:router expressInit  : / +0ms
  express:router favicon  : / +0ms
  express:router logger  : / +1ms
  express:router jsonParser  : / +0ms
  express:router urlencodedParser  : / +1ms
  express:router cookieParser  : / +0ms
  express:router stylus  : / +0ms
  express:router serveStatic  : / +2ms
  express:router router  : / +2ms
  express:router dispatching GET / +1ms
  express:view lookup "index.pug" +338ms
  express:view stat "/projects/example/views/index.pug" +0ms
  express:view render "/projects/example/views/index.pug" +1ms

Для просмотра протоколов только из реализации маршрутизатора, задайте для переменной DEBUG значение express:router. Аналгичным образом, для просмотра протоколов только из реализации приложения, задайте для переменной DEBUG значение express:application и т.д.

Приложения, генерируемые с помощью команды

express

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

Например, если приложение сгенерировано с помощью команды $ express sample-app, операторы отладки (операторы debug) можно активировать с помощью следующей команды:


$ DEBUG=sample-app:* node ./bin/www

Можно указать несколько пространств имен для отладки, путем ввода списка имен через запятую:


$ DEBUG=http,mail,express:* node index.js

Дополнительная информация о модуле debug приведена на странице debug.

Отладка JavaScript — разработчики Chrome

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

Шаг 1. Воспроизведение ошибки #

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

  1. Щелкните Открыть демонстрацию . Демо откроется в новой вкладке.

    Open Demo

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

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

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

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

Шаг 2. Ознакомьтесь с пользовательским интерфейсом панели «Источники» #

DevTools предоставляет множество различных инструментов для различных задач, таких как изменение CSS, загрузка страницы профилирования. производительность и мониторинг сетевых запросов.Панель Sources — это то место, где вы отлаживаете JavaScript.

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

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

  2. Щелкните вкладку Источники .

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

Пользовательский интерфейс панели Sources состоит из 3 частей:

Рисунок 4 .3 части панели Sources UI

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

Шаг 3. Приостановите выполнение кода с помощью точки останова #

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

  function updateLabel () {
var addend1 = getNumber1 ();
console.log ('добавление1:', добавление1);
var addend2 = getNumber2 ();
console.log ('добавление2:', добавление2);
var sum = addend1 + addend2;
консоль.журнал ('сумма:', сумма);
label.textContent = addend1 + '+' + addend2 + '=' + сумма;
}

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

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

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

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

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

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

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

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

  4. Вернувшись к демонстрации, снова щелкните Добавить номер 1 и номер 2 . DevTools приостанавливает демонстрацию и выделяет строку кода на панели Sources . DevTools следует приостановить на этой строке кода:

      function onClick () { 

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

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

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

Шаг 4. Выполните код #

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

  1. На панели «Источники » DevTools щелкните Перейти к следующему вызову функции для пошагового выполнения функции onClick () , по одной строке за раз. DevTools выделяет следующую строку кода:

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

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

Шаг 5: Установите точку останова по строке кода #

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

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

      label.textContent = addend1 + '+' + addend2 + '=' + сумма;  
  2. Слева от кода вы можете увидеть номер строки этой конкретной строки кода, то есть 32 .Щелкните 32 . DevTools помещает синий значок поверх 32 . Это означает, что на этой строке есть точка останова на строке кода. DevTools теперь всегда приостанавливается перед выполнением этой строки кода.

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

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

Шаг 6. Проверка значений переменных #

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

Метод 1. Панель «Область действия» #

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

Рисунок 7 . Область Область

Метод 2: Наблюдать за выражениями #

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

  1. Щелкните вкладку Watch .

  2. Щелкните Добавить выражение .

  3. Тип Тип суммы .

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

    Рисунок 8 . Панель Watch Expression (внизу справа) после создания суммы типа Watch Expression.Если ваше окно DevTools большое, панель Watch Expression находится справа, над панелью Точки останова прослушивателя событий .

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

Метод 3: Консоль #

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

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

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

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

    Рисунок 9 . Панель консоли после оценки parseInt (addend1) + parseInt (addend2) .

Шаг 7. Примените исправление #

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

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

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

Следующие шаги #

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

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

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

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

Есть несколько элементов управления пошаговым выполнением кода, которые не были объяснены в этом руководстве. Дополнительные сведения см. В разделе «Переход через строку кода».

Как отлаживать JavaScript как профессионал

Как отлаживать JavaScript как профессионал | Иди и сделай вещи Иди и сделай вещи

Мой процесс отладки действительно прост.Это всего лишь два шага, которые повторяются последовательно.

  1. Определите последний рабочий фрагмент кода. Если в окне консоли обнаружена ошибка, он сообщит вам номер строки кода, в котором возникла ошибка. Начни там. Если нет, перейдите к самому первому запускаемому фрагменту кода в вашем скрипте.
  2. Используйте console.log () для регистрации всей своей работы в окне консоли. Если вы используете захват элемента в DOM с помощью querySelector, зарегистрируйте его и убедитесь, что вы действительно получаете элемент.Продолжайте работать с кодом, пока не найдете то, что ведет себя не так, как вы ожидали.

Я был очень рад, когда на этой неделе Стив Гриффит выпустил видео об отладке за пределами console.log () .

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


🚀 Последний шанс присоединиться! Новая сессия Vanilla JS Academy только началась, но еще не поздно присоединиться.Зарегистрируйтесь сегодня и сэкономьте 25%. Щелкните здесь, чтобы присоединиться.

Понравилось? Я отправляю короткие электронные письма каждый будний день с фрагментами кода, инструментами, методами и интересными вещами со всего Интернета. Присоединяйтесь к 12 100+ ежедневным подписчикам.


Сделано с ❤️ в Массачусетсе. Если не указано иное, весь код можно использовать бесплатно в соответствии с Лицензией MIT. Я также очень нерегулярно делюсь мыслями, не связанными с кодированием.

VS Code получает новый отладчик JavaScript — ADTmag

Новости

VS Code получает новый отладчик JavaScript

Ежемесячное обновление Microsoft для своего чрезвычайно популярного кроссплатформенного редактора кода Visual Studio с открытым исходным кодом содержит новый отладчик JavaScript.

Работая с Node.js и Chrome, отладчик, который работал в течение нескольких месяцев, теперь является опцией по умолчанию в обновлении за июнь 2020 года или VS Code 1.47.

Функции и возможности отладчика, перечисленные на его сайте GitHub, включают:

  • Отладка дочернего процесса и рабочих
  • Отладка процессов Node.js в терминале
  • Опора профилирования
  • Простая отладка скриптов npm
  • Автоматическая отладка браузера
  • Контрольные точки для КИП
  • Лучшее автозаполнение в консоли отладки
  • Перехват возвращаемого значения
  • Ожидание верхнего уровня
  • Минифицированные источники с красивым шрифтом
  • Поддержка Microsoft Edge и WebView2
  • Лучшее поведение карты источников и точки останова
  • Копировать значения в стеке вызовов

Кроме того, сообщение на этой неделе, объявляющее VS Code 1.47 списков:

  • Отладка одного файла: Это обеспечивает функциональность, присутствующую в других расширениях отладки, с новыми значками в области заголовка, указывающими, что отладку можно запустить нажатием кнопки.
  • [Щелкните изображение, чтобы увеличить.] Если один или оба этих значка отображаются в левой части области заголовка редактора, то запуск или отладка файла в редакторе выполняется одним щелчком мыши. (источник: Microsoft).
  • Менее загроможденный вид CALL STACK: Это достигается за счет сокрытия узлов сеанса отладки, которые существуют по техническим причинам, но не представляют большой ценности для пользователей.
  • Новый псевдоним команды Set Next Statement для Jump to Cursor: Чтобы сделать команду Jump to Cursor более доступной для пользователей из Visual Studio, команда разработчиков добавила псевдоним команды Set Next Statement.
  • Путь к точке останова при наведении: В представлении BREAKPOINTS при наведении курсора на исходную точку останова отображается ее абсолютный путь.

Помимо всего этого совершенства отладки JavaScript, выпуск VS Code за июнь 2020 года включает:

Все вышеперечисленное и многое другое более подробно представлено в анонсе.


Об авторе

Дэвид Рамел — редактор и писатель Converge360.

Отладка JavaScript с помощью настоящего отладчика, о котором вы уже не знали — Smashing Magazine

Об авторе

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

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

console.log может многое рассказать о вашем приложении, но не может по-настоящему отладить ваш код. Для этого вам понадобится полноценный отладчик JavaScript. Новый отладчик JavaScript в Firefox поможет вам писать быстрый код без ошибок.Вот как это работает.

В этом примере мы откроем очень простое приложение для выполнения с помощью отладчика. Вот приложение, основанное на базовых фреймворках JavaScript с открытым исходным кодом. Откройте его в последней версии Firefox Developer Edition, а затем запустите debugger.html , нажав Option + Cmd + S на Mac или Shift + Ctrl + S в Windows. Отладчик разделен на три панели: панель списка источников, панель источников и панель инструментов.

Большой предварительный просмотр

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

Большой предварительный просмотр

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

console.log

Заманчиво использовать console.log для отладки кода. Просто вставьте вызов в свой код, чтобы найти значение переменной, и все готово, верно? Конечно, это может сработать, но это может быть обременительным и трудоемким. В этом примере мы будем использовать debugger.html для пошагового выполнения кода приложения todo для поиска значения переменной.

Мы можем использовать debugger.html , чтобы глубже погрузиться в приложение задач, просто добавив точку останова в строку кода. Точки останова говорят отладчику приостановить выполнение строки, чтобы вы могли щелкнуть код, чтобы увидеть, что происходит. В этом примере мы добавим точку останова в строку 13 файла app.js .

Большой превью

Теперь добавьте задачу в список. Код остановится на функции addTodo, и мы сможем погрузиться в код, чтобы увидеть значение ввода и многое другое. Наведите указатель мыши на переменную, чтобы увидеть значение и другие параметры.Вы можете видеть якоря, апплеты, дочерние элементы и многое другое:

Большой предварительный просмотр

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

Теперь, когда сценарий приостановлен, мы можем перемещаться по нему с помощью панели инструментов. Кнопка воспроизведения / паузы делает именно то, что написано на банке. «Step Over» переходит через текущую строку кода, «Step In» переходит к вызову функции, а «Step Out» выполняет сценарий до тех пор, пока текущая функция не завершится.

Большой предварительный просмотр

Мы также можем использовать выражение для наблюдения, чтобы следить за значением переменной.Просто введите выражение в поле Watch Expression, и отладчик будет следить за ним, пока вы выполняете код. В приведенном выше примере вы можете добавить выражения «title» и «to-do», и отладчик выдаст значения, когда они будут доступны. Это особенно полезно, когда:

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

Вы также можете использовать debugger.html для отладки приложений React / Redux. Вот как это работает:

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

Наконец, отладчик .html позволяет вам видеть обфусцированный или минимизированный код, который может вызывать ошибки, что особенно полезно, когда вы имеете дело с распространенными фреймворками, такими как React / Redux. Отладчик знает о компонентах, в которых вы приостановили работу, и покажет упрощенный стек вызовов, структуру компонента и свойства. Вот разработчик Амит Зур, объясняющий, как он использует отладчик Firefox для погружения в код на JS Kongress:

Если вас интересует подробное руководство по новому отладчику .html , перейдите на площадку для разработчиков Mozilla. Мы создали серию руководств, чтобы помочь разработчикам научиться эффективно использовать этот инструмент для отладки своего кода.

DevTools с открытым исходным кодом

Проект debugger.html был запущен около двух лет назад вместе с полной переработкой всех Firefox DevTools. Мы хотели перестроить DevTools с использованием современных веб-технологий, чтобы сделать их доступными для разработчиков по всему миру. А когда технология открыта, она может расти дальше всего, что может вообразить наша небольшая группа в Mozilla.

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

debugger.html построен с использованием React, Redux и Babel. Компоненты React легкие, тестируемые и простые в разработке. Мы используем React Storybook для быстрого создания прототипов пользовательского интерфейса и документирования общих компонентов. Наши компоненты тестируются с помощью Jest и Enzyme, что упрощает итерацию поверх пользовательского интерфейса. Это упрощает работу с различными фреймворками JavaScript (например, React). Наш интерфейс Babel позволяет нам делать такие вещи, как показывать класс Component и его функции на левой боковой панели.Мы также можем делать интересные вещи, например, прикреплять точки останова к функциям, чтобы они не перемещались при изменении кода.

Действия Redux — это чистый API для пользовательского интерфейса, но с таким же успехом их можно использовать для создания автономного JS-отладчика CLI. В хранилище Redux есть селекторы для запроса текущего состояния отладки. Наш модульный тест redux запускает действия Redux и имитирует ответы браузера. Наши интеграционные тесты управляют браузером с помощью действий Redux отладчика. Сама функциональная архитектура предназначена для тестирования.

На каждом этапе пути мы полагались на сообщество разработчиков Mozilla. Проект был размещен на GitHub, и наша команда обратилась за помощью к разработчикам со всего мира. Когда мы начинали, автоматические тесты были критически важным компонентом развития сообщества. Тесты предотвращают регрессию и документируют поведение, которое легко пропустить. Вот почему одним из первых шагов, которые мы сделали, было добавление модульных тестов для действий Redux и типов потока для хранилища Redux. Фактически, сообщество гарантировало, что наше покрытие Flow и Jest поможет убедиться, что каждый файл типизирован и протестирован.

Как разработчики, мы считаем, что чем больше людей задействовано, тем сильнее инструменты. Наша основная команда всегда была небольшой (2 человека), но в среднем у нас 15 участников в неделю. Сообщество предлагает различные точки зрения, которые помогают нам предвидеть проблемы и создавать функции, о которых мы даже не мечтали. Теперь мы форматируем стеки вызовов для 24 различных библиотек, о многих из которых мы никогда не слышали. Мы также показываем карты WebPack и Angular в дереве исходных текстов.

Мы планируем переместить все Firefox DevTools на GitHub, чтобы их могла использовать и улучшать более широкая аудитория.Мы будем рады, если вы внесете свой вклад. Чтобы начать, перейдите на страницу проекта GitHub для debugger.html . Мы создали полный список инструкций о том, как запустить отладчик на вашем компьютере, где вы можете изменить его, чтобы делать все, что захотите. Используйте его для отладки кода JavaScript для чего угодно — браузеров, терминалов, серверов, телефонов, роботов. И если вы видите способы его улучшить, дайте нам знать через GitHub.

Последнюю версию Firefox (и DevTools) можно загрузить здесь.

(rb, ra, yk, il)

Советы и рекомендации по отладке для начинающих JavaScript

by Priyanka Garg

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

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

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

Как вы, наверное, уже знаете, лучший способ научиться программированию — это делать. Теперь, когда вы начнете практиковаться в кодировании, иногда (или в большинстве случаев) ваш код не работает; другими словами, в вашем коде будет ОШИБКА. И вы, возможно, уже пробовали и изучили некоторые подходы к отладке. Эта статья не о каком-либо одном подходе к отладке, а скорее о настройке для отладки вашего кода для практики программирования.

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

Вы написали код, и в нем есть некоторые ошибки, и в какой-то момент ошибки, выдаваемые набором тестов, бесполезны.

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

Проблема

В качестве примера я пишу средство проверки палиндрома в редакторе FreeCodeCamp.Мое решение терпит неудачу. В этом случае мы могли бы использовать результаты набора тестов для отладки.

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

Совет: Используйте консоль инструментов разработчика .

Я запускаю тот же код в консоли с неудачным тестовым примером и вижу, что он возвращает «undefined».Это означает, что код не вернул никакого значения. Я быстро вижу, что забыл вернуть «истину», если строка оказалась палиндромом.

Это была очень простая ошибка. В большинстве случаев у вас будут ошибки, требующие проверки ваших переменных. Один из подходов к проверке переменных — это console.log ( s>) в программе.

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

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

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

А теперь займемся трюком.

Уловка: сделайте персональную настройку отладки

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

Даже после этого я получаю сообщение об ошибке:

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

Давайте найдем обходной путь. В вашей системе создайте каталог и cd в этот каталог.

Теперь создайте два файла: index.js и index.html. Введите следующий HTML-код в index.html:

Теперь переместите свой код из консоли в index.js. Обратите внимание, я запустил отладчик в строке 2 кода.

Теперь запустите файл index.html в браузере. Откройте инструменты разработчика или консоль (возможно, вам придется обновить, чтобы увидеть отладчик). Здесь вы можете отладить свой код.

Теперь каждый раз, когда вы вносите изменения в index.js, вы просто нажимаете кнопку «Обновить» на этой вкладке, и код запускается повторно. Не нужно закрывать и открывать вкладки, не набирать целые программы заново.

Держите только что созданную папку под рукой. Всякий раз, когда вам нужно попробовать или отладить фрагмент кода, вставьте его в index.js и поэкспериментируйте !!

Заключительные мысли

Если вы уже это знали, поздравляю, вы потратили ценные 4 минуты;)

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

Как отлаживать приложения и тесты JavaScript

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

Коллекция логотипов тестовых фреймворков

Проблема, с которой мы сталкиваемся, заключается в том, что приложения создаются довольно сложно и из-за этого их трудно отлаживать. Кто не работал над этим монолитным монолитным основным приложением, которое было ядром компании, написанным на Node.js? Express, Sequelize, Middleware везде и спагетти-код.Добавьте MongoDB, делайте неприятные вещи здесь и там, и вы знаете среду своего корпоративного проекта.

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

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

 

1

console.log («Наконец-то я здесь» + переменная);

Итак, мы получаем визуальную обратную связь в командной строке. Командная строка — это более или менее пользовательский интерфейс для кода отладки.Но на самом деле командные строки никогда не предназначались для отладки. Кроме того, этот вид отладки работает для простых фрагментов кода без большого количества побочных эффектов, но когда вы попадаете в сложные структуры if-else или в код с множеством побочных эффектов и условий, которые вы не хотите постоянно отлаживать (представьте себе если происходит состояние x и y, покажите мне результат), тогда такая техника может быть довольно неприятной.

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

Важная цитата из официального документа ECMAScript:

[…] Если отладчик отсутствует или активен, этот оператор не имеет заметного эффекта.

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

Чтобы включить отладчик при запуске приложения Node.js, вам просто нужно запустить его с параметром --inspect . Это откроет конечную точку вашего приложения Node.js на 127.0.01: 9229 . Конечная точка в основном реализует спецификацию отладчика. Существуют различные отладчики, такие как node-inspect, инструменты разработчика Chrome и многие другие, которые вы также можете найти здесь: https://nodejs.org/de/docs/guides/debugging-getting-started/. Присоединение отладчика в большинстве случаев выполняется вручную, по крайней мере, один раз и может оказаться довольно сложным для некоторых приложений с плохой структурой.Это также причина того, почему вы почти не видите, что на самом деле никто не использует отладчик 🤷 Настройка слишком сложна для небольшой отладки, поэтому большинство людей предпочитают использовать простой console.log вместо подключения отладчика. В клиентских приложениях это может быть по-другому, потому что Chrome и Firefox имеют свои собственные инструменты разработчика, которые способны отлаживать и автоматически подключаются к коду JavaScript веб-сайта. Но в приложениях Node.js вы должны запускать приложение в другом «режиме». Но для этих проблем есть решение под названием ndb.

ndb — это улучшенный способ отладки для Node.js, поддерживаемый Chrome DevTools — Описание репозитория GitHub для ndb

Использовать ndb довольно просто. Единственное, что вам нужно сделать, это установить его, а затем запустить приложение Node.js с ndb yarn start. ndb рекомендуется устанавливать глобально. Вы можете сделать это:

В противном случае вы также можете добавить ndb как devDependency и создать команду сценария Node.js для запуска вашего приложения с префиксом ndb.

До сих пор мы сосредоточились только на запуске полномасштабного приложения Node.js с подключенным отладчиком или ndb, но ndb становится довольно мощным, потому что вы можете присоединить его практически к каждому процессу Node.js. Например, при тестировании приложения вы можете использовать ndb yarn test, который запускает ваши тестовые команды. Поскольку эти тесты выполняются в среде Node.js, у вас будут полные возможности отладчика. Пример проекта Я подготовил простое приложение Node.js, которое можно найти здесь: игелигель / ндб-витрина Проект для демонстрации проекта, показывающего, как отлаживать Node.js приложений легко

Этот проект просто предоставляет модуль в файле index.js и экспортирует функцию с именем add, которая принимает два аргумента и складывает их. Функциональность также покрывается тестом в каталоге tests . Что может показаться странным, так это то, что операторы отладчика все еще включены в файлы JavaScript. Никогда не делайте этого в производственном коде . Это было просто для демонстрации. Файл package.json в этом проекте создает четыре сценария, которые может запустить разработчик:

 

4

"start": "node cli.js ",

5

" start: debug ":" ndb node cli.js ",

7

" test: debug ":" ndb jest "

Если вы запустите start или start: debug он запустит пример «CLI», в противном случае вы можете использовать test или test: debug для запуска тестов. Единственное различие между командой и командой с суффиксом : debug будет запускать ndb с помощью обычной команды.При их запуске откроется окно Chrome в Chrome Dev Tools.Если у вас установлены точки останова с помощью оператора отладчика, приложение фактически остановится на этих операторах. Примеры можно увидеть на следующих снимках экрана:

Пример точки останова Chrome Dev Tools

Альтернативный пример точки останова Chrome Dev Tools

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

Наиболее полезными функциями здесь, вероятно, являются проверка переменных. Вы можете просто навести курсор на переменные и просмотреть значения, не помещая их в оператор console.log, и, что еще лучше, вы можете проверить, возможно, побочные переменные. Супер классно. Есть намного больше возможностей, которые, например, показаны в этом видео группами разработчиков Chrome:

И именно так можно легко отладить приложение Node.js. Пожалуйста, используйте ndb, покажите его своим коллегам и поделитесь этой статьей.

Разработчики ❤️ отладчики Спасибо, что прочитали это. Ты рок 🤘 Также ознакомьтесь с другими моими статьями в блоге, такими как «Параметры функций в JavaScript», «Узнайте, как рефакторинг однофайловых компонентов Vue.js на реальном примере» или «Автоматические форматеры для Python». Если у вас есть отзывы или вы хотите добавить что-то к этой статье, просто оставьте комментарий здесь. Вы также можете подписаться на меня в Твиттере или посетить мой личный сайт, чтобы быть в курсе моих статей в блоге и многого другого.

Как выполнять отладку JavaScript (методы, которые вы должны знать в 2019 году 🙂

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

Так что же такое отладка?

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

Вот где на картинке появляется « console.log () ». Мы все согласимся с тем, что у нас возникает соблазн его использовать. Не правда ли? Причина в том, что новички обычно мало знают об инструментах, предоставляемых браузером. Хорошее понимание инструментов отладки браузера может быть спасением для многих разработчиков.

Давайте начнем это обсуждение с самого console.log () и того, почему нам следует избегать его использования.

консоль.log ()

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

Это приводит к двум проблемам. Нам нужно написать его вручную и передавать каждый объект один за другим, чтобы проверить их значения. Хорошее соглашение о кодировании требует использования неизбыточного кода, поэтому не рекомендуется снова и снова записывать этот console.log () в коде.

Кроме этого, есть и другие варианты консоли.log (), о котором многие разработчики до сих пор не имеют четкого представления.

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

Мы используем консоль для регистрации строк и объектов. Это помогает нам увидеть, доходит ли управление до определенного блока кода. Допустим, у нас есть объект или массив объектов, и мы хотим узнать, может ли браузер искать данные. Удобно было бы написать console.бревно(). Но здесь для осмотра объектов нам нужно расширить каждый из них. На проверку каждого объекта уйдет много времени и усилий.

Рисунок 1: Значения объектов, зарегистрированных на консоли

Итак, вместо того, чтобы писать console.log () для проверки массива объектов, мы можем использовать вариант этого, console.table ().

Далее рассмотрим console.table ()

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

Рисунок 2: Показывает вывод, сгенерированный console.table ()

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

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

Точка останова — это не что иное, как кнопка паузы. Он останавливает выполнение и проверяет значения объектов и переменных. Мы можем установить точки останова, написав логику отладки в самом коде или перейдя на вкладку источников в элементе проверки браузера.

Рисунок 3: Точки останова в исходном коде

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

Рисунок 4: Опции , доступные для точек останова

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

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

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

Рисунок 5: Запись логики отладки в код

Мы используем ключевое слово «debugger» для отладки определенной части кода.Функциональность полностью такая же, как у точек останова. Ключевое слово debugger остановит выполнение кода и вызовет функцию отладчика.

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