前端调试之断点

时间 2019-11-11

标签前端调试断点繁體版

原文原文链接

前端调试之断点

前言

当我第一次知道这种东西，我也惊呆了，竟然还有这种操做，实在强大到没朋友，今后爱上调试，按时下班
无数次经过调试解决问题的经验告诉我，调试绝对是开发者最应该掌握的重要技能之一。调试能帮助咱们定位问题解决问题，每解决一个问题，经验值就往上涨。后面就能够考经验解决不少问题，而且能正确避开当年踩过的雷区，减小再犯次数，节省解决问题的时间，大大提升开发效率和编码水平。我想这应该是掌握调试技能的一个很重要意义，而不只仅是为了解决问题
你是否遇到过如下状况：
1. 按钮的点击事件不起做用，点击按钮没反应。下载人家的demo运行，点击登陆以后不出错页面也不跳转
2. 请求数据后填充到页面，可是页面却不显示数据
3. 某个请求老是被取消
4. 明明按照人家教程来写，代码如出一辙，却得不到和教程同样的效果
5. 无心中写错字母，大小写部分，运行出错，可是看代码怎么都看不出问题
6. 按照文档的写法，控制台总是报错，且错误发生在使用的组件里面，不是本身写的代码
7. 等等，还有不少类型的问题
以上问题基本均可以经过调试解决，只须要掌握相关的调试技巧就能够

断点

调试的第一步就是打断点。断点的目的是，代码运行时在你想要开始调试的地方停下来。这个时候就能够查看当前上下文信息，好比全局变量、局部变量的值，函数的输入是否正确，请求的返回值是否正常等。经过此操做判断问题发生的地方，好对症下药
以谷歌浏览器（版本为69）为例，编辑器为VSCode（版本1.26.1）

断点方式一

这种方式是比较经常使用的方式，在浏览器开发工具找到对应源码，在script脚本节点里面的代码行断点

首先在浏览器页面按F12打开开发工具，点击Sources选项，默认显示的是Page标签。而后找到须要调试的源码文件
若是是正常html页面，那么源码通常是在对应域名下面。若是是webpack处理的页面，而且开启了源码映射，源码就是在webpack://下面。可经过快捷键ctrl+ o打开搜索框输入文件名搜索源码
只要找到源码，在脚本代码显示区域左边的数字上添加断点便可，以后只要代码运行到断点处，开发工具就会进入调试状态
注意：有的数字行是灰色的，就是不可断点。有时候点击15行断点选中14行，这是由于浏览器真正执行的代码行不是你看到的那一行，多是优化掉了或者通过某种转换。还有的状况是，添加某一行断点，会跳转到另外一个页面并命中某一行,这个页面的背景色是黄色且文件名是VM开头。上述状况，大部分都是由于浏览器显示的源码版本，跟真正的源码文件不一致，只须要刷新一下页面，保证显示的源码是最新的便可

技巧1：有时候源码历经千辛万苦都找不到在哪，这时候就须要祭出console.log了。在须要调试的那一行代码前加上console.log(666),而后运行一次，到控制台查看结果输出，点击右边的连接会自动跳转到源码，这样就能够直接断点了

技巧2：以下图，在Filesystem添加文件夹到工做路径，选择以后会有提示，点击接受。若是你的谷歌浏览器没有这玩意，请升级版本，仍是没有的话，请忽略这段话。虽然不知道这是何时出的功能，可是我偶然发现的，它能够编辑以后真的保存到文件，这个能够当编辑器用了。

断点方式二

这种方式很粗暴，在须要调试的地方加debugger关键字，代码运行到的时候会自动停下，进入调试模式
此方法不须要手动断点，可是麻烦的是可能你调试一次就不用再调试了，可是每次运行到那里都会停下，必须移除这个代码才行
这玩意我在很多网站也见到有人用，不想让人家方便的查看到网站源码，一打开控制台就自动debugger

断点方式三

