2021-07-16 微軟發(fā)布了一篇博客專門介紹了這個功能，VSCODE 牛逼！

在此之前，你想要在 vscode 內(nèi)調(diào)試 chrome 或者 edge 需要借助于 Chrome Debugger 或者 the Microsoft Edge Debugger extension 這兩款 vscode 擴(kuò)展。

并且更重要的是，其僅能提供最基本的控制臺功能，其他的諸如 network，element 是無法查看的，我們?nèi)匀恍枰綖g覽器中查看。

這是個什么功能

更新之后，我們可以直接在 vscode 中 open link in chrome or edge，并且「直接在 vscode 內(nèi)完成諸如查看 element，network 等幾乎所有的常見調(diào)試需要用到的功能」。

效果截圖：

（edge devtools）

（debug console）

如何使用

使用方式非常簡單，大家只需要在前端項目中按 F5 觸發(fā)調(diào)試并進(jìn)行簡單的配置即可。這里給大家貼一份 lauch.json 配置，有了它就可以直接開啟調(diào)試瀏覽器了。

?

大家需要根據(jù)自己的情況修改 url 和 webRoot 等參數(shù)。

?

原理

原理其實和 chrome debugger 擴(kuò)展原理類似。也是基于 Chrome 的 devtool 協(xié)議，建立 「websocket 鏈接。通過發(fā)送格式化的 json 數(shù)據(jù)進(jìn)行交互」，這樣 vscode 就可以動態(tài)拿到運行時的一些信息。比如瀏覽器網(wǎng)絡(luò)線程發(fā)送的請求以及 DOM 節(jié)點信息。

你可以通過 「chrome devtool protocol」 拿到很多信息，比如上面提到的 network 請求。

由于是 websocket 建立的雙向鏈接，因此在 VSCODE 中改變 dom 等觸發(fā)瀏覽器的修改也變得容易。我們只需要在 VSCODE（websocket client） 中操作后通過 websocket 發(fā)送一條 JSON 數(shù)據(jù)到瀏覽器（websocket server）即可。瀏覽器會根據(jù)收到的 JSON 數(shù)據(jù)進(jìn)行一些操作，從效果上來看「和用戶直接在手動在瀏覽器中操作并無二致?！?/strong>

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

更多

• Easier browser debugging with Developer Tools integration in Visual Studio Code
• vscode-js-debug
• chrome devtools-protocol
• Microsoft Edge (Chromium) DevTools Protocol overview