Как дебажить javascript

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

• Если вам нужно декомпозировать код в исходном файле TypeScript, JSX или .vue и вы не можете это сделать, убедитесь, что ваша среда настроена правильно, как описано в разделе Устранение неисправностей.
• Если вам нужно декомпозировать код в файле с компиляцией в код на языке программирования JavaScript (например, app-bundle.js), но сделать это не удается, удалите файл сопоставления источника filename.js.map.

Устранение неполадок с точками останова и картами источников

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

• Закройте все экземпляры браузера, включая расширения Chrome (используя диспетчер задач), чтобы можно было запускать браузер в режиме отладки.
• Обязательно запустите браузер в режиме отладки.
• Убедитесь, что файл сопоставителя с исходным кодом содержит правильный относительный путь к исходному файлу и не включает неподдерживаемые префиксы, такие как webpack:///, которые не позволяют отладчику Visual Studio найти исходный файл. Например, ссылку, подобную webpack:///.app.tsx, можно исправить на ./app.tsx. Это можно сделать вручную в файле сопоставителя с исходным кодом (что удобно для тестирования) или с помощью пользовательской конфигурации сборки. Дополнительные сведения см. в разделе Создание сопоставителя с исходным кодом для отладки.

Либо, если вам нужно декомпозировать код в исходном файле (например app.tsx), но сделать это не удается, попробуйте использовать оператор debugger; в исходном файле или установите точки останова в инструментах для разработчиков в Chrome (или средства F12 для Microsoft Edge).

Создание исходных карт для отладки

В Visual Studio можно использовать и создавать сопоставления источника для исходных файлов JavaScript. Такая возможность часто нужна, когда исходный код минифицирован или создан в транспайлере, например в TypeScript или Babel. Доступные варианты зависят от типа проекта.

• Проект TypeScript в Visual Studio по умолчанию автоматически создает сопоставления источника. Дополнительные сведения см. в разделе Настройка сопоставлений источника с помощью файла tsconfig.json.
• В проекте JavaScript сопоставления источника можно создать с помощью средства упаковки (например, webpack) и компилятора (например, TypeScript или Babel), которые вы можете добавить в проект. Вместе с компилятором TypeScript необходимо добавить еще и файл tsconfig.json и установить опцию компилятора sourceMap . Пример такой операции на основе базовой конфигурации webpack вы найдете в руководстве по созданию приложения Node.js с использованием React.

Если вы используете сопоставители с исходным кодом впервые, сначала прочтите статью Introduction to JavaScript Source Maps (Введение в сопоставители с исходным кодом JavaScript).

Чтобы настроить дополнительные параметры для сопоставлений источника, используйте файл tsconfig.json или параметры проекта для проекта TypeScript, но не оба метода сразу.

Чтобы включить отладку с помощью Visual Studio, необходимо убедиться в правильности ссылок на исходный файл в созданном сопоставителе с исходным кодом (может потребоваться тестирование). Например, если вы используете webpack, ссылки в файле сопоставителя с исходным кодом включают префикс webpack:///, который не позволяет Visual Studio найти исходный файл TypeScript или JSX. В частности, при исправлении для отладки, ссылку на исходный файл (например, app.tsx) следует изменить с webpack:///./app.tsx на ./app.tsx, что включает отладку (путь относительно вашего исходного файла). В следующем примере показано, как настроить сопоставители с исходным кодом в webpack, который является одним из наиболее распространенных средств увязки, чтобы они работали с Visual Studio.

(Только для webpack.) Если точка останова устанавливается в файле TypeScript или JSX (а не в транскомпилированном файле JavaScript), необходимо обновить конфигурацию webpack. Например, в файлwebpack-config.jsможет потребоваться заменить следующий код:

 output: < filename: "./app-bundle.js", // This is an example of the filename in your project >, 

 output: < filename: "./app-bundle.js", // Replace with the filename in your project devtoolModuleFilenameTemplate: '[resource-path]' // Removes the webpack:/// prefix >, 

