[Внешний интерфейс] Подробное объяснение отладки точек останова vue+vscode

Debug

предисловие

  • Не из коробки, только для удовлетворения любопытства, пользовательской настройки точки останова в сложных проектах и ​​без помощи или немедленной отладки точки останова Baidu в следующем проекте
  • Она включает в себя широкий спектр, требует определенного опыта и не слишком углублена везде (я тоже еда)
  • Если вы ищете везде, но не можете решить: vscode не может подключиться к странице, сообщает, что точка останова не проверена (серый пустой кружок), точка останова смещается на другие строки, расположение точки останова в момент ее фактического разрыва неверно, и выполнение одноэтапно пропущено Перейдите в странное место, тогда здесь может решить проблему

Как поставить точку останова в js

Как показано на рисунке ↑, разбейте точку непосредственно на панели источников.

Если вы разобьете точку на пустой строке в строке 6, вы увидите анимацию, показывающую, как точка останова перемещается со строки 6 на строку 7. Суть расширения отладчика vscode заключается в том, чтобы общаться с этим и возвращать результаты в свой собственный пользовательский интерфейс.

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

SourceMap

Объяснение учителя Руан Ифэн:Подробная карта исходного кода JavaScript

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

  1. Подача несжатых исходных файлов и файлов SourceMap в браузер
  2. Когда браузер запускает окончательную версию кода js, он находит расположение соответствующего исходного кода через SourceMap.Если соответствующий исходный код отмечен пользователем точкой останова, прерывание будет прервано.

в то же время:

  1. Только после того, как вы откроете инструмент разработчика по F12, браузер загрузит файл SourceMap, указанный финальной версией кода (так что на скорость загрузки обычных пользователей это в принципе не влияет), а затем загрузит исходный код по инструкции файла SourceMap. Файл, как показано ниже↓

2. В онлайн-среде файл SourceMap тоже можно положить на сервер, но поставить исходный код на сервер нельзя. То есть SourceMap указывает на расположение исходного файла как/a.js, браузер загружается协议://域名/a.js, судя по всему такого файла нет в сети. Но мы можем добавить сопоставление папок через браузер Sources->Filesystem, которое сопоставляется с исходным кодом локального проекта для отладки точки останова. Конечно, окно браузера даст соответствующую обратную связь с пользовательским интерфейсом↓ 3. В зависимости от качества SourceMap (например, в webpack есть несколько методов генерации, с разным уровнем детализации) может отсутствовать какая-то информация о сопоставлении, а код везде указывает на одно и то же расположение источника после модулей сливаются и т.

Настроить SourceMap в vue

фактически устанавливается в конфигурации веб-пакетаdevtool:'source-map'опции. Конкретное местоположение здесь совершенно другое.Вы можете быть проектом, инициализированным @vue/cli, проектом, созданным с использованием шаблона vue веб-пакета, проектом, реорганизованным руководителем проекта и т. д. Здесь, пожалуйста, узнайте, какой веб-пакет настроен.

Примечание: этоdevtool:'source-map'Можно сказать, что это необходимо.Другие способы генерации SourceMap подходят не для брейкпоинтов, а для анализа, иначе будут разные странности в силу вышеперечисленных причин.

Локальный сервер предоставляется webpack

В наиболее полной настройке SourceMap вы должны увидеть эту структуру (a.js добавлен мной, не беспокойтесь)↓1. Скажите это первымwebpack://, это настраиваемый протокол уровня сетевого приложения webpack, сhttp://а такжеhttps://Как правда.
2. В этом пользовательском протоколе прикладного уровня имя домена (аналогично ftp) может быть опущено, т.е.webpack:///路径. Кроме того.действительно папкаимя, не представляет текущий каталог (в протоколе httphttps://juejin.im/timelineа такжеhttps://juejin.im/./timelineто же самое)
3. Как показано на рисунке,webpack:///srcобычно это наш оригинальный файл vue,webpack:///./srcЭто некоторые обработанные ресурсы, такие как vue и png
4. Локальный сервер webpack помещает скомпилированные ресурсы прямо в память, и вы не можете видеть скомпилированные локальные файлы. Таким образом, вам может потребоваться сначала выполнить сборку, чтобы увидеть наш окончательный пакет.app.jsи егоapp.js.mapчто-то ↓
(1)app.jsПоследняя строка в файле будет//# sourceMappingURL=app.js.map, когда мы открываем инструменты разработчика, браузер загружает файл карты.
(2)app.js.mapДолжны быть такие строки:

  "version":3,
  "sources":[
    "webpack:///src/app.js",
    "webpack:///./src/app.js",
    ...
  ]

