Abr@X@bra.ru
Debugger в VSCode

Debugger в VSCode

24.01.2019
458
На css-tricks.com Крис Койер (Chris Coyier) написал пост «Как перестать использовать console.log () и начать использовать отладчик вашего браузера».

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

Отладка браузерных приложений в VSCode

VS Code может отлаживать браузерные приложения с довольно большой гибкостью. Он использует отладчик Chrome и тот же порт / протокол, что и инструменты разработчика Chrome.

VS Code хранит конфигурации отладки в файле .vscode / launch.json, который называется файлом «Launch Configuration». Чтобы создать файл конфигурации запуска, вам нужно перейти в Debug Explorer в VSCode и щелкнуть значок шестеренки.



Затем выберите отладчик Chrome. Он поставляется по умолчанию с VS Code. Вы можете установить другие отладчики из VS Code Extension Marketplace.



Затем VS Code пытается сгенерировать конфигурацию запуска, которая подходит для вашего проекта. Допустим, у нас есть простое приложение, в котором есть index.html, site.css и index.jsfile. VS Code генерирует следующую конфигурацию запуска.

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

Это достаточно близко, но «URL» может быть неправильным. Я запускаю простые статические сайты, подобные этой, с помощью инструмента «Lite Server», который вы можете установить с npm…

npm install -g lite-server

Теперь вы можете запустить lite-сервер из той же директории, где находится ваш HTML-файл.

lite-server

По умолчанию lite-server запускает сайт на порту 3000. Поэтому нам нужно обновить файл launch.config.

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

Теперь мы можем нажать зеленую кнопку в проводнике отладки и установить точку остановки в VS Code.



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

Вы можете использовать VS Code «Debug Console» для выполнения команд так же, как и в консоли Chrome devtools.


В качестве дополнительного бонуса, если вы зайдете в Chrome и откроете инструменты разработчика, вы увидите, ту же картину, что и в VS Code.


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


Отладка Angular, React и Vue с помощью VSCode

Большинство из нас используют что-то вроде Angular, React или Vue (в алфавитном порядке - расслабся), и эти библиотеки работают вместе с Webpack, объединения и минимизации JavaScript. Вся отладка должна выполняться через SourceMaps.

К счастью, команда VS Code собрала готовые рецепты для всех основных структур JavaScript…

Все эти конфигурации запуска относительно просты. В основном это просто настройка порта, на котором запущено ваше приложение.

Я столкнулся с некоторыми проблемами с Vue и Source Maps, которые требовали относительно творческой настройки, которую я сам никогда бы не понял, но даже у Vue это задокументировано. Как это делает Webpack и зачем ему нужен собственный протокол и три слеша. ТРИ!

{   
    "type": "chrome",   
    "request": "launch",   
    "name": "vuejs: chrome",   
    "url": "http://localhost:8080",   
    "webRoot": "${workspaceFolder}/src",   
    "breakOnLoad": true,   
    "sourceMapPathOverrides": {     
        "webpack:///./src/*": "${webRoot}/*"   
    }
}

Но теперь я могу писать код Vue с помощью TypeScript и отладить его с помощью VS Code, что очень круто. Кажется, что это не должно работать, или, может быть, это просто слишком хорошо, чтобы быть правдой.


Отлаживай и будь счастлив

Нет ничего плохого в использовании console.log, но Крис прав: правильный опыт разработки предполагает изучение и использование вашего отладчика. Я просто думаю, что этот инструмент лучше, если вы будете использовать отладчик в своем редакторе вместо браузера.

Поэтому потратьте минуту на настройку VS Code для отладки вашего приложения.





Debugger, VSCode
Читайте также:
Использование svg в vue.js без плагинов

Использование svg в vue.js без плагинов

Крутизну SVG сложно преувеличить, однако с ее использованием связаны определенные трудности.
Читать
Знакомимся с Emmet

Знакомимся с Emmet

Всем привет! В этой статье мы с вами познакомимся с одним из наиболее популярных плагинов, предназначенных для «быстрого...
Читать
Геометрические фигуры на CSS

Геометрические фигуры на CSS

Подборка, как нарисовать различные геометрические фигуры одним элементом HTML.
Читать