Разное

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

Содержание

Отладка проектов JavaScript с помощью VS Code & Chrome Debugger

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

Представьте на мгновение, что функция console.log() не существует в JavaScript. Я уверен, что первый вопрос, который вы себе зададите, будет: «Как я смогу убедиться, что мой код работает правильно?»

Ответ заключается в использовании инструментов отладки. В течение долгого времени большинство разработчиков, включая меня, использовали console.log для отладки неработающего кода. Это быстрый и простой в использовании. Тем не менее, иногда вещи могут становиться привередливыми, если вы не знаете, где и что является причиной ошибки. Часто вы обнаруживаете, что расставляете ловушки console.log всему коду, чтобы увидеть, какой из них выявит виновника.

Чтобы исправить это, нам нужно изменить свои привычки и начать использовать инструменты отладки. Для отладки кода JavaScript доступно множество инструментов, таких как Chrome Dev Tools, Node Debugger , Node Inspect и другие. Фактически, каждый крупный браузер предоставляет свои собственные инструменты.

В этой статье мы рассмотрим, как использовать средства отладки, предоставляемые Visual Studio Code. Мы также рассмотрим, как использовать расширение Debugger for Chrome, которое позволяет интегрировать VS Code с Chrome Dev Tools. Когда мы закончим, вы больше никогда не захотите использовать console.log() .

Предпосылки

Для этого урока вам нужно только иметь прочную основу в современном JavaScript . Мы также посмотрим, как мы можем отладить тест, написанный с использованием Mocha и Chai . Мы будем использовать неработающий проект, пример отладки , чтобы научиться исправлять различные ошибки без использования единого console.log . Вам понадобится следующее:

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

  

Теперь мы готовы научиться отлаживать проект JavaScript в VS Code.

Отладка JavaScript в VS Code

Первый файл, на который я хотел бы взглянуть, это src/places.js . Вам нужно открыть папку debug-project в VS Code ( Файл > Открыть папку ) и выбрать файл в редакторе.

 const places = []; module.exports = { places, addPlace: (city, country) => { const id = ++places.length; let numType = 'odd'; if (id % 2) { numType = 'even'; } places.push({ id, city, country, numType, }); }, }; 

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

 module.exports.addPlace('Mombasa', 'Kenya'); module.exports.addPlace('Kingston', 'Jamaica'); module.exports.addPlace('Cape Town', 'South Africa'); 

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

Видите красные точки на стороне? Это точки останова. Точка останова — это просто визуальная индикация, указывающая инструменту отладчика, где приостановить выполнение. Затем на панели действий нажмите кнопку отладки (значок с надписью «Ошибки не разрешены»).

Посмотрите на верхний раздел. Вы заметите значок шестеренки с красной точкой. Просто нажмите на него. Файл конфигурации отладки, launch.json , будет создан для вас. Обновите конфигурацию следующим образом, чтобы вы могли запустить отладчик VS Code на places.js :

 "configurations": [ { "type": "node", "request": "launch", "name": "Launch Places", "program": "${workspaceFolder}\\src\\places.js" } ] 

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

После сохранения файла вы увидите, что на панели отладки появился новый раскрывающийся список « Места запуска» . Чтобы запустить его, вы можете:

  • нажмите зеленую кнопку Play на панели отладки
  • нажмите F5
  • нажмите Отладка > Начать отладку в строке меню.

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

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

  • Drag Dots anchor : для перемещения панели инструментов туда, где она ничего не блокирует
  • Продолжить : продолжить сеанс отладки
  • Шаг за шагом : выполнение кода построчно, пропуская функции
  • Шаг в : выполнение кода построчно, входя в функции
  • Выход : если уже внутри функции, эта команда выведет вас
  • Restart : перезапускает сеанс отладки
  • Стоп : останавливает сеанс отладки.

