Отладка javascript в google chrome: Отладка в браузере Chrome

Все вроде нормально. Но в чем может быть проблема? Давайте разместим точку останова в строке 53, где написано:

 placesTable.html(tableHtml); 

Затем создайте конфигурацию Chrome через панель отладки. Выберите выделенный вариант:

Затем обновите конфигурацию Chrome следующим образом, чтобы она соответствовала нашей среде:

 { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/public" }, 

Затем запустите сервер как обычно, используя npm start или node server . Затем выберите « Запустить Chrome» и запустите сеанс отладки. Новый экземпляр Chrome будет запущен в режиме отладки, и выполнение должно быть приостановлено, когда вы установите точку останова. Сейчас самое время расположить код Visual Studio и экземпляр Chrome рядом, чтобы вы могли эффективно работать.

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

Обратите внимание, что el заполнен, но placesTable пуст. Это означает, что jQuery не смог найти элемент #places-table . Давайте вернемся к public/index.html и выясним, где находится эта #places-table .

Ага! Таблица div, которую мы хотим, находится в строке 55, прямо внутри places-form-template . Это означает, что #places-table div #places-table может быть найдена только после загрузки шаблона places-form-template . Чтобы это исправить, просто вернитесь в app.js и переместите код в строку 52 сразу после комментария «Показать таблицу мест»:

 const placesTable = $('#places-table'); 

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

Теперь вы можете удалить точку останова. Давайте попробуем добавить новое место — например, Кейптаун, Южная Африка

Хм … это не правильно. Место добавлено, но страна не отображается. Очевидно, что проблема не в коде таблицы HTML, поскольку в первой строке заполняется ячейка страны, поэтому что-то должно происходить на стороне JavaScript. Откройте app.js и добавьте app.js останова в строку 58, где написано:

 addPlace(city, country); 

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

Как видите, переменная country не определена, а переменная city -. Если вы посмотрите на выражения селектора jQuery, которые были настроены на панели просмотра, вы заметите, что селектор #country ничего не возвращает. Это означает, что его не было в DOM. Перейдите на index.html чтобы проверить.

Увы! Если вы посмотрите на строку 59, в которой введены данные о стране, в ней отсутствует атрибут ID. Вы должны добавить один, как это:

 <input type="text" placeholder="Enter Country" name="country"> 

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

Теперь это работает! Отличная работа по исправлению еще одной ошибки без console.log . Давайте теперь перейдем к нашей последней ошибке.

Отладка клиентской маршрутизации

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

Это работает нормально. Там нет ошибок.

На самом деле есть, и они не имеют ничего общего с формой. Чтобы найти их, обновите страницу.

Как только вы нажмете перезагрузить, пользователь перейдет обратно в / , корень приложения. Это явно проблема маршрутизации, которую должен решать пакет Vanilla Router. Вернитесь в app.js и найдите эту строку:

 router.navigateTo(window.location.path); 

Предполагается, что этот фрагмент кода направляет пользователей на правильную страницу на основе предоставленного URL-адреса. Но почему это не работает? Давайте добавим точку останова здесь, затем вернемся к URL-адресу /convert и попробуйте обновить страницу еще раз.

Как только вы обновите, редактор останавливается на точке останова. Наведите курсор на экспресс windows.location.path . Появляется всплывающее окно, которое говорит, что значение не undefined . Давайте перейдем к консоли отладки и начнем набирать выражение ниже:

Задерживать! Консоль отладки просто дала нам правильное выражение. Предполагается прочитать window.location.pathname . Исправьте строку кода, удалите точку останова и перезапустите сеанс отладки.

Перейдите к URL-адресу /convert и обновите его. Страница должна перезагрузить правильный путь. Потрясающие!

Это последняя ошибка, которую мы собираемся устранить, но я рекомендую вам продолжать экспериментировать в сеансе отладки. Установите новые контрольные точки для проверки других переменных. Например, проверьте объект response в функции router('/convert') . Это демонстрирует, как вы можете использовать сеанс отладки, чтобы выяснить структуру данных, возвращаемых запросом API при работе с новыми конечными точками REST.

Резюме

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

Я надеюсь, что теперь вы перестанете использовать console.log для отладки и вместо этого доберетесь до VS Code, чтобы начать отладку JavaScript как профессионал!

Отладка javascript в google chrome – blackbox

Как и все, вы получаете ошибки в своем коде приложения. Вы начинаете отладку своего кода во вкладке source, но когда вы построчно проходите свой код в поисках ошибки, отладчик иногда перескакивает в исходный файл, который не является частью вашего app (например, сторонняя JS-библиотека). Я уверен, что в моменты «прыжка» в сторонние библиотеки вы чувствуете боль, и она вас не отпускает, пока, наконец, не вернетесь к коду своего приложения.
Специальная настройка «Blackboxing» в Devtools Google Chrome дает вам возможность завести черный список для сторонних библиотек, чтобы отладчик мог маршрутизировать свой путь и игнорировать их. Когда вы положите файл сторонней библиотеки в черный список blackbox, отладчик не будет перескакивать в этот файл при выполнении кода, который вы отлаживаете

Снимок экрана выше показывает, что app.js открыт, где была установлена точка breakpoint. При входе в этот код, backbone.js открывается, а затем underscore.js. Это может быть трудоемким процессом и нежелательным.
Что происходит, когда файл скрипта в черном списке?

• Если включена функция «Пауза для исключений», то сброшенные из кода библиотеки, не будут приостановлены

• Включение / выключение / перекрытие кода библиотеки, • Контрольные точки прослушивателей событий не прерываются в библиотечном коде,

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

Как использовать сценарии Blackbox

Есть два способа добавить скрипты в черный список черного ящика:

• Используя панель «Настройки»
• Щелкните правой кнопкой мыши на любом скрипте на панели «Источники»

Панель настроек

С помощью панели «Настройки» настройте черные листы Blackbox. Откройте «Настройки DevTools» и в разделе «Источники» нажмите «Управление черным ящиком».

Это откроет диалог, в котором вы можете ввести имена файлов сценариев, которые вы хотите добавить в черный список.
Вы можете сделать это несколькими способами:

• введите имя файла,

• использовать регулярные выражения для таргетинга: o файлы, которые содержат определенное имя /backbone.js$, o определенные типы файлов, такие как \ .min \ .js $

• или введите всю папку, содержащую сценарии, которые вы хотите использовать в Blackbox, такие как bower_components.

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

Контекстные меню

Чтобы использовать панель «Настройки» для добавления файлов в черный список, вы можете использовать контекстное меню при работе на панели «Источники». При просмотре файла вы можете щелкнуть правой кнопкой мыши в редакторе. И вы можете щелкнуть правой кнопкой мыши файл в навигаторе файлов. Оттуда выберите Blackbox Script. Это добавит файл в список на панели «Настройки».

Когда вы просматриваете черновик в редакторе на панели «Источники», вы увидите желтую сноску, указывающую, что скрипт находиться в черном листе. Нажатие на кнопку “подробнее” расширяет панель для дополнительную информацию.

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

> Автор оригинала: официальная документация от Google Chrome Developers
>  Оригинал статьи на английском

Как дебажить фронтенд и бекенд: пошаговая инструкция / Хабр

Привет, Хабр! Представляю вам перевод статьи «How to debug javascript in Chrome quick and easy «.

В этом посте мы научимся дебажить JavaScript на фронт- и бекенде с помощью Chrome DevTools и VS Code.

Цели:

1. Научиться отлаживать фронтенд и Angular
2. Проанализировать процесс отладки Node.js

Ловим баги на фронтенде (JavaScript, Angular)

Очень много сервисов сейчас позволяют дебажить код над фронтенде. Chrome DevTools и Firefox Developer Tools среди них самые популярные, но и в других браузерах тоже есть свои тулзы. Мы будем использовать Chrome DevTools для примеров.

Дебажим JavaScript

Откровенно говоря, отладка кода может занимать много времени. Особенно, если использовать такие простые команды как console.log() или window.alert().

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

И на этом моменте в игру вступает Chrome DevTools, позволяя нам дебажить код без утомительных команд. Среди фишек этой тулзы, редактирование CSS и HTML, тестирование сети и проверка скорости сайта — наши любимые.

Чтобы на практике познакомиться с этой тулзой, давайте создадим простенькую страничку на JavaScript с getData() методом. Этот метод будет просто собирать данные с поля ввода, создавать DOM элемент с dataSpan ID и добавлять значение с поля ввода в этот элемент.

Вот как наша страничка будет выглядеть:

В HTML:

В JavaScript:

Сохраним ее как app.js.

Вот как наша страничка будет выглядеть в браузере:

Чтобы проверить как метод работает до того, как сохранять данные в dataSpan, можно использовать старомодные console.log(data) или window.alert(data). Вот что мы увидим запустив файл в VS Code:

Это самый примитивный подход.

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

Брейкпоинт — это строка кода, на которой мы хотим приостановить прогонку кода, чтобы изучить как он работает (или не работает).

Возвращаясь к примеру, давайте запустим страницу в Google Chrome и сделаем следующее:

1. Чтобы открыть Chrome Developer Tools, в правом верхнем углу браузера, кликнем чтобы открыть меню настроек.
2. В этом меню, выберем Дополнительные инструменты (в английском меню — More tools), а потом Инструменты разработчика (Developer tools).

Кроме этого, можно использовать комбинацию клавиш Ctrl+Shift+I (мы пользуемся ею, но это уже вам решать =).

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

1. Выберите вкладку Sources.
2. В Sources, в панели Page, выберите app.js (который мы создали чуть раньше).
3. В редакторе кода, кликните на номер строки let data =document.getElementById('name').value;

Таким образом мы поставили брейкпоинт (для удобства, программа выделяет место с брейкпоинтом синим флажком). Также обратите внимание, что вырбанная переменная автоматически добавляется в секцию Breakpoints > Local (на панели JavaScript Debugging).

Управление интервалами выполнения кода

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

Первая кнопка, Resume script execution () продолжит выполнение кода до конца или до следующего брейкпоинта.

Давайте введем hello world в поле ввода. В строку добавится data = “hello world”. Теперь давайте кликнем на кнопку Step over next function call ().

Выбранная строка с брейкпоинтом будет выполнена и дебаггер выберет следующую. Откройте вкладку Scope чтобы посмотреть значение переменной data. Оно изменилось на “hello world”, которое мы ввели ранее и просто показывает значение нашей переменной на конкретной строке кода. Кликните Step over next function call еще раз чтобы выполнить выбранный метод и перейти на следующую строку.

Если обновить страницу, значение переменной out также обновится в DOM элементе. Чтобы посмотреть значение переменной, можно кликнуть на Expand () слева от нее. Если же еще раз кликнуть Step over next function call, то текст “hello world” еще раз добавится в dataSpan.

Более сложная отладка

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

Для этого мы обновим код app.js как на скриншоте выше. Обновляем страницу и приступаем непосредственно к дебаггингу.

1. Кликните 3 (номер строки of let data = document.getElementById(‘name’).value;) чтобы поставить брейкпоинт.
2. Введите 23 24 е в строке ввода в браузере.
3. Кликните Step over next function call.

На скриншоте видно, что и у суммы, и у произведения чисел значение NaN (not a number). Это показывает, что нужно исправить код немедленно.

Как еще можно поставить брейкпоинты

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

Для этого в DevTools есть классный инструмент для установки брейкпоинтов на разные типы интеракции с браузером. На панели JavaScript Debugging, кликните Event Listener Breakpoints чтобы посмотреть доступные категории.

Как вы видите, можно поставить брейкпоинт на событие Mouse > click (клик мышкой) в любом месте нашего кода. Это означает, что, если кликнуть Get Input Data, выполнение кода остановится на событии onclick. И не нужно вручную ничего добавлять.

Клик на Step over next function call будет последовательно вести нас через код, используемый чтобы обработать клики.

Используя Event Listener Breakpoints, можно поставить брейкпоинты на кучу разных типов событий, таких как Keyboard, Touch, и XHR.

Ключевое слово “debugger”

Если ввести debugger в любом месте кода, Chrome DevTools приостановит выполнение кода на этой строке и подсветит ее также, как и брейкпоинты. Можно использовать этот инструмент чтобы дебажить JavaScript в Chrome или других браузерах. Только не забудьте удалить его, когда закончите отладку.

Код на скриншоте выше остановится на строке, которая содержит ключевое слово ​debugger и автоматически запустит Chrome DevTools. По сути, это то же самое, что и поставить брейкпоинт на эту строку. Также выполнением кода можно управлять с помощью кнопок ​Step into next function call и Step over next function call.

Выжимка

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

Когда количество строк растет, Chrome Developer Tools намного более эффективен для отлова багов и оценки работы в целом.

Дебажим Angular

Легче всего отладить код Angular — использовать Visual Studio Code (VS Code). Чтобы начать дебаггинг, вам нужно будет установить расширение Debugger для Chrome:

1. Запустите проект на VS Code и откройте вкладку Extensions. Или нажмите Ctrl+Shift+X на клаве.
2. В строке поиска введите Chrome.
3. Выберите Debugger for Chrome и кликните Install.
4. После того как установите расширение, появится кнопка Reload. Кликните ее, чтобы завершить инсталляцию и активировать Debugger.

Как поставить брейкпоинт?

Точно так же, как и в DevTools, кликните на номер строки в app.component.ts. Строка с брейкпоинтом подсветится красным кружком (слева от номера строки).

Настраиваем дебаггер

Для начала, нам нужно будет настроить дебаггер:

1. С File Explorer перейдите на Debug вкладку.

Также можно использовать для этого Ctrl+Shift+D.

2. Кликните на иконку Settings чтобы создать launch.json.

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

3. С выпадающего меню Select Environment выберите Chrome.

Это создаст новую папку .vscode и файл launch.json для вашего проекта.

4. Запустите этот файл.

5. Чтобы использовать этот файл для наших целей, в методе url замените localhost порт с 8080 на 4200.

6. Сохраните изменения.

Вот как должен выглядеть файл:

7. Нажмите F5 или кликните кнопку Start Debugging чтобы запустить Debugger.

8. Запустите Chrome.

9. Чтобы приостановить выполнение кода на брейкпоинте, обновите страницу.

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

README

В расширении Debugger для Chrome есть множество дополнительных конфигураций, работа з source maps и устранений всяческих неполадок. Чтобы просмотреть их прямо в VS Code, кликните на расширение и выберите вкладку Details.

Отладка бекенда (Node.js)

Здесь вы узнаете как дебажить код на Node.js. Вот самые распространённые подходы:

• Используя Chrome DevTools

На даный момент, это наш любимый подход.

• Используя IDE-шки типаVisual Studio Code, Visual Studio, WebStorm, и т.д.

Для примеров мы будем использовать VS Code и Chrome DevTools.

Chrome и Node.js используют тот же JavaScript-движок, Google V8, и это значит, что для бекенда мы будем использовать те же инструменты, что и для фронта.

Для этого:

1. Запустите свой проект в VS Code.

2. Перейдите на вкладку Console.

3. Введите команду npm start —inspect и нажмите Enter.

4. Проигнорируйте предлагаемый “chrome-devtools://…” URL (существует метод получше).

5. Запустите Chrome и введите “about:inspect”.

Это перенаправит вас на вкладку Devices на DevTools.

6. Кликните линк Open dedicated DevTools for Node.

Процесс отладки такой же, как и для фронтенда, то есть с использованием брейкпоинтов. На самом деле, очень удобно то, что не нужно переключаться на IDE. Таким образом, можно дебажить и фронт- и бекенд на одном интерфейсе.

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

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 1) — CSS-LIVE