这种方式简单归为在编辑器中断点调试，是须要链接调试器（能够是远程调试器）或者附加进程，而后接收调试信息，就能够在编辑器源码进行断点调试
在Chrome和VS Code中调试Vue.js：此方法出处。这种方式使用VSCode的“Debugger for Chrome”扩展，推荐。感受就是上面的第一种方式，只不过将源码映射到本地源码，并在编辑器上显示。简单介绍下步骤：
1. webpack配置：webpack配置添加devtool：'source-map'开启源码映射。

// Vue CLI 3.X module.exports = { configureWebpack: { devtool: "source-map" } };

调试配置：VSCode中按F5，将出现选择环境的输入框（若是已有launch.json不会出现），选择Chrome。在launch.json中的配置以下。其中url是打开浏览器以后访问的地址，webRoot是app.js、main.js等入口文件所在目录，后面两个是实验性功能（高级功能，鼠标悬停在上面会有说明）

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "启动 Chrome 并打开 localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }

调试：在vue文件组件你想调试的行的断点，经过命令npm start、npm dev或者npm serve其中一个命令（具体是哪个能够查看package.json的scripts节点）运行项目
按F5启动调试，一切正常的话将会命中你的断点
注意：若是没有命中断点而且你的断点不是红点，须要一个骚操做才能在VSCode断点调试：在打开的谷歌浏览器的开发工具源码断点调试一次（或者加关键字debugger触发调试,参考上面方式一），运行到断点处VSCode会自跳出一个缓存的源码页来进行调试。另外，基于以上状况，若是在VSCode调试的显示的源码跟真的源码不一样，那么就是源码映射不正确，上面的配置webRoot不正确。即便不正确，经过这个骚操做同样能够在VSCode调试，就是不太优雅，效果以下：

远程调试Chrome
- 附加浏览器的方式，不一样于上一种，修改代码后要刷新页面才能从新断点调试
- 待更新

断点方式四

这种方式归为调试nodejs,能够调试webpack配置，或者后端运行的node实例。javascript
这种方式是在启动node的时候加上--inspect，开启V8 Inspector功能，经过WebSockets通讯，调试器链接便可调试，更多调试器参考官方文档。如下是几个示例：html
- 调试vue.config.js，能够在调试查看配置，这样即便看不懂文档也能够按照本身的想法来写配置，甚至根本不用在看文档。使用方式是在VSCode配置以下，两种配置等效。调试webpack.config.js同理，将启动文件替换便可，可查看package.json的scripts节点对应命令肯定启动文件
```
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "args": [ "serve" ], "program": "${workspaceFolder} /node_modules/@vue/cli-service/bin/v ue-cli-service. js"//client-app/src/aspnet-dev.js" }, { "type": "node", "request": "launch", "name": "Launch via NPM", "runtimeExecutable": "node", "runtimeArgs": [ "--inspect-brk=9229", ". /node_modules/@vue/cli-service/b in/vue-cli-service.js", //"./client-app/src/aspnet-dev. js", "serve" ], "autoAttachChildProcesses": true, "port": 9229 } ] } 
```
- 调试aspnetcore的NodeServices其中一种打开方式，这个能够在VSCode进行调试，调试器由VSCode提供，不会自动链接，有点麻烦，建议用下一种，方便。
- 若是用谷歌浏览器的开发工具作调试器，能够尝试插件nim，启动node或自动打开标签页。或者谷歌浏览器自带的，在Connection处添加链接，检测到信号会自动链接，在Filesyatem添加须要调试的源码便可。若是浏览器链接了node环境的站点，而且启用了Inspector，那么开发工具会有一个图标能够快速打开node调试器

其余参考（按推荐指数排列）

一探前端开发中的JS调试技巧（推荐看一看，找了一圈才找到这个原创地址）
有哪些 JS 调试技巧？
使用Visual Studio Code的“Debugger for Chrome”扩展
vuejs官方文档：在 VS Code 和 Chrome 中调试
Node.js的V8 Inspector集成
Node.js调试指南
在VSCode中调试
vuejs论坛相关讨论
调试程序时，设置断点的原理是什么？

连接：http://www.imooc.com/article/246860前端