Прямо сейчас вы заметите, что сеанс отладки остановился на вашей первой точке останова. Чтобы продолжить сеанс, просто нажмите кнопку « Продолжить» , что приведет к продолжению выполнения до достижения второй точки останова и повторной паузы. Повторное нажатие кнопки Continue завершит выполнение, и сеанс отладки будет завершен.

Давайте начнем процесс отладки снова, нажав F5 . Убедитесь, что две точки останова все еще на месте. Когда вы устанавливаете точку останова, код останавливается на указанной строке. Эта строка не выполняется, если вы не нажмете « Продолжить» ( F5 ) или « Перешагните» ( F10 ). Прежде чем вы нажмете что-нибудь, давайте посмотрим на разделы, которые составляют панель отладки:

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

Чтобы добавить выражение в раздел « Watch », просто нажмите знак « и добавьте любое допустимое выражение JavaScript — например, places.length . Когда отладчик делает паузу, если ваше выражение находится в области видимости, значение будет напечатано. Вы также можете навести курсор на переменные, которые в настоящее время находятся в области видимости. Появится всплывающее окно с отображением их значений.

В настоящее время массив places пуст. Нажмите любой элемент управления навигацией, чтобы увидеть, как работает отладка. Например, Step over перейдет к следующей строке, а Step into перейдет к функции addPlace . Потратьте немного времени, чтобы ознакомиться с элементами управления.

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

Вы также можете проверить все переменные, находящиеся в области действия, в разделе « Переменные ».

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

  1. в массиве несколько пробелов, то есть places[0] и places[2] не undefined
  2. свойство numType отображается even для нечетных значений id .

А пока просто завершите сеанс отладки. Мы исправим их в следующем разделе.

Отладка тестов с Mocha

Откройте test/placesTest.js и просмотрите код, написанный для проверки кода в places.test . Если вы никогда раньше не использовали Mocha, вам нужно сначала установить его глобально, чтобы запустить тесты.

  

Вы также можете запустить npm test для выполнения тестов. Вы должны получить следующий вывод:

Все тесты не пройдены. Чтобы выяснить проблему, мы собираемся запустить тесты в режиме отладки. Для этого нам нужна новая конфигурация. Перейдите на панель отладки и щелкните раскрывающийся список, чтобы получить доступ к параметру « Add Configuration :

launch.json файл launch.json с всплывающим списком нескольких конфигураций на выбор.

Просто выберите Mocha Tests . Следующая конфигурация будет вставлена ​​для вас:

 { "type": "node", "request": "launch", "name": "Mocha Tests", "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha", "args": [ "-u", "tdd", "--timeout", "999999", "--colors", "${workspaceFolder}/test" ], "internalConsoleOptions": "openOnSessionStart" }, 

Настройки по умолчанию в порядке. Вернитесь в выпадающий список и выберите Mocha Tests . Вам нужно будет закомментировать последние три строки, которые вы добавили в places.js ; в противном случае тесты не будут выполняться, как ожидалось. Вернитесь к placesTest.js и добавьте placesTest.js останова на линии непосредственно перед тем, где произойдет первый сбой теста. Это должна быть строка семь, где написано:

 addPlace('Nairobi', 'Kenya'); 

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

В начале теста places.length должно places.length ноль. Если вы нажмете places.length , places.length 2, но добавлено только одно место Как это может быть?

Перезапустите сеанс отладки, и на этот раз используйте Step into, чтобы перейти к функции addPlace . Отладчик проведет вас по places.js . Значение places.length все еще равно нулю. Нажмите Step over, чтобы выполнить текущую строку.

Ага! Значение places.length просто places.length на 1, но мы ничего не добавили в массив. Проблема вызвана оператором ++ который изменяет длину массива. Чтобы это исправить, просто замените строку на:

 const id = places.length + 1; 