Перевод статьи Improve Your Debugging Skills with Chrome DevTools с сайта telerik.com для css-live.ru, автор — Питер Милчев

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

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

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

С отладчиком Хроме можно легко на лету менять внешний вид и функциональность AJAX-компонентов Telerik UI для ASP.NET или компонентов других UI-фреймворков вроде виджетов Kendo UI. Большинство советов и приёмов подходят и к другим браузерным отладчикам, и мы рассмотрим их на примере компонента RadGrid из библиотеки Telerik UI для ASP.NET AJAX.

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

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

Просмотр сгенерированного HTML-кода элемента

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

Посмотреть структура элемента можно несколькими способами:

• Кликнуть правой кнопкой мыши на элемент и выбрать из контекстного меню «Проверить элемент» (Inspect Element). Откроется отладчик Chrome, где будет подсвечен выбранный элемент.
• Кликнуть на кнопку «Проверить элемент» (Ctrl+Shift+C) с иконкой проверки в левом верхнем углу отладчика Chrome и навести мышью на элемент.
• Кликнуть правой кнопкой мыши на элемент, выведенный в консоли, и выбрать «Показать в панели элементов» (Reveal in Elements panel).

Иллюстрация 1. Проверить сгенерированные DOM-элементы

Маленькие хитрости