Это настройка только для разработки, позволяющая отладку кода на стороне клиента в Visual Studio.

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

Настройка сопоставлений источника с помощью файла tsconfig.json

Если вы добавите в проект файл tsconfig.json, Visual Studio будет считать корневой каталог проектом TypeScript. Чтобы добавить файл, щелкните проект правой кнопкой мыши в обозревателе решений и последовательно выберите Добавить > Новый элемент > JSON-файл конфигурации TypeScript. Это действие добавит в проект файл tsconfig.json, аналогичный представленному ниже.

< "compilerOptions": < "noImplicitAny": false, "module": "commonjs", "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es5" >, "exclude": [ "node_modules" ] > 

Параметры компилятора для файла tsconfig.json

• inlineSourceMap: выведите один файл с исходными картами вместо создания отдельной карты источника для каждого исходного файла.
• inlineSources: выведите источник вместе с исходными картами в одном файле; требуется задать inlineSourceMap или sourceMap.
• mapRoot: указывает расположение, в котором отладчик должен находить файлы карты источника (MAP) вместо расположения по умолчанию. Используйте этот флаг, если во время выполнения файлы .map и файлы .js должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов .map.
• sourceMap: создает соответствующий ФАЙЛ MAP .
• sourceRoot: указывает расположение, в котором отладчик должен находить файлы TypeScript вместо исходных расположений. Используйте этот флаг, если в ходе время выполнения и разработки исходные файлы должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов.

Дополнительные сведения о параметрах компилятора вы найдете на странице с параметрами компилятора в справочнике по TypeScript.

Настройка сопоставителей с исходным кодом с помощью параметров проекта (TypeScript project)

Также вы можете настроить параметры сопоставления источника в свойствах проекта, щелкнув проект правой кнопкой мыши и выбрав Проект > Свойства > Сборка TypeScript > Отладка.

Здесь доступны следующие параметры проекта.

• Создание исходных карт (эквивалентно sourceMap в tsconfig.json): создает соответствующий файл MAP .
• Укажите корневой каталог исходных карт (эквивалент mapRoot в tsconfig.json): указывает расположение, в котором отладчик должен находить файлы карты вместо созданных расположений. Используйте этот флаг, если во время выполнения файлы .map и .js должны находиться в разных местах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов сопоставления.
• Укажите корневой каталог файлов TypeScript (эквивалентный sourceRoot в tsconfig.json): указывает расположение, в котором отладчик должен находить файлы TypeScript вместо исходных расположений. Используйте этот флаг, если в ходе выполнения и разработки исходные файлы должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов.

Отладка JavaScript в динамических файлах с помощью Razor (ASP.NET)

Начиная с Visual Studio 2019, Visual Studio обеспечивает отладку только для Chrome и Microsoft Edge (Chromium).

Однако невозможно автоматически использовать точки останова в файлах, созданных с синтаксисом Razor (cshtml, vbhtml). Для отладки файлов такого типа вы можете применить два следующих подхода.

