前端调试方法与技巧

一、pc端项目（浏览器端的，主要指电脑端的网页）

控制台中各功能按钮介绍

chrome开发者工具最常用的四个功能模块：
Elements：主要用来查看前面界面的html的Dom结构，和修改css的样式。css可以即时修改，即使显示。大大方便了开发者调试页面，这真是十分友好的~
console：这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入”console”并执行~
Sources：主要用来调试js和查看源代码
Network：前后端请求交互，http超文本传输协议

1、Element 源码定位、console控制台、source源码介绍
打开测试工具，点击箭头，在页面中选择要审查的元素，此时会定位在代码块，会有html及css布局的展示，可进行动态更改排查问题
若html中有调用事件，如何定位事件：el-button.btn-color(plain @click = ‘showMessageNotification’ slot=‘otherBtn’) 新建消息通知
（1）在console中输人方法然后回车，有链接点击控制台会定位source面板中展示一行js，此时点击中间面板左下方的Pretty print就行了，会换行展示且会正确定位该方法在源码中的行号。
（2）进入源码后在行左侧点击设置断点即可（记得不用时将断点去除）。也可以直接根据页面在对应的位置找到源码进行断点设置(眼睛是一直执行下一步逻辑的意思，箭头是继续执行下一个断点，直到结束完成)

箭头：停止断点调试
眼睛：不跳入函数中去，继续执行下一行代码（F10）
向下的箭头：跳入函数中去（F11）
向上的箭头：从执行的函数中跳出
带斜杠的图标：禁用所有的断点，不做任何调试
最后一个图标：程序运行时遇到异常时是否中断的开关

element在调试窗口中查看和修改元素：
每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture
console:控制台或代码中善用console，它会清晰的打印出我们在执行中数据的值，方便查看。不要使用alert，因为alert是阻断线程运营的操作，当不点击当前alert的确定，下一个alert是不会出现且对数据较多时不友好。

2、network介绍

（1）记录请求资源，即页面加载时接口的记录，当关闭后就不会有请求信息展示
（2）清空请求信息，删除的意思
（3）捕获截屏
（4）过滤资源，当点击时下方会出现fillter过滤框，可以筛选请求的URL，定位自己要查看的请求
（5）其他不经常用，看上方红色文案的介绍

请求中各个字段含义：

（1）Name/Pat：资源名称以及URL路径 （main.css）
（2）Method：Http请求方法 (GET或者POST)
（3）status/Text：Http状态码/文字解释 （200，ok）
（4）Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
（5）Initiator：解释请求是怎么发起的，有四种可能的值
Parser ：请求是由页面的html解析时发送
Redirect：请求是由页面重定向发送
script ：请求是由script脚本处理发送
other ：请求是由其他过程发送的，比如页面里的Link链接点击
size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小

点击具体的一个接口各个字段的含义：

（1）headers:面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
（2）preview:预览面板，用于资源的预览（一般是后端返回的值 res.data大对象）
（3）response:响应信息面板包含资源还未进行格式处理的内容（没有格式化，长长的一串）
（4）Timing:资源请求的详细数据花费时间（一般可看请求到返回的所用的时间）
⚠️ ：对某请求右键时：
Copy Request Headers：复制HTTP请求头到系统剪贴板
Copy Response Headers：复制HTTP响应头到系统剪贴板
Copy Response：复制HTTP响应内容到系统剪贴板
Copy as
cURL：将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库，用于配合url语法进行数据传输)
Copy All as HAR：将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)
Save as HAR with Content：将资源的所有的网络信息保存到HAR文件中(.har文件)
Clear Browser Cache：清除浏览器缓存（或：在…更多工具中清除浏览器缓存，时间不限）
Clear Browser Cookies：清除浏览器cookies
Open in Sources Panel：当前选中资源在Sources面板打开
Open Link in New Tab：在新tab打开资源链接
Copy Link Address：复制资源url到系统剪贴板

二、移动端项目（手机、pad等app项目）
1、连接本地进行调试
此时可通过代码中console、charles代理、断点进行代码的调试
2、没有连本地代码
可将移动端的网络加入代理（手机或pad的无线），输入电脑端的ip。此时可利用电脑端的网络代理charles进行查看接口请求情况，进行问题排查。