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插件的更多相关文章

  1. 用VSCode的debugger for chrome插件调试服务器项目的配置方式

    项目放到tomcat服务器启动起来(以tomcat服务器为例). 配置launch 把谷歌浏览器彻底关闭!(要彻底) 打断点 点左侧的调试 点刷新!(这一步也需要)

  2. visual studio code 中 debugger for chrome 插件的配置

    安装 debugger for chrome 插件后,把默认的 launch.json 改成: { "name": "谷歌浏览器", "type&qu ...

  3. vscode(Visual Studio Code)中安装Debugger for Chrome插件调试页面

    最近换了下编辑器,改用vscode(Visual Studio Code),很喜欢它左边显示的文件路径,轻松新建文件夹和文件,也喜欢它的编码转换功能,gbk和utf-8可以随时切换,因为公司网站有些页 ...

  4. VsCode配置go环境及插件安装

    在vscode中安装go插件. 安装git. 在%GOPATH%\src\目录下,建立golang.org文件夹,并再新建x文件夹. 目录为 "%GOPATH\src\golang.org\ ...

  5. VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

  6. VScode常用几个前端插件live HTML previewer和debugger for chrome的配置

    之前一直都是用sublime Text和chrome配合来写前端的页面,自从知道了有liveReload这个神奇的插件之后感觉爽翻了啊.好吧跑远了........ 话说最近微软搞了个VScode,听说 ...

  7. vscode debugger for chrome 调试webpack的配置问题

    module.exports = { entry: './app.ts', output: { filename: 'bundle.js', publicPath: '/assets', devtoo ...

  8. VScode神器如何同步配置和所装插件

    由于近期编辑器换用vscode,回到家里也需要写代码,但是家里电脑也需要安装vscode,并设置相同配置和插件.想到以前webstrom可以直接导出配置然后安装. 但是vscode无此配置,突发奇想g ...

  9. VSCode配置Go插件和第三方拓展包

    前言 VSCode现在已经发展的相当完善,很多语言都比较推荐使用其来编写,Go语言也一样,前提你电脑已经有了Go环境和最新版本的VSCode 插件安装 直接在拓展插件中搜索Go,就可以安装Go插件 安 ...

随机推荐

  1. 2019 南京网络赛A

    南京网络赛自闭现场 https://nanti.jisuanke.com/t/41298 二维偏序经典题型 二维前缀和!!! #include<bits/stdc++.h> using n ...

  2. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

  3. Masonry 布局 scrollView

    原理 scrollView的高度(纵向滑动时)时靠内部的子控件撑起来的.我们直接给ScrollView布局会发现失败.用层级检查器发现,ScrollVIiw的高度有问题,我们可以选择添加一个UIVie ...

  4. json-server 服务器的接口

    服务器接口的数据在浏览器网络地址中,便可查看: 获取接口的数据需要在网络地址后面,填写接口的名字即可,(对于 json-server来说)

  5. 2019暑假第二周(hadoop在个人电脑上的搭建)

    一,Hadoop和NoSQL数据库的学习,大多需要Linux环境. 搭建Linux环境可以分为两种方式: (1)在电脑上安装双操作系统,即同时安装Linux和Windows操作系统,在电脑启动的时候, ...

  6. AutoML文献阅读

    逐步会更新阅读过的AutoML文献(其实是NAS),以及自己的一些思考 Progressive Neural Architecture Search,2018ECCV的文章: 目的是:Speed up ...

  7. vue仿阿里云后台管理(附加阿里巴巴图标使用)

    先看下页面截图,在线演示地址http://aliadmin.zengjielin.top 下面有开源的代码 页面分成三大部分头部,头部菜单栏,侧边菜单栏,右侧内容栏. 现在我们担心的是怎么使用侧边栏. ...

  8. [DataContract]和[DataMember]缺少引用

    1.项目->右键->添加引用->找到System.Runtime.Serialization 2.代码中加上 Using System.Runtime.Serialization

  9. glide使用总结

    1 glide是什么 glide是一个图片加载和缓存库. 2 glide的使用 第一,添加依赖 implementation 'com.github.bumptech.glide:glide:4.5. ...

  10. CentOS 7安装Python 2.6(与已有版本共存)

    1. 安装需要用到的包 yum install -y zlib-devel bzip2-devel openssl-devel xz-libs wget 2. 下载 Python 2.6.8 版本 w ...