一、调试准备
windows10 64bits
ide:visual studio code1.28.2
安装插件:chrome(安装方法:debug -> install additional debuggers... -> debugger for chrome,重新启动vscode即可。)
二、调试配置
首先该插件运行需要安装有本地服务器,其次有两种配置方式,分别为:
(1)launch:重新打开一个chrome来显示应用程序
(2)attach:在已经运行的chrome中显示应用程序
2.1、launch配置
按f5并选择chrome进入配置文件launch.json,我的launch配置如下所示:
1 "version": "0.2.0", 2 "configurations": [ 3 { 4 "type": "chrome", 5 "request": "launch", 6 "name": "launch chrome against localhost", 7 "url": "http://localhost/文件路径", 8 "webroot": "${workspacefolder}" 9 } 10 ]
2.2、attach配置
attach的launch.json配置如下所示:
1 { 2 "type": "chrome", 3 "request": "attach", 4 "name": "attach to chrome", 5 "port": 9222, 6 "sourcemaps": true, 7 "webroot": "${workspacefolder}" 8 }
步骤一:让chrome进入调试模式:
方法一:在命令行中进行设置:
1 路径/chrome.exe --remote-debugging-port=9222
方法二:chrome桌面图标右键 -> 属性 -> 目标 -> 在路径后面添加 --remote-debugging-port=9222 即可。
其中 --remote-debugging-port 的值与lanuch.json中的 port 的值要匹配。然后在浏览器中打开本地服务器上的web页面
步骤二:在vscode中打开调试按钮进行调试,即可进入调试模式。
![](http://www.lhsxpumps.com/_images3/10qianwan/20181024/b_0_201810241602134716.jpg)
更多前端资料,欢迎关注公众号:
![](http://www.lhsxpumps.com/_images3/10qianwan/20181024/b_0_201810241602133430.jpg)
参考文献
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论