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

最新推荐文章于 2024-05-11 20:22:47 发布
最新推荐文章于 2024-05-11 20:22:47 发布
阅读量530 收藏
点赞数
分类专栏： 其他 文章标签： 前端其他问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/105421412
版权

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

在这里插入图片描述

安装完插件怎么使用呢？

配置 launch.json

运行 按 F5 运行 运行即可打开chrome浏览器
launch模式：由 vscode 来启动一个独立的具有 debug 模式的程序
attach模式：附加于（也可以说“监听”）一个已经启动的程序（必须已经开启 Debug 模式）

可以参考下图配置

在这里插入图片描述

最后效果图

在这里插入图片描述

LuckXinXin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析Visual Studio Code断点调试Vue
08-27
Visual Studio Code断点调试Vue是前端开发者常用的调试方式之一。通过配置Visual Studio Code和Chrome，可以实现直接在VS Code中断点调试代码，并在VS Code的调试窗口看到Chrome中console相同的值。 一、设置...
VS Code插件之Debugger for Chrome
晴树的专栏
06-23 3059
https://blog.csdn.net/xdcx950288/article/details/80640918 号称2018最火的编辑器，不用用怎么行？ 不多说直接开始踩坑之路。 要在vs中启动chrome控制台怎么办？vscode并没有集成环境，这里我们需要借助一个插件Debugger for Chrome。 选择左边安装包选项，点击商...
2024年Web前端最新VSCODE通用插件+vue插件+react插件（2024版本），handler机制面试回答
最新发布
2401_84617772的博客
05-11 990
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】功能：给匹配的括号() 或者 对象{}… 添加对应的颜色用于区分。
VSCode 插件离线安装
热门推荐
wangwei703的专栏
01-04 10万+
如何下载插件 1、进入vscode插件官网（https://marketplace.visualstudio.com/） 2、找到需要安装的插件 找到需要安装的插件，进入插件主页（以Debugger for Chrome为例），但是在页面上找不到下载链接 3、如何下载 https://code.visualstudio.com/docs/editor/ex
在visual studio code中用Debugger for Chorme调试JavaScript
weixin_30883777的博客
03-31 107
在打开的Chorme中进行调试为例(这样不用每次启动调试就打开Chorme) 下载Debugger for Chorme 对Chorme启动设置参数 Google Chorme 右键属性-快捷方式-目标-在尾部添加"--remote-debugging-port=9222"(注意--前面有空格) 在vscode配置launch.json文件 ...
Visual Studio Code 前端调试不完全指南
weixin_33966365的博客
05-21 361
本文最初发布于我的个人博客：咀嚼之味 Visual Studio Code (以下简称 vscode) 如今已经代替 Sublime，成为前端工程师们最喜爱的代码编辑器。它作为一个大型的开源项目，不断推陈出新；社区中涌现出大量优质的插件，以支持我们更加舒服地进行开发工作。在近期的工作中，我尝试通过 vscode 来提升调试代码的幸福度，积...
vscode创建调试
SanSiErHouXing的博客
05-30 414
比如我们手动把 Chrome 跑起来，指定调试端口 remote-debugging-port 为 9222，指定用户数据保存目录 user-data-dir 为你自己创建一个目录。3、配置 request 有attach和launch。2、创建web应用Chrome。浏览器配置远程调试端口。
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 从简介、安装到配置所需插件详细介绍
08-19
2. **Debugger for Chrome**：允许在Google Chrome中调试JavaScript代码，是前端开发者必备的工具。 3. **Beautify**：用于格式化JavaScript、JSON、CSS、Sass和HTML代码，保持代码整洁。 4. **Auto Rename Tag**：...
Visual Studio Code 1.65（VSCode-darwin-arm64.zip）
03-04
后端开发者则可选择Debugger for Chrome、Python等插件。 4. **性能调优**：根据项目需求调整工作区设置，如开启或关闭某些语言服务，以平衡性能与功能。 四、总结 Visual Studio Code 1.65的macOS Arm64版本是面向...
Visual Studio Code For MacOS
01-13
开发者可以安装各种扩展来增强编辑器的功能，例如Prettier用于代码格式化，GitLens加强Git操作，Debugger for Chrome或微信开发者工具插件进行前端调试等。这些扩展使得VS Code能够适应各种开发场景，包括微信小游戏...
vscode插件“Debugger for Chrome”配置
jie_rookie的博客
03-23 5053
1：VSCode 上安装：Debugger for Chrome 2：vscode打开一个html，按F5，在弹出来的框中选择 Chrome，会自动打开launch.json文件 3.往launch.json中追加以下代码： { "name": "使用本机 Chrome 调试", "type": "chrome", "request": "launch", "file": "${file}",...
VsCode 各场景高级调试技巧！
静觅
11-16 5420
这是「进击的Coder」的第 753篇技术分享作者：愣锤来源：https://juejin.cn/post/7071146744339234846“ 阅读本文大概需要 23 分钟。 ”VsCode 自从诞生以来，以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说，几乎成为必不可少的开发工具。所以，熟练掌握 VsCode 的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。本文将会以大量图...
Visual Studio Code 插件之 Debugger for Chrome 前端调试插件
逆水行舟，不进则退
03-16 1万+
Debugger for Chrome这款插件是专门为前端调试开发的，真的非常方便，先看图 安装完插件怎么使用呢？ 配置 launch.json 运行 按 F5 运行 运行即可打开chrome浏览器 launch模式：由 vscode 来启动一个独立的具有 debug 模式的程序 attach模式：附加于（也可以说“监听”）一个已经启动的程序（必须已经开启 Debug 模式） ...
vscode如何直接调试chrome中的Vue项目
qq_38693333的博客
07-07 2421
第一步，下载 chrome debuger 插件 第二步，添加配置文档 launch.json，打开 debug 面板，点击 “添加配置” 将下面配置文档覆盖到你的 launch.json 文件中 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name":...
VSCode配置 Debugger for Chrome插件
sam的博客
05-31 4万+
这个插件是直接在vscode里面进行调试js文件，跟谷歌的控制台是一样的功能，下载了它就不用打开浏览器的控制台就能进行打断点。首先在左侧扩展栏找到这个插件下载好了后重启编辑器之后配置配置步骤如图：图中配置字段信息解释如下：version : 你定义这个配置文件的版本，生成的时候默认是0.2.0configuration：配置域name：配置文件的名字，可以自己起type：调试的类型，node是vs...
Visual Studio Code 使用Chrome Debug 代码
weixin_30500663的博客
09-06 509
一、添加插件 Debugger for Chrome，点击安装，安装完成之后，启动 二、配置启动参数 1.按 F5，出现界面如图，选择 Chrome 2.然后会打开配置文件 launch.json 3.第三步需要配置本地HTTP服务器（IIS） ①HTTP服务器配置教程 ②配置完成之后，把服务器相关配置改成如下图： 4.再按F5启动，就可以启动Chr...
vscode debugger for chrome
辉色空间
10-17 1599
1.首先安装 debugger for chrome这个插件 2 配置launch.json 3 再按F5启动，就可以启动Chrome，并且在VSC里Debug调试代码了
Visual Studio Code 前端插件推荐
04-24
我向您推荐以下几个 Visual Studio Code 前端插件： 1. ES Lint 2. Debugger for Chrome 3. Live Server 4. Prettier - Code formatter 5. Auto Rename Tag 6. Bracket Pair Colorizer 7. GitLens - Git ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值