美文网首页
38.vscode怎样调用谷歌浏览器调试断点

38.vscode怎样调用谷歌浏览器调试断点

作者: yaoyao妖妖 | 来源:发表于2018-09-28 17:14 被阅读46次
1. 下载插件debug for chrome
屏幕快照 2018-09-28 17.01.52.png
2. 配置chrome 的9222端口

步骤:Mac打开终端,输入
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

3. 配置vscode配置
屏幕快照 2018-09-28 17.02.15.png

launch.json

{
 // 使用 IntelliSense 了解相关属性。 
 // 悬停以查看现有属性的描述。
 // 告诉vscode可以通过连接chrome浏览器的9222端口对http://localhost:8080网页进行调试;
 "version": "0.2.0",
 "configurations": [
     {
         "type": "chrome",
         "request": "launch",
         "name": "Attach to Chrome",
         "port": 9222,
         "webRoot": "${workspaceFolder}/src",
         "url":"http://localhost:8080",
         "sourceMaps": true,
         "sourceMapPathOverrides": {
             "webpack:///src/*":"${webRoot}/*"
         }
     }
 ]
}
4.修改config 目录下的 index.js

修改 webpack 的 sourcemap如果你是基于 webpack 打包的 vue 项目, 可能会存在断点不匹配的问题, 还需要做些修改:
打开根目录下的 config 目录下的 index.js 文件将dev 节点下的

  • devtool 值改为 'eval-source-map'将dev节点下的
  • cacheBusting 值改为 false
屏幕快照 2018-09-28 17.27.34.png
5. 之后一定要记得关闭所有的chrome 窗口,(一定要记得,不然会链接失败的)
6. 然后点击图2的步骤4,就会自动打开谷歌浏览器的窗口,对应的项目也会启动,然后你就可以开心的调试了。。。
7. vscode增加断点
屏幕快照 2018-09-28 17.32.20.png

看红色圈住的地方,点在200行数在的地方是打不上断点的

8. 调试
屏幕快照 2018-09-28 17.39.18.png 屏幕快照 2018-09-28 17.43.23.png
  1. 运行到下一个断点处
  2. 跳到下一行代码
  3. 跳进断点函数里面进行调试
  4. 跳出断点函数
  5. 刷新
  6. 停止程序

相关文章

  • 38.vscode怎样调用谷歌浏览器调试断点

    1. 下载插件debug for chrome 2. 配置chrome 的9222端口 步骤:Mac打开终端,输入...

  • webstorm断点调试ReactNative

    1. 用 Chrome 断点调试RN 不用安装 React Develper Tools 谷歌浏览器插件,也能断点...

  • 谷歌断点调试

    一、 F12谷歌浏览器进入调试模式。Console是控制台:查看日志和报错;Sources是资源:打断点调试查看...

  • Vue学习知识技巧

    3.获取dom距离y值的高度 4.动态绑定style样式 谷歌浏览器在Sources里面打断点进行调试的时候,无法...

  • java学习弟七章(断点和调试)

    Debug调试 如果谷歌浏览器图片看不到请用火狐浏览器打开!我也不知道简书咋个兼容的~~~ 第一步:打断点imag...

  • 谷歌浏览器—打断点调试页面

    参考:http://www.360kuai.com/pc/9b1fdaafe62592719?cota=4&tj_...

  • vscode调试node

    序言 在进行前端开发时,我们可以很方便的在谷歌浏览器上打断点调试我们的程序,但是如果使用了node来编写后台或者中...

  • Android Studio调试

    参考 断点调试 实用调试 总结:断点调试有step into step out 等 实用调试:条件断点、日志断点、...

  • web开发调试方法

    本文主要谈谈web开发的调试 console调试 log调试法,很无脑,非常实用 浏览器F12断点调试 能更好的理...

  • web前端常用调试方法

    1、普通浏览器调试方法 作为前端都知道的调试方法。打开浏览器调试框(此处以谷歌浏览器举例),我们会看到如图的所有检...

网友评论

      本文标题:38.vscode怎样调用谷歌浏览器调试断点

      本文链接:https://www.haomeiwen.com/subject/tvvpoftx.html