史詩級更新，VSCODE 可無縫調(diào)試瀏覽器了！

黃爸爸好 2021-08-07

展開全文

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)絡線程發(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 等各種客戶端一應俱全。