• Можете на лету редактировать HTML и HTML-атрибуты двойным кликом по атрибуту элемента в панели «Элементы» (Elements) или кликнуть правой кнопкой мыши на элемент, выбрав из контекстного меню пункт «Добавить атрибут» (Add attribute), «Редактировать атрибут» (Edit attribute) или «Редактировать как HTML» (Edit as HTML).
• Можно менять иерархию DOM, выбрав элемент в панели «Элементы», а затем перетащив его в нужное место.

Просмотр примененных стилей

Иногда, чтобы добиться безупречного вида страницы, бывает нужно чуть-чуть подрегулировать CSS-правила вроде отступов или цвета. В панели «Элементы» сбоку есть вкладки «Стили» (Styles) и «Вычислено» (Computed), позволяющие динамически изменять стили, примененные к выбранному элементу в панели «Элементы», и даже находить источник стилевого правила. Это также позволяет легко фильтровать стили, добавлять/удалять классы (вкладка «:cls»), принудительно задавать состояния (вкладка «:hov»), к примеру, наведение, активное состояние и состояние фокуса. Ещё это полезно, если хотите понять, какие стили испортили раскладку, внешний вид элементов и дизайн в целом.

Иллюстрация 2. Смотрите, какие стили применены к DOM-элементам

Маленькие хитрости

