VSCode史詩(shī)級(jí)更新，可以無(wú)縫調(diào)試瀏覽器了。下面本篇文章就來(lái)帶大家了解一下這個(gè)功能，看看如何使用，以及原理淺析，希望對(duì)大家有所幫助！

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

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

并且更重要的是，其僅能提供最基本的控制臺(tái)功能，其他的諸如 network，element 是無(wú)法查看的，我們?nèi)匀恍枰綖g覽器中查看。【推薦學(xué)習(xí)：《vscode教程》】

這是個(gè)什么功能

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

效果截圖：

（edge devtools）

（debug console）

如何使用

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

{   "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}"     }   ] }

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

原理

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

你可以通過(guò) chrome devtool protocol 拿到很多信息，比如上面提到的 network 請(qǐng)求。

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

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