VSCode配置 Debugger for Chrome插件

注: 文章摘自 Dominic- - CSDN

Debugger for Chrome这个插件是直接在vscode里面进行调试js文件，跟谷歌的控制台是一样的功能，下载了它就不用打开浏览器的控制台就能进行打断点。

首先在左侧扩展栏找到这个插件下载好了后重启编辑器之后配置

配置步骤如图：

图中配置字段信息解释如下：

version : 你定义这个配置文件的版本，生成的时候默认是0.2.0
configuration：配置域
name：配置文件的名字，可以自己起
type：调试的类型，node是vscode本身就支持，其他就需要下载插件了
request : 配置文件的请求类型，有launch和attach两种，launch是需要服务器的需要配置url，这里我就用的它，attach就比较麻烦了，因为配置launch也能用，所以我就没有配置attach了
url:这个是chrome插件带的，指定访问的链接，到这里我觉得就个缺点了，url只能配置死链接，就算用预定义变量也不能做到多项目自动识别要打开的HTML，可能是我没有发现其他的预定义变量，如果有大神知道，欢迎在评论里留言
webRoot：也是chrome插件带的，指定根目录或者执行文件
${workspaceRoot}:就是你打开vscode读取的项目目录
sourceMaps:默认是启用的，对于打包的调试，大神们就必须开启了
userDataDir：临时目录,专门保存调试过程产生的东西，这个字段是为了重新
打开一个浏览器窗口，不会强制关闭已经打开的浏览器

launch.json中有很多属性可以设置, 通过智能提示查看有那些属性可以设置, 如果要查看属性的具体含义, 可以把鼠标悬停在属性上面, 会属性的使用说明.

在launch.json中会使用到一些预定变量, 这些变量的具体含义如下：

${workspaceRoot}：VSCode中打开文件夹的路径
${workspaceRootFolderName}：VSCode中打开文件夹的路径, 但不包含"/"
${file} ：当前打开的文件
${relativeFile}：当前打开的文件,相对于workspaceRoot
${fileBasename} ：当前打开文件的文件名, 不含扩展名
${fileDirname} ：当前打开文件的目录名
${fileExtname}：当前打开文件的扩展名
${cwd} ：当前启动时的工作目录

当你配置完成后直接打开你要调试的js，进入调试界面选好调试的工具（就是刚才配置的名字）如图

VSCode配置 Debugger for Chrome插件相关推荐

VSCode配置 Debugger for Chrome插件（终于搞定了..）
今天重装了vsCode,重新安装了插件,配置这个调试插件时花了一个小时-好菜,因为我按网上教程配置了出现断点灰色,调试不了的问题,所以我找解决方法-现在半夜两点了,我要秃了-才刚入行哈哈哈哈哈哈进入 ...
Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)
场景在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点,然后逐步或者逐过程进行调试. 但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debug ...
VSCode配置JAVA开发环境插件安装
1.Language support for Java ™ for Visual Studio Code(Red Hat的Java(TM)语言支持) 2.Debugger for Java 3.Mav ...
vscode中装js解释器_h5学习记录（1）--vscode配置js开发环境
文笔不是很好,第一次写东西,主要为了记录h5的学习过程.今天记录的是vscode配置js开发环境. 什么是VSCode Visual Studio Code (简称VS Code/VSC) 是一款于2 ...
VSCODE 10个高效开发插件
首先介绍如何安装插件下面介绍目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效 ...
如何恢复vscode的默认配置_史上最全vscode配置使用教程
工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Text.WebStorm.Visual Studio Co ...
vscode emmet默认模板_史上最全vscode配置使用教程
工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Text.WebStorm.Visual Studio Co ...
史上最全vscode配置使用教程
史上最全vscode配置使用教程正在上传-重新上传取消灰蓝宇墨上海闪店联信息科技有限公司前端工程师 5,041 人赞同了该文章工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使 ...
vscode配置Go支持
目录前言一.goproxy的代理设置 1.安装go插件 2. 配置golang辅助工具总结附录前言由于vscode是开源免费的,而且开发支持vscode的插件相对比较容易,更新速度也很快. ...

VSCode配置 Debugger for Chrome插件

VSCode配置 Debugger for Chrome插件相关推荐

最新文章

热门文章