前端必须知道的开发调试知识 ｜ 青训营笔记

前端bug的特点

1 多平台：浏览器、nodejs、桌面应用

2 多环境：本地开发环境、线上开发环境

3 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole

4 多技巧：Console、BreakPoint、SourceMap、代理

Chrome DevTools

Elements模块

动态修改元素和样式

1. 点击 .cls 开启动态修改元素的 class
   
2. 输入字符串可以动态的给元素添加类名
   
3. 勾选/取消类名可以动态的查看类名生效效果
   
4. 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
   
5. Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则
   
6. 可以用以下2种方法强制激活伪类

1. 选中具有伪类的元素，点击 :hov
2. DOM 树右键菜单，选择 Force State

Console模块

常用调试代码：

• console.log：输出
• console.warn：向web输出的警告消息
• console.error：报错，最烦的玩意，有时候不出也烦
• console.debug：当控制台配置为显示调试输出时，该消息会显示给用户。
• console.table：展示JSON和数组数据
• console.dir：展示对象属性，方便找到我们需要的属性及属性值

Source模块

• 使用关键字debugger或代码预览区域的行号可以设置断点
• 执行到断点处时代码暂停执行
• 展开 Breakpoints 列表可以查看断点列表，勾选／取消可以激活／禁用对应断点
• 暂停状态下，鼠标 hover可以查看变量的值变量
• 在调试器 Watch右侧点击＋可以添加对变量的监控，查看该变量的值
• 展开Scope 可以查看作用域列表（包含闭包）
• 展开 Call Stack 可以查看当前javaScript 代码的调用栈

Network模块

说来话长，来日方长再细说

Application模块

Application 面板展示与本地存储相关的信息

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie

Ps：点击Application下的Stroage 面板中的 Clear Site Data可以清楚网页的本地存储数据

移动端H5调试

真机调试

iOS

• 使用 Lightning 数据线将 iPhone 与 Mac 相连
• iPhone 开启 Web 检查器(设置 -> Safari -> 高级 -> 开启 Web 检查器)
• iPhone 使用 Safari 浏览器打开要调试的页面
• Mac 打开 Safari 浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面)
• 在弹出的 Safari Developer Tools 中调试

没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器

Android

• 使用 USB 数据线将手机与电脑相连
• 手机进入开发者模式，勾选 USB 调试，并允许调试
• 电脑打开 Chrome 浏览器，在地址栏输入:chrome://inspect/#devices 并勾选 Discover USB devices 选项
• 手机允许远程调试，并访问调试页面
• 电脑点击 inspect 按钮
• 进入调试界面

VConsole

• 日志(Logs)：console.log|info|error|..
• 网络(Network)：XMLHttpRequest,Fetch, sendBeacon
• 节点(Element):：HTML 节点树
• 存储(Storage): Cookies,LocalStorage, SessionStorage
• 手动执行 JS 命令行
• 自定义插件

小黄鸭大法