这是我参与「第四届青训营 」笔记创作活动的第2天
前端Debug特点
- 多平台：浏览器、Hybrid、NodeJs、小程序，桌面应用...
- 多环境：本地开发环境 ， 线上环境
- 多工具：Chrome devTools，Charles，Spy-Debugger...
- 多技巧：控制台输出，设断电，SourceMap，代理...
PC端
例：Chrome Devtools(Chrome自带的调试工具)
如何使用?
-
打开浏览器 -> 检查
-
Elements面板
1.通过点击cls来显示元素样式，以及动态添加或删除类名 可以在style栏中实时修改样式
用处:在前端开发中，可以通过这种方式进行样式的调试
注意点:伪类并不能实时显示 如何调试伪类:点击伪类元素->forcestate->选中hover 当属性较多的时候:点击compted->侧边栏->搜索属性->切换到对应样式
2.对元素本身进行修改 例:找到干扰项->delete
-
console面板
console.table:可以输出表格信息 console.dir:输出树形结构中结点信息
具体用处：使用console解决代码bug 存在问题的代码部分使用console.log,逐步排查(小方法:自定义参数)
- source面板
在代码中输入debugger，程序会暂停运行 在代码段中添加断点，breakpoints中可以勾选取消对应的断点
补充:scope(作用域)和call stack(备用栈)与debug关系不大
用处 可以帮助我们查看js中有哪些作用
-
压缩后的代码如何进行调试？
-
解决方法:
创建sourceMap,供我们调试，上线后再删除sourceMap(在监控平台上找到sourceMap,供我们调试)
-
-
sourceMap概念
问题:源码和sourceMap文件是怎么对应上的? 答:sourceMap源码之间是映射的关系，所以可以快速的匹配上
-
performance面板
-
生成报告，汇报页面是如何进行渲染的
-
作用:定位到页面有哪些问题
-
-
network面板
- 作用:定位与后端交互时产生的问题
- 用法:查看request和response的内容来定位问题
-
Application
-
与浏览器的本地存储有关
-
如何清除缓存:
Appication->storage->clear site data
-
总结概括
- Elements:查看dom结点，样式，调整样式。
- console:输出不同类型的日志，结合代码，解决不同的问题
- source:查看网页内容，通过debugger调试，查看变量值，帮助我们更好的定位问题
- Network:请求相关
- performance:性能相关
- Application:本地存储相关
三种前端开发必备的调试技术
在前端开发中，调试技术是必不可少的技能，下文将介绍三种前端开发必备的调试技术。
- Weinre移动调试
- DOM 断点
- debugger断点
Weinre
在移动上面开发调试是很复杂的，所以就有了weinre。安装weinre可以实现pc来调试手机页面，所以对于移动开发调试是很重要的哦~
安装weinre
weinre可以通过npm来安装：
npm install -g weinre
安装完之后，可执行下面的命令来启动：
weinre --httpPort 8080 --boundHost -all-
这样访问自己的127.0.0.1:8080按照提示在需要调试页面中插入一段js，然后就可以调试了。操作界面类似Chrome的DevTools，具体操作自己找资料去
原理
通过在需要调试的页面中引入一段weinre的js，实现pc和手机的socket通信，从而实现实时调试。
DOM断点
DOM断点是一个Firebug和chrome DevTools提供的功能，当js需要操作打了断点的DOM时，会自动暂停，类似debugger调试。
-
使用DOM断点
- 选择你要打断点的DOM节点
- 右键选择Break on..
- 选择断点类型
-
Tips
- Firebug中，DOM断点可以在Script> Breakpoints里面看到
- chrome DevTools中，需要在Elements面板的DOM Breakpoints中看到
-
javascript的debugger语句
需要调试js的时候，我们可以给需要调试的地方通过debugger打断点，代码执行到断点就会暂停，这时候通过单步调试等方式就可以调试js代码
-
使用javascript的断点
在需要打断点的地方添加debugger：
if (waldo) {
debugger;
}
这时候打开console面板，就可以调试了
-
Tips
如果你不知道怎么调试，那么尽快看下：Chrome DevTools中断点部分的教程