То есть эта SourceMap может отображать скомпилированный код вsourcesСоответствующие расположения нескольких исходных файлов js, указанные в .
(3) Браузер можно рассматривать как мощную IDE.В настоящее время мы можем найти эти файлы на исходной панели инструмента разработчика и установить точки останова для отладки.

Отладка в vscode

По сути, отладка vscode заключается в подключении браузера через расширение отладки для получения отладочной информации, и в то же время, через наш собственный пользовательский интерфейс и взаимодействие, мы не чувствуем, что используем вышеуказанные функции браузера. (требуется установкаDebugger for Chromeэто расширение)

Подготовительные работы, необходимые для хромирования

Запустите собственную командную строку или ярлык, добавьте параметры запуска--remote-debugging-port=9222, это чтобы хром открывался9222Порт отладки, наше расширение vscode будет получать отладочную информацию, предоставляемую браузером, через этот порт. Следующий vscode будет подключаться в методе присоединения, поэтому сначала запустите браузер, запустите проект vue локально и откройте целевую страницу.

Normally, if Chrome is already running when you start debugging with a launch config, then the new instance won't start in remote debugging mode.

Обратите внимание, что если вы запустили хром в обычном режиме, то запуск другого хрома не запустится в режиме удаленной отладки. Поэтому отключите все экземпляры Chrome в методе присоединения и снова запустите его в режиме удаленной отладки (например, указанные выше параметры, к которым можно получить прямой доступhttp://localhost:9222Посмотрим, будет ли ответ)

Обязательные параметры конфигурации

  • type — тип отладчика, используемый для этой конфигурации запуска. Каждое установленное расширение отладки вводит тип: node для встроенного отладчика Node, например, или php and go для расширений PHP и Go. Все расширения отладки регистрируют тип с помощью vscode, а vscode уведомляет различные расширения о необходимости работы в соответствии со значением установленного вами типа)
  • request - тип запроса данной конфигурации запуска. В настоящее время поддерживается запуск и присоединение. (В настоящее время разрешено только два значения. В нашем случае запуск означает запуск браузера для открытия целевой страницы и прикрепления; присоединение означает прямое подключение к текущая целевая страница браузера сервера)
  • имя — удобное для чтения имя, которое будет отображаться в раскрывающемся списке конфигурации запуска отладки (имя этой конфигурации. Оно фактически используется для переключения отладки нескольких разных конфигураций).

источник:Debugging

Общие необязательные параметры

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

  • URL-адрес: в конфигурации «запуск» он запустит Chrome по этому URL-адресу (целевой URL-адрес. Если это режим запуска, он напрямую запустит браузер, чтобы открыть эту страницу. Затем прикрепите эту страницу, что эквивалентно запуску разработчика инструменты на этой странице)
  • urlFilter: On an 'attach' config, or a 'launch' config with no 'url' set, search for a page with this url and attach to it. It can also contain wildcards, for example, "localhost:*/app" will match either "http://localhost:123/app" or "http://localhost:456/app", but not "stackoverflow.com". (URL-адрес выше может совпадать только точно, здесь разрешены подстановочные знаки, см. его пример)
  • sourceMaps: по умолчанию адаптер будет использовать исходные карты и исходные источники, когда это возможно. Вы можете отключить это, установив для sourceMaps значение false (по умолчаниюtrue. Может быть добавлен в файловую систему, как указано выше)
  • веб-корень: установить${webRoot}Переменная.${webRoot}это переменная, используемая настройками по умолчанию для следующих двух параметров, что делает параметр значимым
  • pathMapping: This property takes a mapping of URL paths to local paths, to give you more flexibility in how URLs are resolved to local files. "webRoot": "${workspaceFolder}" is just shorthand for a pathMapping like { "/": "${workspaceFolder}"} (На самом деле, функция в основном такая же, как и следующая, разница в основном заключается в разнице между человеческой «семантикой» и настройками по умолчанию. Это используется для обычного сопоставления файлов, а следующее используется для сопоставления файлов карт, но строгой разницы нет)
  • sourceMapPathOverrides: будет подробно описано ниже. Это можно просто понять как установить текущую директорию в файловую систему для сопоставления.

источник:vscode-chrome-debug