• Можете использовать стрелки клавиатуры, чтобы увеличивать/уменьшать числовые значения.
• Можете использовать «пипетку» при установке значения цвета в некоторых свойствах.

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

Ссылка на элемент управления на стороне клиента

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

Попробуйте сделать вот что:

• Проверьте выводимый HTML-код компонента, опираясь на приобретенный ранее опыт, полученный при проверке сгенерированного HTML компонента RadGrid
• Получите значение атрибута ID элемента, класс которого называется так же, как компонент (то есть)
• Используйте полученное значение ID в качестве параметра для метода $find(). Метод $find() вернёт ссылку на объект компонента на клиенте.

Иллюстрация 3. Ссылка на объект компонента RadGrid

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

Маленькие хитрости

• $telerik.$(".RadGrid")[0].control возвращает ссылку на клиентский объект первого компонента RadGrid на странице. Часть $telerik.$(".RadGrid")[0] возвращает элемент, который мы искали для получения его ID.

Автодополнение IntelliSense для объектов на стороне клиента

Результатом метода $find() будет объект RadGrid, и теперь, получив ссылку на компонент, можно видеть его API с помощью подсказки автодополнения. Чтобы увидеть «IntelliSense», нужно просто присвоить результат переменной.

Маленькие хитрости

• ↑ и ↓ в консоли показывают предыдущую/следующую выполненную команду
• Ctrl+Пробел открывает меню с подсказками
• console.table(objectReference,['index']) в консоли перечисляет все доступные свойства и методы. В Google Chrome можно не писать console., а просто использовать table(objectReference,['index']).

