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 等各種客戶端一應俱全。