Переменная

  • ${workspaceFolder} - the path of the folder opened in VS Code
  • ${workspaceFolderBasename} - the name of the folder opened in VS Code without any slashes (/)
  • ${file} - the current opened file
  • ${relativeFile} - the current opened file relative to workspaceFolder
  • ${fileBasename} - the current opened file's basename
  • ${fileBasenameNoExtension} - the current opened file's basename with no file extension
  • ${fileDirname} - the current opened file's dirname
  • ${fileExtname} - the current opened file's extension
  • ${cwd} - the task runner's current working directory on startup
  • ${lineNumber} - the current selected line number in the active file
  • ${selectedText} - the current selected text in the active file
  • ${execPath} - the path to the running VS Code executable
  • ${defaultBuildTask} - the name of the default build task
Подробный пример Predefined variables examples

Supposing that you have the following requirements:

A file located at /home/your-username/your-project/folder/file.ext opened in your editor;

The directory /home/your-username/your-project opened as your root workspace.

So you will have the following values for each variable:

workspaceFolder−/home/your−username/your−project{workspaceFolder} - /home/your-username/your-project{workspaceFolderBasename} - your-project file−/home/your−username/your−project/folder/file.ext{file} - /home/your-username/your-project/folder/file.ext{relativeFile} - folder/file.ext relativeFileDirname−folder{relativeFileDirname} - folder{fileBasename} - file.ext fileBasenameNoExtension−file{fileBasenameNoExtension} - file{fileDirname} - /home/your-username/your-project/folder fileExtname−.ext{fileExtname} - .ext{lineNumber} - line number of the cursor selectedText−textselectedinyourcodeeditor{selectedText} - text selected in your code editor{execPath} - location of Code.exe

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

sourceMapPathOverrides

Установите способ отображения. Ниже приведены его настройки по умолчанию.

// Note: These are the mappings that are included by default out of the box, with examples of how they could be resolved in different scenarios. These are not mappings that would make sense together in one project.
// webRoot = /Users/me/project
"sourceMapPathOverrides": {
    "webpack:///./~/*": "${webRoot}/node_modules/*",       // Example: "webpack:///./~/querystring/index.js" -> "/Users/me/project/node_modules/querystring/index.js"
    "webpack:///./*":   "${webRoot}/*",                    // Example: "webpack:///./src/app.js" -> "/Users/me/project/src/app.js",
    "webpack:///*":     "*",                               // Example: "webpack:///project/app.ts" -> "/project/app.ts"
    "webpack:///src/*": "${webRoot}/*",                    // Example: "webpack:///src/app.js" -> "/Users/me/project/app.js"
    "meteor://💻app/*": "${webRoot}/*"                    // Example: "meteor://💻app/main.ts" -> "/Users/me/project/main.ts"
}

один из них${webRoot}это переменная с нашим пользовательским значением. Все, что вам нужно сделать, это убедиться,webpack:///Различные файлы могут быть правильно сопоставлены с файлами нашего каталога разработки.
Примечание. После настройки sourceMapPathOverrides исходная настройка по умолчанию становится недействительной (то есть переназначается); при наличии нескольких совпадений совпадающие, которые появляются позже, перезаписывают предыдущие.

Суммировать

Я сделал много этого, но на самом деле это означает что-то вроде этого:
1. Запустите в chrome режим удаленной отладки, сначала убедитесь, что вы знаете, какой порт может быть подключен с помощью vscode, убедитесь, что вы можете поставить точку останова в F12, и не будет никаких странных явлений.
2.vscode создает отладку, в launch.json нажмите добавить конфигурацию в правом нижнем углу, измените порт порта на порт, который вы начали выше
3. Установите параметр url или urlFilter (attach требует, чтобы у вас уже была открыта страница, соответствующая этому url. Способ запуска — автоматически открыть эту страницу для вас, большой разницы нет)
4. Задайте параметр webRoot, так как используется sourceMapPathOverrides по умолчанию.${webRoot}эта переменная
5. Подождите некоторое время, после присоединения к целевой странице нижняя полоса vscode изменит цвет, вот и все. Если после горячего обновления возникла проблема, обновите страницу
6. Важно понимать, что самая распространенная ошибка заключается в том, что webRoot и sourceMapPathOverrides не соответствуют рандомным настройкам. Вообще говоря, пока ваш проект vue имеет папку src в рабочем каталоге со структурой, такой как main.js и App.vue, для минимальной конфигурации требуется всего 6 параметров:

{
    "type": "chrome",
    "request": "attach",
    "name": "hello world",
    "port": 9222,
    "webRoot": "${workspaceFolder}/src",
    "url": "http://localhost:8080"
}
Категории