作用

代替浏览器的console面板对代码进行debug。当然也可以当作浏览器的console面板使用，在调试时，整个代码板块作为跟踪debug的资源面板来使用。单单看表面的意思可能平平无奇，推荐没有用过的小伙伴体验一下。

由于自己也只是才接触这个插件，所以根据自己成功配置的方式，以及理解在这里记录一下，如果有错误，也请评论出来，一起探讨学习。

使用

安装插件

vscode插件商店中搜索Debugger for Chrome，安装

配置

要使用这个插件，还需要进行一点简单的配置

1、首先找到.vscode文件夹（这个文件夹一般承载全局的配置文件），如果项目中没有这个文件夹，可以自己在项目根目录创建一下，并在.vscode文件夹中创建launc.json文件。这里记得在.ignore里面也配置一下。

launch.json配置

.ignore配置

关于launch.json的配置在这里简单的介绍一下

{"version": "0.2.0","configurations": [{"name": "Launch Localhost","type": "chrome","request": "launch","url": "http://localhost:1234","webRoot": "${workspaceFolder}/src","breakOnLoad": true,"sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*"}}]
}

根据我自己的配置，对里面的几个配置项解释一下，从必填与非必填的维度，简单的分成两类

必填参数

name：也就是当前配置的名称，将来可以在控制台选择的名字,如图:

type：是调试工具的类型，是什么就填什么，比如php就填php，go就填go，我们这里因为借助chrome的控制台调试，所以填chrome

request：这里官方一共提供了两个类型，分别是launch和attach。launch是同时启动项目，attach不会启动项目

可选参数

url：网络服务地址（其实就是你项目启动地址）
webRoot：开发目录，个人理解也就是debug需要读取到的入口文件，一般都是src

file：如果不使用网络服务地址，还可以使用file，填写文件路径
breakOnLoad：简单的找了一下资料，不知道是什么。字面理解吧。
sourceMapPathOverrides：同上

比较详细的配置参数，可以参考这个博客

启动项目

当参数都配置好之后，按放f5启动项目
这个时候你可以这样打断点了

同时控制台也可以使用了

调试工具栏与chrome也一样

更重要的是，调试时，可以直接在代码中看到每一步，比在浏览器中干巴巴的看代码舒服太多了。

Debugger for Chrome相关推荐

VS Code - Debugger for Chrome调试JavaScript的两种方式
VS Code - Debugger for Chrome调试JavaScript的两种方式最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...
VSCode配置 Debugger for Chrome插件
注: 文章摘自 Dominic- - CSDN Debugger for Chrome这个插件是直接在vscode里面进行调试js文件,跟谷歌的控制台是一样的功能,下载了它就不用打开浏览器的控制台就能 ...
VSCode配置 Debugger for Chrome插件（终于搞定了..）
今天重装了vsCode,重新安装了插件,配置这个调试插件时花了一个小时-好菜,因为我按网上教程配置了出现断点灰色,调试不了的问题,所以我找解决方法-现在半夜两点了,我要秃了-才刚入行哈哈哈哈哈哈进入 ...
Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)
场景在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点,然后逐步或者逐过程进行调试. 但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debug ...
chrome插件 vscode_2020年，前端开发者必备的10个VS Code扩展插件
全文共1689字,预计学习时长5分钟图源:Unsplash 在2017年,VSCode有260万月活跃用户(这是我找到的最新官方数据,现在肯定更多),可以说是目前最好的代码编辑器. 它最大的一个特点 ...
chrome vue插件_VS Code 前端常用插件推荐
⊕.vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效. Ξ.当你不需要某个插件时只需要进入扩展,点击对应 ...
JS调试的时候遇到无限debugger怎么办?
我们在对一些网站进行JS逆向分析过程中,很有可能会遇到网站禁止开发人员使用F12进行网页调试,如果你打开就会遇到无限debugger的这个情况,当我们遇到这种情况,我们该如何进行避免无限debugge ...
chrome vue.js插件文档_前端开发者必备的40个VSCode插件！
前言:俗话说"君欲善其事,必先利其器."笔者也使用VScode开发有一段时间了,不得不说,VSCode是我目前用到的众多开发工具中最好使用的一款.当然这些功能大多得归功于VSCod ...
Y件DOOK: VSC 安装谷歌浏览器调试固件插件 Debugger for Chorme
YDOOK: VSC 安装谷歌浏览器调试固件插件 Debugger for Chorme 1. 打开 VDC 2. 在插件库中输入: chrome 3. 点击选择安装第一个:Debugger fo ...

Debugger for Chrome

作用

使用

安装插件

配置

必填参数

可选参数

启动项目

Debugger for Chrome相关推荐

最新文章

热门文章