Таким образом, мы можем безопасно получить значение id без изменения значения places.length . Пока мы все еще находимся в режиме отладки, давайте попробуем исправить еще одну проблему, когда свойству numType присваивается значение, even когда id равен 1. Проблема, по-видимому, заключается в выражении модуля внутри оператора if:

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

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

 if (id % 2 === 0) { numType = 'even'; } 

Перезапустите сеанс отладки и нажмите « Продолжить», чтобы пропустить текущую точку останова. Первый тест «могу добавить место» сейчас проходит. Но второго теста нет. Чтобы это исправить, нам нужна еще одна точка останова. Удалите текущую и поместите новую точку останова в строку 16, где написано:

 addPlace('Cape Town', 'South Africa'); 

Начать новый сеанс отладки:

Там! Посмотрите на раздел Переменные . Еще до того, как начинается второй тест, мы обнаруживаем, что в массиве places уже есть данные, созданные в первом тесте. Это явно загрязнило наш текущий тест. Чтобы это исправить, нам нужно реализовать какую-то функцию setup которая сбрасывает массив places для каждого теста. Чтобы сделать это в Mocha, просто добавьте следующий код перед тестами:

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

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

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

Отладка JavaScript с помощью Chrome Debugger

Теперь, когда вы ознакомились с основами отладки JavaScript в VS Code, мы увидим, как отладить немного более сложный проект с помощью расширения Debugger for Chrome . Просто откройте панель Marketplace через панель действий. Найдите расширение и установите его.

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

 const express = require('express'); const app = express(); const port = 3000;  

Весь код на стороне клиента находится в public папке. Зависимости проекта включают в себя Semantic-UI-CSS, jQuery, Vanilla Router, Axios и Handlebars. Вот как выглядит проект, когда вы запускаете его при npm start . Вам нужно открыть URL localhost: 3000 в вашем браузере, чтобы просмотреть приложение.

