前端开发调试 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

前端Debug的特点

• 多平台 浏览器，小程序，桌面应用
• 多环境 本地，网络
• 多工具 chrome，whistle
• 多技巧 代理，console

PC端调试

Chorme DevTools 是 chorme内核提供的高效的前端调试工具，我们在 chorme浏览器按 F12 或者点击右键 -> 检查

Elements（元素）用于调试类，样式

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选，取消类名可以动态的查看类名生效效果
• 点击具体的样式值，可以进行编辑，实时预览
• computed下点击样式里箭头可以跳转style面板中的css

Console（控制台）

对日志分类查看

• console.log
• console.warn
• console.error
• console.debug
• console.info
• console.table 具像化的展示JSON和数组数据
• console.dir 通过类似文件树的方式展示对象的属性
• 占位符 给日志添加样式，可以突出重要的信息。
• %s 字符串
• %o 对象
• %c 样式
• %d 数字

Score Tab（源代码）

• 使用关键字debugger或代码预览区域的行号设置断点
• 执行到断点处时代码暂停执行
• 展开Breakpoints列表查看断点列表
• 暂停状态下，hover变量可以查看变量的值
• 在调试器查看变量的值

NetWork（网络）

这个界面包含了浏览器的请求的各种资源

可以在这个页面控制面板处模拟不同的网络环境，比如弱网环境来进行调试，也可以在写请求详细页面获得接口的传入值和返回值进行接口的调试

Application（应用）

本地存储设置，缓存，后台服务

Performance（性能）

Lighthouse（性能分析）

移动端调试

• 真机调试
• 代理调试
• 常用工具Mock