史詩(shī)級(jí)更新，VSCODE 可無(wú)縫調(diào)試瀏覽器了！
在此之前，你想要在 vscode 內(nèi)調(diào)試 chrome 或者 edge 需要借助于 Chrome Debugger 或者 the Microsoft Edge Debugger extension 這兩款 vscode 擴(kuò)展。
并且更重要的是，其僅能提供最基本的控制臺(tái)功能，其他的諸如 network，element 是無(wú)法查看的，我們?nèi)匀恍枰綖g覽器中查看。
這是個(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ò)線程發(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)俱全。
更多
Easier browser debugging with Developer Tools integration in Visual Studio Code vscode-js-debug chrome devtools-protocol Microsoft Edge (Chromium) DevTools Protocol overview