专栏首页秋风的笔记史诗级更新,VSCODE 可无缝调试浏览器了!

史诗级更新,VSCODE 可无缝调试浏览器了!

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 等各种客户端一应俱全。

更多

  • Easier browser debugging with Developer Tools integration in Visual Studio Code
  • vscode-js-debug
  • chrome devtools-protocol
  • Microsoft Edge (Chromium) DevTools Protocol overview
  • 后台回复:typescript,获取我写的 typescript 系列文章,绝对精品
  • 后台回复:电子书,自动获取我为大家整理的大量经典电子书,省去你筛选以及下载的时间
  • 后台回复:不一样的前端,自动获取精选优质前端文章。
  • 后台回复:算法,自动获取精选算法文章。另外也可关注我的另外一个专注算法的公众号力扣加加
  • 后台回复:每日一荐,自动获取我为大家总结的每日一荐月刊,内含精品文章,实用技巧,高效工具等等

本文分享自微信公众号 - 秋风的笔记(qiufengnote)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-08-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 史诗级更新,VSCODE 可无缝调试浏览器了!

    在此之前,你想要在 vscode 内调试 chrome 或者 edge 需要借助于 Chrome Debugger 或者 the Microsoft Edge ...

    lucifer210
  • Vs Code推荐安装插件

    Visual Studio Code是一个轻量级但功能强大的源代码编辑器,轻量级指的是下载下来的Vs Code其实就是一个简单的编辑器,强大指的是支持多种语言的...

    追逐时光者
  • 大前端时代你的VSCode插件

    2018已成历史,大前端的时代不知不觉中已然来到了我们身边,完善你的军刀库为你的开发进行时提升效率,是我们必然要进行的事情。这一篇文章收集了一些我经常使用的 v...

    icepy
  • 提高 JavaScript 开发效率的高级 VSCode 扩展之二!

    作为一名业余爱好者、专业人员,甚至是每月只有一次编程的开发人员,你必须知道,对于任何愿意在工作中投入最大生产时间的人来说,拥有智能和敏捷的工具是至关重要的,废话...

    前端小智@大迁世界
  • 28 个提升开发幸福度的 VsCode 插件

    Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行你输入后的代码,并在编辑器中显示各种执行...

    前端小智@大迁世界
  • 一些你所不知道的VS Code插件

    作为一名业余爱好者、专业人员,甚至是每月只有一次编程的开发人员,你必须知道,对于任何愿意在工作中投入最大生产时间的人来说,拥有智能和敏捷的工具是至关重要的,废话...

    Fundebug
  • 微软2015赢与失—成也萧何败也萧何

    对于微软来说2015年是硕果累累的一年,其CEO Satya Nadella功不可没,其进入角色后的大胆改革,展开了清剿鲍尔默行动,从硬件优先改为“云优先,移动...

    人称T客
  • VSCode插件大全|VSCode高级玩家之第二篇

    上一篇文章《VSCode常用快捷键大全》,我们了解到了VSCode中的常用快捷键。学会了快捷键可以让我们更高效和迅速的编写代码。但是没有IDE中的一些辅助功能,...

    三钻
  • 「 工具篇 」VS Code

    之前部门想要统一代码编辑器, 最后决定统一用 VS Code,需要一篇比较系统的介绍文章。

    皮小蛋
  • 12个前端开发必备开发的工具

    在这篇文章中,我们向您展示了一个将工具和服务分类为bucket的框架,它可能会在前端开发过程中对您有所帮助。在每个类别中,我们都会讨论一个受欢迎的选择,同时也会...

    用户8671053
  • 挑战Jupyter Notebook:云协作、云硬件,上云的Notebook编程环境

    如果你是像我一样的数据科学家,你可能会在工程项目而不是真正的研究上花很多时间。安装库、管理数据库、追踪实验、调试代码、耗尽内存……对此,你一定深有感触。

    机器之心
  • 当我有一台服务器时我做了什么

    由于 dev 的机器与去年列举出来的事情相似,这里只介绍下在这台 1C2G 的服务器上做了什么

    山月
  • 一边打码一边bung-bung令你停不下来的神器

    今天给大家介绍一款神器,最近很火的一款装逼的vscode的插件,让你一边打码,一边夸你的神器.

    itclanCoder
  • vscode-轻量级实用编辑器 原

    注:安装好如果不生效的话,需要到“文件 -- 首选项 -- 文件图标主题 -- 选择vscode icons ”

    晓歌
  • 【调试】258- 前端调试各种收集-断点篇

    当我第一次知道这种东西,我也惊呆了,居然还有这种操作,实在强大到没朋友,从此爱上调试,按时下班。

    pingan8787
  • H5 游戏开发 2:搭建 Egret 开发环境

    在上一期的“H5 游戏开发”教程中,猫哥介绍了如何通过 Whistle 工具对 Egret 文档进行资源修复和搜索增强。本期,我们以 Hello World 项...

    猫哥学前班
  • web前端入门

    8 = html + css +javascript(jQuery和vue就是js封装的函数而已)

    小闫同学啊
  • 随时随地能写代码, vscode.dev 出手了

    今天偶然看到了 VSCode 官方发布了一条激动人心的 Twitter,vscode.dev[1] 域名上线了!

    秋风的笔记
  • 25 个提升开发幸福感的 VSCode 扩展

    我认为它如此受欢迎的原因很简单,因为 VSCode 提供了每个开发者想要的功能,包括他们甚至不知道自己需要的功能。这就是 VSCode 的秘密魅力——它总能让你...

    一只图雀

扫码关注云+社区

领取腾讯云代金券