• Поместите инструкцию debugger; там, где необходимо прерывание: эта инструкция останавливает выполнение динамического скрипта и запускает отладку сразу же в процессе его создания.
• Загрузите страницу и откройте динамический документ в Visual Studio: необходимо открыть динамический файл во время отладки, задать точку останова и обновить страницу для работы этого метода. В зависимости от используемого браузера (Chrome или Microsoft Edge (Chromium)) этот файл можно найти следующими способами:
  • Для Chrome откройте пункты меню Обозреватель решений > Документы скриптов > Имя_нужной_страницы.

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

  Изучите, как отладить JavaScript с помощью Chrome DevTools

  Забудьте об отладке при помощи console.log навсегда! Изучите, как использовать точки останова для отладки кода в инструментах разработчика Chrome

  Published in
  6 min read
  Sep 20, 2017

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

  Эта статья о правильном пути отладки! Вы узнаете, как использовать инструменты разработчика Chrome для настройки точек останова и исследования кода. Такой подход часто наиболее эффективный способ поиска и исправления ошибок в коде.

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

  Шаг 1: Воспроизводим ошибку

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

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

  • Вот веб-страница, с которой мы будем работать в рамках этой статьи. Открывайте её в новой вкладке: ДЕМО.
  • В демо для Number 1 введите 5 .
  • Введите 1 для Number 2.
  • Нажмите Add Number 1 and Number 2.
  • Посмотрите на метку ниже инпутов и кнопки. Она говорит, что 5 + 1 = 51 .

  Упс. Это неверный результат. Результат должен быть равен 6 . Это и есть ошибка, которую мы собираемся исправить.

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

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

  • Вернитесь к демо и откройте DevTools, нажав Command+Option+I (Mac) или Control+Shift+I (Windows, Linux).
  • Перейдите во вкладку Sources.
  • Нажмите Event Listener Breakpoints, чтобы развернуть меню. DevTools раскрывает список категорий событий, таких как Animation и Clipboard.
  • Разверните категорию событий Mouse.
  • Выберите click.
  • Вернувшись к демо, снова нажмите Add Number 1 and Number 2. DevTools приостановит работу и выделит строку кода в панели Sources:

  function onClick() 

  Когда вы выбираете click, вы устанавливаете точку останова на основе всех событий click . Когда происходит клик по любой ноде и эта нода имеет обработчик события click , DevTools автоматически останавливает исполнение на первой строке кода обработчика click для этой ноды.

  Шаг 3: Исследуем код

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

  • На панели Sources в DevTools нажмите Step into next function call.

  Эта кнопка позволяет вам осуществить выполнение функции onClick() по одной строке за раз. DevTools остановит выполнение и выделит следующую строку кода:

  if (inputsAreEmpty()) 

  • Теперь нажмите кнопку Step over next function call.

  Это говорит DevTools выполнить функцию inputAreEmpty() , не заходя в неё. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит из-за того, что inputAreEmpty() расценивается как false , поэтому блок кода оператора if не выполняется.

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

  Шаг 4: Устанавливаем другую точку останова

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

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

  label.textContent = addend1 + '+' + addend2 + '=' + sum;

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

  • Нажмите кнопку Resume script execution:

  Сценарий будет выполняться до тех пор, пока не встретит точку останова.

  • Посмотрите на уже выполненные строки кода в updateLabel() . DevTools выводит значения addend1 , addend2 и sum .

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

  Шаг 5: Проверяем значения переменных

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

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

  • На панели Sources DevTools нажмите Watch. Секция раскроется.
  • Нажмите Add Expression.
  • Введите typeof sum .
  • Нажмите Enter. DevTools покажет: typeof sum: «string» . Значение справа от двоеточия является результатом вашего Watch Expression.

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

  Вторая альтернатива в DevTools для console.log() — это консоль. Используйте консоль для взаимодействия с произвольными операторами JavaScript. При отладке разработчики обычно используют консоль для перезаписи значений переменных. В вашем случае консоль может нам помочь проверить возможные пути исправления обнаруженной ошибки. Попробуйте прямо сейчас:

  • Если у вас не открыта консоль, откройте её нажатием Escape. Она откроется в нижней части окна DevTools.
  • В консоли введите parseInt(addend1) + parseInt(addend2) .
  • Нажмите Enter. DevTools вычислит команду и выведет 6 — ожидаемый результат.

  Шаг 6: Исправляем

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

  • В редакторе кода на панели Sources DevTools замените var sum = addend1 + addend2 на var sum = parseInt(addend1) + parseInt(addend2); . Это на одну строку выше места вашей остановки.
  • Нажмите Command+S (Mac) или Control+S (Windows, Linux) для сохранения изменений. Фон кода изменится на красный, сигнализируя, что сценарий был изменен в DevTools.
  • Нажмите Deactivate breakpoints.

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

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

  Как дебажить js в браузере

  Самый популярный инструмент для отладки кода в браузере — Chrome DevTools.

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

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

  Для запуска отладчика (на примере браузера Chrome) необходимо нажать клавишу F12, или выбрать интересующий элемент на страницы, щелкнуть по нему правой кнопкой мыши и выбрать — Inspect.

  Очень хорошо раскрыт вопрос в ролике от Никиты Михайлова , из наставников Хекслета по направлению «Верстальщик».

  Как поймать баг в коде: отладка в браузере

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

  Что такое отладка

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

  Варварская отладка

  Самый примитивный вариант отладки — добавить в код на JavaScript метод console.log(), поместив в скобки нужные данные для отладки. Console.log() — это просто способ вывести в консоль какой-нибудь текст.

  Например, внутри функции можно сказать: console.log(‘Вызвана такая-то функция’) — и в нужный момент мы увидим, что функция вызвалась (или нет).

  Минус этого подхода в том, что в коде появляется много отладочного мусора. А ещё, если мы не предусмотрели логирование для какой-то функции, то мы не поймаем в ней ошибку.

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

  Что нужно для отладки

  Для несложных проектов на JavaScript проще всего использовать встроенный отладчик в браузере Google Chrome. Единственное ограничение — он работает только с файлами скриптов, а не со встроенным в страницу кодом. Это значит, что если код скрипта находится внутри HTML-файла внутри тега , то отладка не сработает.

  Чтобы открыть панель отладки в Chrome, нажимаем ⌘+⌥+I и переходим на вкладку Sources (Источники):

  

  Открываем скрипт

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

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

  Открываем любой текстовый редактор, например Sublime Text, вставляем код скрипта и сохраняем файл как temp.js. Имя может быть любым, а после точки всегда должно стоять js — так браузер поймёт, что перед нами скрипт.

  После этого в новом файле вставляем шаблон пустой HTML-страницы и подключаем наш скрипт — добавляем в раздел такую строку:

  Получиться должно что-то вроде такого:

  Сохраняем этот код как HTML-файл, например index.html, и кладём в ту же папку, что и скрипт. Теперь заходим в папку и дважды щёлкаем по HTML-файлу, чтобы открыть эту страницу в браузере:

  

  На странице ничего нет, но нам нужна не страница, а скрипт, поэтому находим слева наш файл temp.js и нажимаем на него — откроется код скрипта. Теперь можно начинать отладку:

  

  Добавляем точки остановки

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

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

  Брейкпоинт нужен для того, чтобы выполнить скрипт по шагам, начиная с первой команды. Чтобы его установить, нажимаем на номер строки с первой командой — в нашем случае это строка 2:

  

  Обновим страницу и увидим, что скрипт начал работу и остановился. Но он остановился не на второй строке, а на шестой — всё потому, что это первая строка в скрипте, где происходит какое-то действие. Дело в том, что просто объявление новых переменных не влияет на работу скрипта, поэтому он ищет первую команду с действием. В нашем случае — это цикл for:

  

  Пошаговая отладка

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

  

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

  Добавляем переменные для отслеживания

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

  Чтобы добавить переменную и видеть её значение во время выполнения, в панели отладки в разделе Watch нажимаем плюсик, вводим имя переменной, выбираем её из списка и нажимаем энтер:

  

  Теперь видно, что на этом шаге значение переменной a равно нулю:

  

  Точно так же добавим остальные переменные: i, b, c. Так мы увидим, что первые два цикла только начались, а внутренний прошёл уже три итерации:

  

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

  

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

  Отладка брейкпойнтами

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

  1. Нажимаем снова на строку 2 и убираем предыдущую точку остановки.
  2. Ставим брейкпоинт на строку 20 — там, где происходит вывод решения в консоль.
  3. Нажимаем F8.

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

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

  Зачем это всё

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

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

  Веб-разработка — это новый чёрный

  На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.

  Читать:

  Как сделать динамическую рамку в автокаде