.jpg)
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ò)線程發(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)看和用戶直接在手動(dòng)在瀏覽器中操作并無(wú)二致。
值得注意的，chrome devtool protocol 的客戶端有很多，不僅僅是 NodeJS 客戶端，Python，Java，PHP 等各種客戶端一應(yīng)俱全。
更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：vscode！！
.png)
