打断点和调试技巧
(一)打断点必备的两方面知识
1.流程控制语句
1.顺序(代码从上到下执行)结构
2.分支结构
3.循环结构
2.函数
1.函数声明阶段
2.函数使用阶段,函数被调用的时候,函数内的代码回执行
(二)打断点的两种方式
1.在代码里面写debugger,当代码运行到debugger的位置时,代码就会停住
2.在控制台的source里去打断点
(三)断点想打的准确,必须清楚程序的运行方向
(四)浏览器断点的符号意思 控制台->source
从左往右
image.png
1.第一个符号 去到下一个断点
2.代码运行到下一句
3.如果遇到函数,第三个表示进去函数内部
4.第5个 忽略断点(断点失效)
最常用的是1,2,3,6这几个符号
开发者工具(谷歌浏览器)
1.element 修改样式
2.console 查看打印信息
3.souce 打断点
4.xhr 查看请求地址,请求参数,返回的数据
image.png
1.元素
2.控制台
3.source资源查看js等其他文件,常常在js里打断点查看变量情况
4.network网络 网络的资源和状态都在这里显示
image.png
1.all 所有的请求
2.xhr ajax请求(最常用)
(1)查看数据是否正常
(2)查看请求数据是否正确
3.js
5.ajax请求说明
(1)headers 请求头
查看请求地址
查看请求参数
(2)preview 预览
(3)response 响应数据(后台返回的数据)