Попробуйте добавить новое место. Когда вы это сделаете, вы увидите, что ничего не происходит. Очевидно, что-то идет не так, так что пришло время заглянуть под капот. Сначала мы рассмотрим код, прежде чем мы начнем сеанс отладки. Откройте public/index.html . Наше внимание в настоящее время находится в этом разделе:

   <script type="text/x-handlebars-template"> <h2> <i></i> <div> Places</div> </h2> <hr> <br> <form> <div> <div> <label>City</label> <input type="text" placeholder="Enter city" name="city"> </div> <div> <label>Country</label> <input type="text" placeholder="Enter Country" name="country"> </div> <div>Add Place</div> </div> </form> <br> <div></div> </script>  <script type="text/x-handlebars-template"> <table> <thead> <tr> <th>Id</th> <th>City</th> <th>Country</th> <th>NumType</th> </tr> </thead> <tbody> {{#each places}} <tr> <td>{{id}}</td> <td>{{city}}</td> <td>{{country}}</td> <td>{{numType}}</td> </tr> {{/each}} </tbody> </table> </script> 

Если вы бросите быстрый взгляд, код будет правильным. Так что проблема должна быть в app.js Откройте файл и проанализируйте код там. Ниже приведены разделы кода, на которые следует обратить внимание. Не торопитесь, чтобы прочитать комментарии, чтобы понять код.

  

Все вроде нормально. Но в чем может быть проблема? Давайте разместим точку останова в строке 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

Поделиться

Источник


Kevin Driedger    

15 сентября 2008 в 20:07

13 Ответов



385

Попробуйте добавить это в свой источник:

debugger;

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

Поделиться


Omer van Kloeten    

15 сентября 2008 в 20:08



305

Windows: CTRLSHIFTJ или F12

Мак: J

Также доступно через меню гаечный ключ (сервис > консоль JavaScript):

Поделиться


John Sheehan    

15 сентября 2008 в 20:08



53

Windows и Linux:

Ctrl + Shift + I ключи для открытия инструментов разработчика

Ctrl + Shift + J чтобы открыть инструменты разработчика и перенести фокус на консоль.

Ctrl + Shift + C для переключения режима проверки элемента.

Мак:

+ + I ключи для открытия инструментов разработчика

+ + J чтобы открыть инструменты разработчика и перенести фокус на консоль.

+ + C для переключения режима проверки элемента.

Источник

Другие ярлыки

Поделиться


user629309    

24 февраля 2011 в 12:12



13

Нажмите функциональную клавишу F12 в браузере Chrome, чтобы запустить отладчик JavaScript, а затем нажмите кнопку «Scripts».

Выберите файл JavaScript сверху и поместите точку останова в отладчик для кода JavaScript.

Поделиться


Balachandar P    

05 апреля 2012 в 07:28



10

Ctrl + Shift + J открывает инструменты разработчика.

Поделиться


Senyai    

27 февраля 2010 в 10:16



6

В Chrome 8.0.552 на Mac вы можете найти это в меню View / Developer / JavaScript Console … или вы можете использовать Alt + CMD + J -да .

Поделиться


Primc    

03 декабря 2010 в 00:22


Поделиться


hernanvicente    

24 апреля 2011 в 03:47



2

Shift + Control + I открывает окно инструмент разработчика. Снизу слева второе изображение (которое выглядит следующим образом) откроет/скроет консоль для вас:

Поделиться


Premanshu    

15 ноября 2011 в 12:16



2

Чтобы открыть выделенную панель » консоль’, либо:

  • Используйте сочетания клавиш
    • На Windows и Linux: Ctrl + Shift + J
    • На Mac: Cmd + Option + J
  • Выберите значок меню Chrome, меню — > Дополнительные инструменты — > консоль JavaScript . Или, если инструменты разработчика Chrome уже открыты, press вкладка «консоль».

Пожалуйста, обратитесь сюда

Поделиться


Venkat    

27 октября 2015 в 11:09



1

Для пользователей Mac перейдите в Google Chrome —> меню View —> Developer —> JavaScript Console .

Поделиться


Neo123    

28 января 2015 в 23:01



1

Теперь в google chrome появилась новая функция. С помощью этой функции вы можете редактировать код в chrome browse. (Постоянное изменение местоположения кода)

Для этого нажмите F12 —> Source Tab — (правая сторона) — > File System — в этом поле выберите ваше местоположение кода. а потом браузер chrome
попросит у вас разрешения и после этого код будет окрашен в зеленый цвет. и вы можете изменить свой код, и это также отразится на вашем местоположении кода (это означает, что он будет постоянно меняться)

Спасибо

Поделиться


stackinfostack    

26 января 2018 в 11:35



0

Самый эффективный способ, который я нашел, чтобы добраться до отладчика javascript, — это запустить это:

chrome://inspect

Поделиться


Nestor Urquiza    

21 февраля 2019 в 14:27



-4

Из консоли в Chrome вы можете сделать console.log(data_to_be_displayed) .

Поделиться


anand    

16 апреля 2013 в 13:19


Похожие вопросы:

Как заставить отладчик скриптов Chrome перезагрузить javascript?

Мне очень нравится возможность редактировать javascript в отладчике chrome, однако я нахожу, что это может быть очень проблематично, когда отладчик повторно извлекает JavaScript с сервера. Иногда…

Google Chrome Javascript отладчик и скрипты контента

Этот вопрос уже задавался подобным образом раньше , но я не могу отладить Javascript в Google Chrome. Если я перейду на страницу > разработчик Debug Javascript ( Ctrl + Shift + L ) отключен. Alt + `…

Как пройти через код в отладчике Google chrome javascript

Я действительно разочаровываюсь в Google Chrome… У меня есть версия 3.0.195.27 и я хочу отладить некоторые JavaScript, которые работают в IE, FF, но не в Chrome. Когда я открываю отладчик и…

javascript хром эквивалент отладчик отладчик PHP

Я парень frontend javascript, и в основном изучаю PHP, я использовал несколько инструментов отладки PHP, теперь, когда я кодирую в javascript, я использую инструменты Chrome browser dev для большого…

Как запустить свой собственный javascript в google chrome

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

Как запустить новый экземпляр Chrome в Visual Studio при запуске веб-сайта без отладки Javascript?

Как описано здесь , вы можете запустить пустой Chrome, включив отладку Javascript, но я не хочу включать отладку Javascript!!! Это вызывает некоторые странные ошибки с ServiceWorkers, и отладчик…

Есть ли функция JavaScript, чтобы заставить Google Chrome взломать отладчик?

Я ищу что-то вроде Debugger.Launch() в .NET, который программно врывается в отладчик. Я не ищу кросс-браузерный способ сделать это, просто Google Chrome достаточно хорош.

Есть ли отладчик CSS в Google Chrome?

Обновления CSS на моем сайте работают во всех других браузерах, кроме Google Chrome. Есть ли отладчик CSS в Google Chrome или расширение, которое я могу добавить? Я использую некоторые стили из…

Постоянный Локальный Отладчик JavaScript-Chrome

Я помню, что несколько лет назад мне удалось сохранить удаленный файл JavaScript с веб-сайта на мой локальный отладчик в Chrome, сделать несколько корректировок кода и обновить страницу, чтобы…

Отладчик Rails из Chrome

Я использовал отладчик Rails раньше,который я могу отлаживать Rails приложений в chrome,так же, как отладка javascript, я могу установить точку останова. Но я забыл сейчас, кто может сказать мне,…

Отладка в Chrome

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

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

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

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

  • Откройте страницу с примером в Chrome.
  • Включите инструменты разработчика с помощью F12 (Mac: Cmd + Opt + I ).
  • Выберите панель Sources .

Вот что вы должны увидеть, если делаете это впервые:

Кнопка переключения открывает вкладку с файлами.

Щелкните по нему и выберите hello.js в виде дерева. Вот что должно появиться:

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

  1. На панели File Navigator перечислены файлы HTML, JavaScript, CSS и другие файлы, включая изображения, прикрепленные к странице. Здесь также могут появиться расширения Chrome.
  2. Панель редактора кода показывает исходный код.
  3. Панель отладки JavaScript предназначена для отладки, мы скоро ее рассмотрим.

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

Если нажать Esc , то внизу откроется консоль. Мы можем набирать там команды и нажимать Enter для выполнения.

Результат выполнения оператора показан ниже.

Например, здесь 1 + 2 дает 3 , а hello («отладчик») ничего не возвращает, поэтому результат undefined :

Давайте посмотрим, что происходит в коде примера страницы. В hello.js щелкните строку с номером 4 .Да прямо на цифре 4 , а не на коде.

Поздравляем! Вы установили точку останова. Пожалуйста, также нажмите на номер строки 8 .

Это должно выглядеть так (синий — там, где вы

.Отладка

— Использование Google Chrome для отладки и редактирования JavaScript, встроенного в HTML-страницу

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

  1. Около
  2. Продукты

  3. Для команд
  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

javascript — Редактирование в отладчике Chrome

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

  1. Около
  2. Продукты

  3. Для команд
  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

.

Отладка проектов JavaScript с помощью VS Code и Chrome Debugger

Отладка JavaScript — не самый увлекательный аспект программирования на JavaScript, но это жизненно важный навык. В этой статье рассматриваются два инструмента, которые помогут вам профессионально отлаживать JavaScript.

Представьте на мгновение, что функция console.log () не существует в JavaScript. Я почти уверен, что первый вопрос, который вы зададите себе, будет: «Как я могу убедиться, что мой код работает правильно?»

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

Чтобы исправить это, нам нужно изменить наши привычки и начать использовать инструменты отладки. Для отладки кода JavaScript доступен ряд инструментов, таких как Chrome Dev Tools, Node Debugger, Node Inspect и другие.Фактически, каждый крупный браузер предоставляет свои собственные инструменты.

В этой статье мы рассмотрим, как использовать средства отладки, предоставляемые Visual Studio Code. Мы также рассмотрим, как использовать расширение Debugger for Chrome, которое позволяет VS Code интегрироваться с инструментами разработчика Chrome. Когда мы закончим, вы больше никогда не захотите использовать console.log () .

Предварительные требования

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

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

 
npm install


npm install -g mocha
  

Теперь мы готовы научиться отлаживать проект JavaScript в VS Code.

Отладка JavaScript в VS Code

Первый файл, на который я хочу, чтобы вы посмотрели, — это src / places.js . Вам нужно будет открыть папку debug-project в VS Code ( File > Open Folder ) и выбрать файл в редакторе.

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

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 ('Кейптаун', 'Южная Африка');
  

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

Видите красные точки сбоку? Это точки останова.Точка останова — это просто визуальная индикация, указывающая инструменту отладчика, где приостановить выполнение. Затем на панели действий нажмите кнопку отладки (значок с надписью «Ошибки не разрешены»).

Посмотрите на верхнюю часть. Вы увидите значок шестеренки с красной точкой. Просто щелкните по нему. Для вас будет создан файл конфигурации отладки launch.json . Обновите конфигурацию таким образом, чтобы можно было запустить отладчик VS Code на places.js :

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

Примечание. В зависимости от вашей операционной системы вам может потребоваться заменить двойную обратную косую черту ( \ ) на одинарную косую черту (/).

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

  • нажмите зеленую кнопку воспроизведения на панели отладки
  • пресс F5
  • щелкните Отладка > Начать отладку в строке меню.

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

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

  • Якорь с перетаскиванием точек : для перемещения панели инструментов в место, где она ничего не блокирует
  • Продолжить : продолжить сеанс отладки
  • Step over : выполнить код построчно, пропуская функции
  • Шаг в : выполнить код построчно, переходя внутрь функций
  • Выйти : если уже внутри функции, эта команда выведет вас
  • Перезапустить : перезапускает сеанс отладки
  • Остановить : останавливает сеанс отладки.

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

Давайте снова начнем процесс отладки, нажав F5 . Убедитесь, что две точки останова все еще на месте.Когда вы устанавливаете точку останова, код останавливается на указанной строке. Эта строка не будет выполняться, если вы не нажмете Продолжить ( F5 ) или Step Over ( F10 ). Прежде чем что-либо делать, давайте взглянем на разделы, составляющие панель отладки:

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

Чтобы добавить выражение в раздел Watch , просто щелкните знак + и добавьте любое допустимое выражение JavaScript, например places.length . Когда отладчик приостанавливает работу, если ваше выражение находится в области видимости, значение будет распечатано. Вы также можете навести курсор на переменные, которые в настоящее время находятся в области видимости. Появится всплывающее окно с их значениями.

В настоящее время мест массив пуст. Нажмите любой элемент навигации, чтобы увидеть, как работает отладка.Например, Step over перейдет на следующую строку, а Step into перейдет к функции addPlace . Потратьте немного времени, чтобы ознакомиться с элементами управления.

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

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

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

  1. в массиве несколько пробелов — то есть мест [0] и мест [2] — это неопределенных
  2. свойство numType отображает , четное для нечетных значений идентификатора .

А пока просто завершите сеанс отладки. Мы исправим их в следующем разделе.

Отладочные тесты с Mocha

Откройте test / placesTest.js и просмотрите код, написанный для тестирования кода в places.test . Если вы никогда раньше не использовали Mocha, вам необходимо сначала установить его глобально, чтобы запускать тесты.

 
npm install -g mocha


мокко
  

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

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

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

Просто выберите Тесты мокко .Будет вставлена ​​следующая конфигурация:

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

Настройки по умолчанию в порядке. Вернитесь в раскрывающийся список и выберите Mocha Tests . Вам нужно будет закомментировать последние три строки, которые вы добавили в местах.js ; в противном случае тесты не пройдут должным образом. Вернитесь к placesTest.js и добавьте точку останова в строке непосредственно перед тем местом, где произошел первый сбой теста. Это должна быть седьмая строка, где написано:

.

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

Не забудьте добавить выражение places.length в секцию наблюдения. Нажмите кнопку Play , чтобы начать сеанс отладки.

На старте теста мест.длина должна читаться как ноль. Если вы нажмете Шаг за , разрядов. Длина читает 2, но было добавлено только одно место. Как это может быть?

Перезапустите сеанс отладки и на этот раз используйте Step в , чтобы перейти к функции addPlace . Отладчик переместит вас на places.js . Значение раз. Длина по-прежнему равно нулю. Щелкните Step over , чтобы выполнить текущую строку.

Ага! Стоимость мест.length просто увеличен на 1, но мы ничего не добавили в массив. Проблема вызвана оператором ++ , который изменяет длину массива. Чтобы исправить это, просто замените строку на:

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

Таким образом, мы можем безопасно получить значение id без изменения значения разрядов. Длина . Пока мы все еще находимся в режиме отладки, давайте попробуем исправить другую проблему, когда свойству numType присвоено значение , даже , а id — 1.Проблема, похоже, заключается в выражении модуля внутри оператора if:

Давайте проведем небольшой эксперимент с помощью консоли отладки. Начните вводить правильное выражение для , если оператор :

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

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

Перезапустите сеанс отладки и нажмите Продолжить , чтобы пропустить текущую точку останова.Первый тест «может добавить место» сейчас проходит. Но второй тест — нет. Чтобы исправить это, нам нужна еще одна точка останова. Удалите текущую и поместите новую точку останова в строку 16, где написано:

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

Начать новый сеанс отладки:

Вот! Посмотрите раздел Variables . Еще до начала второго теста мы обнаруживаем, что массив мест уже содержит данные, созданные первым тестом.Это явно испортило наш текущий тест. Чтобы исправить это, нам нужно реализовать какую-то функцию setup , которая сбрасывает массив размещает для каждого теста. Для этого в Mocha просто перед тестами добавьте следующий код:

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

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

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

Отладка JavaScript с помощью отладчика Chrome

Теперь, когда вы познакомились с основами отладки JavaScript в VS Code, мы увидим, как отлаживать несколько более сложный проект с помощью расширения Debugger for Chrome.Просто откройте панель рынка через панель действий. Найдите расширение и установите его.

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

  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', порт);
});
  

Весь код на стороне клиента находится в общедоступной папке . Зависимости проекта включают Semantic-UI-CSS, jQuery, Vanilla Router, Axios и Handlebars. Вот как выглядит проект при запуске с npm start . Вам нужно будет открыть URL localhost: 3000 в браузере, чтобы просмотреть приложение.

Попробуйте добавить новое место. Когда вы это сделаете, вы увидите, что ничего не происходит. Очевидно, что-то не так, так что пора заглянуть под капот. Прежде чем начать сеанс отладки, мы сначала рассмотрим код. Откройте public / index.html . В настоящее время мы фокусируемся на этом разделе:

 





  

Если быстро взглянуть, код окажется правильным.Значит, проблема должна быть в app.js . Откройте файл и проанализируйте там код. Ниже приведены разделы кода, на которые следует обратить внимание. Не торопитесь, чтобы прочитать комментарии, чтобы понять код.

 
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}));
    $ ('форма'). форма ('очистить');
    вернуть ложь;
  });
});
  

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

  placesTable.html (tableHtml);
  

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

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

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

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

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

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

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

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

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

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

.

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

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

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

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

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

  
  

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

Теперь работает! Отличная работа по исправлению очередной ошибки без 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 как профессионал!

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2021 © Все права защищены. Карта сайта