关于visual-studio-code:史诗级更新VSCODE-可无缝调试浏览器了

47次阅读

共计 1219 个字符，预计需要花费 4 分钟才能阅读完成。

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 数据进行一些操作，从成果上来看 和用户间接在手动在浏览器中操作并无二致。

值得注意的，chrome devtool protocol 的客户端有很多，不仅仅是 NodeJS 客户端，Python，Java，PHP 等各种客户端一应俱全。