Иллюстрация 4. Показать Api объекта компонента Grid и увидеть подсказки автодополнения

Отладка JavaScript

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

Есть несколько различных подходов для активации отладчика в функции JavaScript:

• Добавить оператор debugger; в объявлении функции. К сожалению, это сложнее со встроенными функциями готовых компонентов, поскольку не всегда есть доступ к исходному коду.
• Вызвать debug(ссылкаНаФункцию) в консоли. Это равносильно добавлению оператора debugger; в первой строке объявления функции.
• Добавить точки останова по номеру строки, которые предлагает отладчик Chrome. Для этого можно перейти к коду в панели «Исходники» (Sources) и кликнуть на номер строки. Левый клик мыши добавит точку останова, а правый позволит установить точку останова по условию (сработает только если данное выражение окажется равно true). Точки останова по условию весьма полезны для отладки циклов.

Иллюстрация 5. Добавление точки останова по номеру строки

Маленькие хитрости

• Ошибки JavaScript записываются в консоль. Отлавливать такие ошибки — всегда хорошее решение, поскольку они могут ухудшить производительность страницы, а то и поломать взаимодействие или функциональность приложения.
• Чтобы увидеть в панели «Исходники» файл с функцией и подсветить строку с её объявлением, можно вывести функцию в консоли и кликнуть по ней левой кнопкой мыши. То же самое получится, если кликнуть правой кнопкой мыши на выведенную функцию и выбрать пункт «Показать определение функции» (Show function definition) из контекстного меню.
• Используйте горячие клавиши F8 (возобновить), F10 (перешагнуть) и F11 (войти) при отладке.
• Кликните правой кнопкой мыши на строчку кода и выберете «Продолжить досюда» (Continue to here) — это всё равно, что вставить точку останова, возобновить отладку и сразу удалить точку останова после её срабатывания
• Кликните правой кнопкой мыши по выражению или выбранному тексту, чтобы вызвать контекстное меню с пунктами «Вычислить в консоли» (Evaluate in console) и «Добавить выбранный текст в отслеживаемые объекты» (Add selected text to watches).
• Нажмите кнопку {}, чтобы отформатировать код в исходном файле.

