VSCode可無縫調試瀏覽器了，快來看看使用方法和原理淺析吧！

VSCode史詩級更新，可以無縫偵錯瀏覽器了。以下這篇文章就來帶大家了解這個功能，看看如何使用，以及原理淺析，希望對大家有幫助！

2021-07-16 微軟發布了一篇部落格專門介紹了這個功能，VSCODE 牛逼！

在此之前，你想要在 vscode 內調試 chrome 或 edge 需要藉助於 Chrome Debugger 或 the Microsoft Edge Debugger extension 這兩款 vscode 擴充功能。

並且更重要的是，其只能提供最基本的控制台功能，其他的諸如 network，element 是無法查看的，我們仍然需要到瀏覽器中查看。 【推薦學習：《vscode教學》】

這是個什麼功能

更新之後，我們可以直接在vscode 中open link in chrome or edge，並且直接在vscode 內完成諸如查看element，network 等幾乎所有的常見調試需要用到的功能。

效果截圖：

（edge devtools）

（debug console）

如何使用

#使用方式非常簡單，大家只需要在前端專案中按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 debugger 擴充原理類似。也是基於 Chrome 的 devtool 協議，建立 websocket 連結。透過傳送格式化的 json 資料進行互動，這樣 vscode 就可以動態拿到執行時間的一些資訊。例如瀏覽器網路線程發送的請求以及 DOM 節點資訊。

你可以透過 chrome devtool protocol 拿到很多訊息，例如上面提到的 network 請求。

由於是 websocket 建立的雙向鏈接，因此在 VSCODE 中改變 dom 等觸發瀏覽器的修改也變得容易。我們只需要在 VSCODE（websocket client） 中操作後透過 websocket 發送一條 JSON 資料到瀏覽器（websocket server）即可。瀏覽器會根據收到的 JSON 資料進行一些操作，從效果上來看和使用者直接在手動在瀏覽器中操作並無二致。

值得注意的，chrome devtool protocol 的客戶端有很多，不只是 NodeJS 客戶端，Python，Java，PHP 等各種客戶端一應俱全。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是VSCode可無縫調試瀏覽器了，快來看看使用方法和原理淺析吧！的詳細內容。更多資訊請關注PHP中文網其他相關文章！