VSCode配置 Debugger for Chrome插件
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,进入调试界面选好调试的工具(就是刚才配置的名字)如图

转链接:https://www.jianshu.com/p/66033d4949bf
VSCode配置 Debugger for Chrome插件的更多相关文章
- 用VSCode的debugger for chrome插件调试服务器项目的配置方式
项目放到tomcat服务器启动起来(以tomcat服务器为例). 配置launch 把谷歌浏览器彻底关闭!(要彻底) 打断点 点左侧的调试 点刷新!(这一步也需要)
- visual studio code 中 debugger for chrome 插件的配置
安装 debugger for chrome 插件后,把默认的 launch.json 改成: { "name": "谷歌浏览器", "type&qu ...
- vscode(Visual Studio Code)中安装Debugger for Chrome插件调试页面
最近换了下编辑器,改用vscode(Visual Studio Code),很喜欢它左边显示的文件路径,轻松新建文件夹和文件,也喜欢它的编码转换功能,gbk和utf-8可以随时切换,因为公司网站有些页 ...
- VsCode配置go环境及插件安装
在vscode中安装go插件. 安装git. 在%GOPATH%\src\目录下,建立golang.org文件夹,并再新建x文件夹. 目录为 "%GOPATH\src\golang.org\ ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
- VScode常用几个前端插件live HTML previewer和debugger for chrome的配置
之前一直都是用sublime Text和chrome配合来写前端的页面,自从知道了有liveReload这个神奇的插件之后感觉爽翻了啊.好吧跑远了........ 话说最近微软搞了个VScode,听说 ...
- vscode debugger for chrome 调试webpack的配置问题
module.exports = { entry: './app.ts', output: { filename: 'bundle.js', publicPath: '/assets', devtoo ...
- VScode神器如何同步配置和所装插件
由于近期编辑器换用vscode,回到家里也需要写代码,但是家里电脑也需要安装vscode,并设置相同配置和插件.想到以前webstrom可以直接导出配置然后安装. 但是vscode无此配置,突发奇想g ...
- VSCode配置Go插件和第三方拓展包
前言 VSCode现在已经发展的相当完善,很多语言都比较推荐使用其来编写,Go语言也一样,前提你电脑已经有了Go环境和最新版本的VSCode 插件安装 直接在拓展插件中搜索Go,就可以安装Go插件 安 ...
随机推荐
- 2019 南京网络赛A
南京网络赛自闭现场 https://nanti.jisuanke.com/t/41298 二维偏序经典题型 二维前缀和!!! #include<bits/stdc++.h> using n ...
- 1.WIN10下搭建vue开发环境
WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...
- Masonry 布局 scrollView
原理 scrollView的高度(纵向滑动时)时靠内部的子控件撑起来的.我们直接给ScrollView布局会发现失败.用层级检查器发现,ScrollVIiw的高度有问题,我们可以选择添加一个UIVie ...
- json-server 服务器的接口
服务器接口的数据在浏览器网络地址中,便可查看: 获取接口的数据需要在网络地址后面,填写接口的名字即可,(对于 json-server来说)
- 2019暑假第二周(hadoop在个人电脑上的搭建)
一,Hadoop和NoSQL数据库的学习,大多需要Linux环境. 搭建Linux环境可以分为两种方式: (1)在电脑上安装双操作系统,即同时安装Linux和Windows操作系统,在电脑启动的时候, ...
- AutoML文献阅读
逐步会更新阅读过的AutoML文献(其实是NAS),以及自己的一些思考 Progressive Neural Architecture Search,2018ECCV的文章: 目的是:Speed up ...
- vue仿阿里云后台管理(附加阿里巴巴图标使用)
先看下页面截图,在线演示地址http://aliadmin.zengjielin.top 下面有开源的代码 页面分成三大部分头部,头部菜单栏,侧边菜单栏,右侧内容栏. 现在我们担心的是怎么使用侧边栏. ...
- [DataContract]和[DataMember]缺少引用
1.项目->右键->添加引用->找到System.Runtime.Serialization 2.代码中加上 Using System.Runtime.Serialization
- glide使用总结
1 glide是什么 glide是一个图片加载和缓存库. 2 glide的使用 第一,添加依赖 implementation 'com.github.bumptech.glide:glide:4.5. ...
- CentOS 7安装Python 2.6(与已有版本共存)
1. 安装需要用到的包 yum install -y zlib-devel bzip2-devel openssl-devel xz-libs wget 2. 下载 Python 2.6.8 版本 w ...