Эмуляция отображения на мобильном устройстве

Знакомы ли вам мучения с перебором разных устройств ради проверки отображения вашей страницы на мобильном устройстве? Функциональность «Режим устройств» (Device Mode, он же «Мобильный режим») позволяет тестировать отзывчивый дизайн сайта на разных размерах и разрешениях экрана, а также точно имитировать ввод мобильных устройств для событий касания, ориентацию устройств и геолокацию. В придачу он ещё изменяет строку «User-agent», имитируя запрос с мобильного браузера.

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

Чтобы активировать мобильный режим, можно нажать кнопку «Вкл./выкл. режим устройств». Учтите, что при переключении между режимами может понадобиться обновить страницу.

Иллюстрация 6. Внешний вид браузера в режиме устройств

Маленькие хитрости

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

Просмотр сетевых запросов

Иногда нужно проверить параметры запроса к серверу, или посмотреть, что и в каком формате приходит в ответе. Для это используйте панель «Сеть» (Network).

Иллюстрация 7. Просмотр сетевых запросов

Маленькие хитрости

• Включите логирование XHR-запросов в консоли. От этого XHR-запрос в консоли станет заметнее, а с помощью правого клика мыши по результату можно сразу же переключиться на этот запрос на панели «Сеть». Примечание: не ставьте галочку «Скрыть сеть» (Hide network)
• Установите флажок «Отключить кэш» (Disable the cache). Теперь файлы с запросами не будут кэшироваться, что избавит вас от проблем и сэкономит время, если сделанные на сервере изменения не применятся на клиенте. Ещё один способ очистки кэша — обновить страницу с помощью Ctrl+F5 вместо F5.

Можно имитировать медленное соединение, что неплохо эмулирует работу мобильного интернета, выбрав другой пункт в выпадающем списке «Онлайн» (Online) во вкладке «Сеть».

Заключение

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

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

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

P.S. Это тоже может быть интересно:

Пять инструментов отладки JavaScript, о которых полезно знать

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

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

1. Выполнение каких действий вы ожидаете от своей программы?
2. Почему вы ожидаете этого от программы?
3. Делает ли программа то, что вы от неё ожидаете?

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

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

Проверка значений переменных

Начнём, вне основного списка отладочных средств, с самого простого и очевидного. Команда console.log() может оказаться весьма полезной для проверки таких вещей, как переменные, объявленные с помощью var и let, константы, объявленные с использованием const, объекты arguments и this. В момент вывода значения эти данные актуальны, но знайте о том, что иногда консоль Chrome выводит данные, обновлённые после выполнения программы. С осторожностью относитесь к данным, после которых идёт светло-синий значок с белой буквой «i».

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

№1: инструменты разработчика Chrome — отладчик

Более надёжной альтернативой использования console.log() является отладчик Chrome. Для того, чтобы им воспользоваться, добавьте команду debugger в ту строку вашего кода, в которой вам хотелось бы исследовать значения переменных. Сохраните файл, затем откройте панель инструментов разработчика Chrome, например, следующими командами:

iOS: Cmd + Opt + I
Windows: Ctrl + Shift + I

