Эпическое обновление, VSCODE теперь может легко отлаживать браузер!

алгоритм Visual Studio Code

16.07.2021 Microsoft выпустила блог, посвященный этой функции, VSCODE — это круто!

Перед этим, если вы хотите отлаживать хром или край в vscode, вам нужно использовать Chrome Debugger или расширение Microsoft Edge Debugger, два расширения vscode.

И что еще более важно, он может обеспечить только самые основные консольные функции.Другие, такие как сеть и элемент, не могут быть просмотрены.Нам все равно нужно просмотреть его в браузере.

что это за функция

После обновления можем прямо в vscodeopen linkв хроме или краю, иВыполните почти все распространенные функции отладки, такие как просмотр элемента, сети и т. д., прямо в vscode..

Скриншот эффекта:

(пограничные инструменты разработки)

(консоль отладки)

как использовать

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

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Вам необходимо изменить такие параметры, как url ​​и webRoot, в соответствии с вашей собственной ситуацией.

принцип

Принцип на самом деле аналогичен расширению отладчика Chrome. Также на основе протокола Chrome devtool сборкассылка на веб-сокет. Взаимодействуйте, отправляя отформатированные данные json, чтобы vscode мог динамически получать некоторую информацию во время выполнения. Например, запросы, отправленные сетевыми потоками браузера, и информация об узле DOM.

ты можешь пройтиchrome devtool protocolПолучите много информации, такой как сетевой запрос, упомянутый выше.

Поскольку это двусторонняя ссылка, установленная веб-сокетом, также легко изменить dom в VSCODE, чтобы вызвать модификации браузера. Нам нужно только отправить данные JSON в браузер (сервер веб-сокетов) через веб-сокет после работы в VSCODE (клиент веб-сокета). Браузер выполнит некоторые операции в соответствии с полученными данными JSON с точки зрения эффекта.Это ничем не отличается от ручной работы пользователя непосредственно в браузере.

Стоит отметить, что существует множество клиентов протокола chrome devtool, не только клиенты NodeJS, но и различные клиенты, такие как Python, Java и PHP.

Более

Категории