Visual Studio Code 插件之 Debugger for Chrome 前端调试插件

最新推荐文章于 2022-01-06 16:07:19 发布
原创 最新推荐文章于 2022-01-06 16:07:19 发布 · 1.8w 阅读 · 32 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #chrome

本文介绍了一款专为前端调试开发的插件Debugger for Chrome的使用方法。通过配置launch.json文件并使用VSCode，可以在两种模式下进行调试：launch模式用于启动具有debug功能的独立程序；attach模式则连接到已开启Debug模式的程序。

Debugger for Chrome这款插件是专门为前端调试开发的，真的非常方便，先看图

这里写图片描述

安装完插件怎么使用呢？

  1. 配置 launch.json

  2. 运行 按 F5 运行 运行即可打开chrome浏览器

    • launch模式：由 vscode 来启动一个独立的具有 debug 模式的程序
    • attach模式：附加于（也可以说“监听”）一个已经启动的程序（必须已经开启 Debug 模式）

可以参考下图配置
这里写图片描述

最后效果图
这里写图片描述

Visual Studio Code插件整理大全
qq_42843557的博客
08-24 7673
ESLint(格式化程序和规范代码) 如果你需要格式化程序和规范代码，那么这个插件适合你。 它可以自动格式化你的代码并查找代码中的错误。 此外，它允许你在书签代码之间选择代码区域，这对于日志文件分析等非常有用。 Git History(可视化获取git 日志,方便对比) 与 GitLens 类似，Git History是一个 VSCode 插件，它提供了 git 日志的可视化。你不需要再终端中查看 git log。 插件也非常全面。它允许你跨提交比较分支、提交和文件。也可以查 Gi..
Visual Studio Code（插件篇）：Visual Studio Code 必装的 10 个高效开发插件（扩展）
Soinice的博客
02-27 2万+
插件，亦成为 扩展。 使VSCode 如虎添翼。 本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件，用于大大提高软件开发的效率。 相关文章推荐：Visual Studio Code（目录篇）：如何熟练使用 Visual Studio Code目录 目录 文件图标 vscode-icons 暗色主题 One Dark Pro ​代码美化 Beautif...
vscode插件vscode插件
12-22
vscode插件vscode插件vscode插件
vscode新建python_vscode创建python编译环境（launch.json和setting.json）
weixin_39644146的博客
12-07 2094
a. .vscode下launch.json文件{"version": "0.2.0","configurations": [{//配置名称，将会在启动配置的下拉菜单中显示"name": "Python",//配置类型"type": "python",//请求配置类型，可以为launch(启动)或attach(附加)//launch: VSCode 会打开这个程序然后进入调试//attach:你已...
VS Code插件之Debugger for Chrome
热门推荐
xdcx950288的博客
06-10 6万+
号称2018最火的编辑器，不用用怎么行？不多说直接开始踩坑之路。要在vs中启动chrome控制台怎么办？vscode并没有集成环境，这里我们需要借助一个插件Debugger for Chrome。选择左边安装包选项，点击商店搜索Debugger for Chrome，然后点击安装，重新加载。。。安装完之后,点击调试，选择chrome，我们万分激动的等待控制台打开。。。结果却是这样：或者这样：   ...
VSCode配置 Debugger for Chrome插件（终于搞定了..）
weixin_45295262的博客
11-29 1万+
今天重装了vsCode，重新安装了插件，配置这个调试插件时花了一个小时…好菜，因为我按网上教程配置了出现断点灰色，调试不了的问题，所以我找解决方法…现在半夜两点了，我要秃了…才刚入行哈哈哈哈哈哈 进入正题： Debugger for Chrome这款插件是专门为前端调试开发的，很方便调试，跟谷歌的控制台是一样的功能，下载了它就不用打开浏览器的控制台就能进行打断点。 1.安装Debugger for Chromec插件 2.配置launch.json文件 这个文件怎么打开？ 安装了插件右边会多出调试按钮，点
chrome插件 vscode_使用VScode 插件debugger for chrome 调试react源码的方法
weixin_42407739的博客
01-17 670
代码调试，是我们前端日常工作中不可或缺的能力了吧！在面向dom开发的时代，我们开发时直接在chrome里打断点是很方便的。但是，当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码，还想在浏览器里打断点几乎是不可能的了。场景那怎么办，方法总是比困难多！愚蠢的我想到了console/debugger！！一直在使用，虽然很不方便(打印太多实在太乱！上线还要配置删除掉)，但是我竟然使用了...
《Visual Studio Code实用插件精选集锦》
最新发布
06-27
资源下载链接为： ...Visual Studio Code（VSCode）是由微软开发的一款免费且开源的...Debugger for Chrome：允许开发者直接在VSCode中调试运行在Chrome浏览器上的JavaScript代码，极大地简化了调试流程。 Material Them
Visual Studio Code 1.68.1 （VSCode-darwin.zip)
06-19
4. 扩展推荐：如Prettier用于代码格式化，ESLint用于代码质量检查，Debugger for Chrome用于前端调试。 总结，Visual Studio Code 1.68.1（VSCode-darwin.zip）是macOS平台上不可或缺的开发工具，无论是初学者还是...
浅析Visual Studio Code断点调试Vue
08-27
Visual Studio Code断点调试Vue是前端开发者常用的调试方式之一。通过配置Visual Studio Code和Chrome，可以实现直接在VS Code中断点调试代码，并在VS Code的调试窗口看到Chrome中console相同的值。 一、设置...
VScode插件
10-21
VScode插件,常用插件开发 VScode插件,常用插件开发 VScode插件,常用插件开发
vscode插件
12-18
vscode插件vscode插件vscode插件vscode插件vscode插件
vscode配置前端开发插件及设置Debugger for Chrome，open in browser用于打开网页
qq_34729246的博客
08-14 2112
vscode凭借其强大的插件扩展，支持各种文件格式（html/jade/css/less/sass/xml）在前端开发中越来越受欢迎 本文记录一下用vs运行简单网页的例子 1，使用Debugger for Chrome插件 打开vscode，点击文件然后点击打开文件夹，然后打开自己想要创建的项目文件夹 然后安装Debugger for Chrome插件，按照如图所示步骤： 安装Debugger for Chrome插件之后打开自己要运行的文件按f5调用chrome浏览器运行，然后会自动
vscode-插件
weixin_57246351的博客
01-06 163
1,Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 中文(简体)语言包 2,open in browser 右击选择浏览器打开html文件 3,Auto Rename Tag 自动重命名配对的HTML/XML标签
VS Code 必备插件推荐
小贤笔记
08-12 1万+
插件 说明 备注 Auto Close Tag 自动添加HTML / XML关闭标签 Auto Rename Tag 自动重命名配对的HTML / XML标签 Beautify 格式化代码 (查看使用方法) Bracket Pair Colorizer 颜色识别匹配括号 Code ...
vscode 插件
知识改变一切
09-11 438
原文地址：https://www.cnblogs.com/vivaxiaonan/p/7380099.html 原文地址：https://www.cnblogs.com/hjpqwer/p/7636643.html  
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值