史詩級更新，VSCODE 可無縫調試瀏覽器了！
2021-07-16 微軟發佈了一篇博客專門介紹了這個功能，VSCODE 牛逼！
在此之前，你想要在 vscode 內調試 chrome 或者 edge 需要藉助於 Chrome Debugger 或者 the Microsoft Edge Debugger extension 這兩款 vscode 擴展。
並且更重要的是，其僅能提供最基本的控制檯功能，其他的諸如 network，element 是無法查看的，我們仍然需要到瀏覽器中查看。
這是個什麼功能
更新之後，我們可以直接在 vscode 中 open link in chrome or edge，並且**「直接在 vscode 內完成諸如查看 element，network 等幾乎所有的常見調試需要用到的功能」**。
效果截圖：
如何使用
使用方式非常簡單，大家只需要在前端項目中按 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 等各種客戶端一應俱全。
更多
-
Easier browser debugging with Developer Tools integration in Visual Studio Code
-
vscode-js-debug
-
chrome devtools-protocol
-
Microsoft Edge (Chromium) DevTools Protocol overview
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/x55bIF429l3HQrSv4FgHww