大家好，我是若川。今天周末，分享一篇相對比較簡單的文章。學(xué)習(xí)源碼系列、面試、年度總結(jié)、JS基礎(chǔ)系列。

---

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

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

并且更重要的是，其僅能提供最基本的控制臺功能，其他的諸如 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)試并進行簡單的配置即可。這里給大家貼一份 lauch.json 配置，有了它就可以直接開啟調(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ù)。

?

原理

原理其實和 chrome debugger 擴展原理類似。也是基于 Chrome 的 devtool 協(xié)議，建立 「websocket 鏈接。通過發(fā)送格式化的 json 數(shù)據(jù)進行交互」，這樣 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ù)進行一些操作，從效果上來看「和用戶直接在手動在瀏覽器中操作并無二致。」

值得注意的，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

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進群。

---

推薦閱讀

我在阿里招前端，該怎么幫你（可進面試群）
我讀源碼的經(jīng)歷

在字節(jié)做前端一年后，有啥收獲~
老姚淺談：怎么學(xué)JavaScript？

·················?若川簡介?·················

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列》多篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結(jié)，已經(jīng)寫了7篇，點擊查看年度總結(jié)。
同時，活躍在知乎@若川，掘金@若川。致力于分享前端開發(fā)經(jīng)驗，愿景：幫助5年內(nèi)前端人走向前列。

識別上方二維碼加我微信、長期交流學(xué)習(xí)

今日話題

略。歡迎分享、收藏、點贊、在看我的公眾號文章~

總結(jié)

以上是生活随笔為你收集整理的VSCode 竟然可以无缝调试浏览器了！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。