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

---

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

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

并且更重要的是，其僅能提供最基本的控制臺功能，其他的諸如 network，element 是無法查看的，我們仍然需要到瀏覽器中查看。

這是個什么功能

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

效果截圖：

（edge devtools）

（debug console）

如何使用

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

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

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

?

原理

原理其實和 chrome debugger 擴展原理類似。也是基于 Chrome 的 devtool 協議，建立 「websocket 鏈接。通過發送格式化的 json 數據進行交互」，這樣 vscode 就可以動態拿到運行時的一些信息。比如瀏覽器網絡線程發送的請求以及 DOM 節點信息。

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

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

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

更多

• Easier browser debugging with Developer Tools integration in Visual Studio Code

• vscode-js-debug

• chrome devtools-protocol

• Microsoft Edge (Chromium) DevTools Protocol overview

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

---

推薦閱讀

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

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

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

你好，我是若川，畢業于江西高?！，F在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》多篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，活躍在知乎@若川，掘金@若川。致力于分享前端開發經驗，愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、長期交流學習

今日話題

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。