Перейдите к странице, код которой исследуете, скажем, это может быть что-то вроде localhost:PORT_NUMBER или адрес страницы на разрабатываемом сайте, либо, если страница уже открыта, перезагрузите её. Исполнение приостановится на команде debugger и вы сможете исследовать программу.

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

Использование команды debugger аналогично добавлению точки останова из панели Sources в браузере, но основное отличие, на которое стоит обратить внимание, заключается в том, что точки останова привязаны к номерам строк. Предположим, вы поставили точку останова на строке 20, а затем переработали код и удалили строку 8. То, что было в строке 20, теперь окажется в строке 19 и вам придётся переставить на новое место точку останова. Подробности об отладке в Chrome и разные полезные сведения об этом процессе можно узнать, обратившись к документации.

Обратите внимание на то, что похожие средства отладки имеются в браузерах Firefox, Safari и Edge.

Инструменты разработчика Chrome — вкладка Network

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

Работа в браузере: вкладка Network инструментов разработчика Chrome показывает запросы к серверу. Щелчок по строке запроса позволяет просмотреть заголовки и другие сведения

№2: React Developer Tools

Если ваше приложение основано на React и нужно проверить значения свойств или состояний, вам стоит познакомиться с расширением React Developer Tools для Chrome. Оно немедленно станет вашим лучшим другом.

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

Работа в браузере: вкладка React показывает значения свойств и состояния если они существуют для выбранного элемента

№3: отладка серверного кода и Node Inspect

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

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

node --inspect PATH_TO_YOUR_SERVER_FILE

После этого вы должны увидеть сообщение, в котором нам наиболее интересна ссылка.

Отладка серверного кода: включение отладчика Node

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

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

№4: проверка ответа сервера — Postman

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

Postman — это настольное приложение, его надо скачать и установить. Оно позволяет выбрать вид запроса (среди них — GET, POST, PUT, PATCH, DELETE), добавить нужную вам конечную точку, а если надо — то и данные для аутентификации, и отправить запрос на сервер. Ответ сервера появится в приложении на вкладке Body.

Работа в Postman: выберите вид запроса, введите сведения о конечной точке, данные для аутентификации, и нажмите кнопку Send. Ответ сервера появится на вкладке Body

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

№5: синтаксические ошибки и Webpack

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

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

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

Итоги: что делать, если ошибка не исчезает

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

Уважаемые читатели! Как вы ищете ошибки в JavaScript-коде?

Способы отладки JS на клиенте / Хабр

Применительно к разработке на create-react-app (CRA) в браузере и в IDE WebStorm. Если вам известны какие-либо другие способы отладки, большая просьба поделиться знаниями.

Отладка внутри Chrome

После запуска приложения в браузере, нажмите [F12], чтобы открыть Chrome DevTools, потом переключитесь на вкладку Sources, нажмите [Ctrl+P], в строке поиска введите имя требуемого файла.

 

Благодаря Source Map, мы видим исходный JSX. Далее можно отметить нужную строчку кода, как точку останова, затем перегрузить страницу по [F5], и получить желаемое — инструмент отладки.

 

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

 

Иногда хочется отлаживать по старинке, с помощью console.log(). Можно получить значение переменной внутри JSX прямо в точке её применения.

<img src={console.log('logo', logo) || logo} />

Как это работает: console.log() вернет undefined и код выполнится дальше по условию «||», а в консоли браузера мы увидим искомое значение, например: «/static/media/logo.5d5d9eef.svg».

UPDATE (спасибо, faiwer) — ещё в копилку:

(() => { debugger })() || // anything

Отладка внутри IDE WebStorm

Используется последняя версия 2017.1. Сначала нужно настроить окружение. Установите расширение Chrome — JetBrains IDE Support. Затем добавьте Run/Debug-конфигурацию.

 

Запустите CRA обычным образом, выполнив в терминале:

$ yarn start

Выберите конфигурацию Debug и нажмите кнопку с иконкой жука (в правом верхнем углу IDE):

 

Откроется браузер с предупреждением «JetBrains IDE Support отлаживает этот браузер». (Замечено, что если теперь открыть Chrome DevTools по [F12], то отладка в WebStorm завершится — не надо этого делать). Далее можно отметить нужную строчку кода, как точку останова, затем перегрузить страницу браузера по [F5], и получить желаемое — инструмент отладки внутри WebStorm.

 

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

$ npm install -g babel-cli babel-preset-es2015

Затем добавьте ещё одну Run/Debug-конфигурацию.

 

Выберите конфигурацию Tests и нажмите кнопку с иконкой жука:

 

Ура, нам доступна отладка тестов.

UPDATE Как настроить отладку CRA внутри VSCode. Не думал, что когда-нибудь скажу такое, но этот продукт от Microsoft прекрасен.

Как запустить отладчик JavaScript в Google Chrome? — javascript

При использовании Google Chrome я хочу отладить некоторый код JavaScript. Как я могу это сделать?

javascript

google-chrome

debugging

google-chrome-devtools

Поделиться

debugger;

 
npm install


npm install -g mocha
  

  констант мест = [];

module.exports = {
  места,

  addPlace: (город, страна) => {
    const id = ++ places.length;
    пусть numType = 'odd';
    if (id% 2) {
      numType = 'даже';
    }
    Places.push ({
      id, город, страна, numType,
    });
  },
};
  

  module.exports.addPlace («Момбаса», «Кения»);
module.exports.addPlace («Кингстон», «Ямайка»);
module.exports.addPlace ('Кейптаун', 'Южная Африка');
  

  "конфигурации": [
  {
    "тип": "узел",
    "запрос": "запуск",
    "name": "Места запуска",
    "программа": "$ {workspaceFolder} \\ src \\ places.js "
  }
]
  

 
npm install -g mocha


мокко
  

  {
  "тип": "узел",
  "запрос": "запуск",
  "name": "Тесты мокко",
  "программа": "$ {workspaceFolder} / node_modules / mocha / bin / _mocha",
  "args": [
    "-u",
    "тдд",
    "--timeout",
    «999999»,
    "--цвета",
    "$ {workspaceFolder} / test"
  ],
  "internalConsoleOptions": "openOnSessionStart"
},
  

  addPlace («Найроби», «Кения»);
  

  const id = длина мест + 1;
  

  if (id% 2 === 0) {
  numType = 'даже';
}
  

  addPlace («Кейптаун», «Южная Африка»);
  

  beforeEach (() => {
  place.length = 0;
});
  

  const express = require ('экспресс');

const приложение = экспресс ();
const порт = 3000;


app.use (express.static ('общедоступный'));


app.use ('/ scripts', экспресс.static (`$ {__ dirname} / node_modules /`));


app.use ((req, res) => res.sendFile (`$ {__ dirname} / public / index.html`));

app.listen (порт, () => {
  console.info ('прослушивание% d', порт);
});
  

 
const el = $ ('# приложение');
const placeTable = $ ('# мест-таблица');


константные места = [];


const placesFormTemplate = Handlebars.compile ($ ('# шаблон-формы-мест'). html ());
const PlacesTableTemplate = Handlebars.compile ($ ('# шаблон-таблицы-мест'). html ());

const addPlace = (город, страна) => {
  const id = места.длина + 1;
  const numType = (идентификатор% 2 === 0)? 'даже странно';
  Places.push ({
    id, город, страна, numType,
  });
};


addPlace («Найроби», «Кения»);

...


router.add ('/', () => {
  
  const html = placesFormTemplate ();
  el.html (HTML);
  
  $ ('. ui.form'). form ({
    fields: {
      город: 'пусто',
      страна: 'пусто',
    },
  });
  
  const tableHtml = placeTableTemplate ({места});
  placeTable.html (tableHtml);
  $ ('. submit'). on ('click', () => {
    const city = $ ('# город'). val ();
    const country = $ ('# страна').val ();
    addPlace (город, страна);
    placeTable.html (placeTableTemplate ({places}));
    $ ('форма'). форма ('очистить');
    вернуть ложь;
  });
});
  

  placesTable.html (tableHtml);
  

  {
  "тип": "хром",
  "запрос": "запуск",
  "name": "Запустить Chrome",
  "url": "http: // localhost: 3000",
  "webRoot": "$ {workspaceFolder} / public"
},
  

  const placesTable = $ ('# таблицы мест');
  

  addPlace (город, страна);
  

  router.navigateTo (window.location.path);