这是我参与「第四届青训营 」笔记创作活动的第2天
debug工具
Chrome DevTools
| Elements | Console | Source | Performance | Network |
A.动态修改元素和样式
- 点击.cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles面板中的 css 规则
可以用以下2种方式强制激活伪类：
- 选中具有伪类的元素，点击:hov
- DOM 树右键菜单，选择 Force State
B.Console的用法
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table：具像化的展示 JSON 和 数组数据
- console.dir：通过类似文件树的方式展示对象的属性
- 占位符：给日志添加样式，可以突出重要的信息
- %s: 字符串占位符;
- %o: 对象占位符;
- %c: 样式占位符;
- %d: 数字占位符
C.Sorce Tab
D. Break Point 与 Watch
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 +可以添加对变量的监控，查看该变量的值
E. Scorpe 与 Call Stack
- 展开Scope 可以查看作用域列表（包含闭包）
- 展开Call Stack 可以查看当前JavaScript 代码的调用栈
F. NetWork
G. Performance
H. Lighthouse
移动端 H5 调试
| IOS | Android |
|---|---|
| 1. 使用 Lightning 数据线将 iPhone 与 Mac 相连 | 1. 使用 USB 数据线将手机与电脑相连 |
| 2.iPhone 开启 Web 检查器(设置 -> Safari ->高级 -> 开启 Web 检查器) | 2.手机进入开发者模式，勾选 USB 调试，并允许调试 |
| 3. iPhone 使用 Safari 浏览器打开要调试的页面 | 3.电脑打开 Chrome 浏览器，在地址栏输入:chrome://inspect/#devices 并勾选 Discover USB devices 选项 |
| 4.Mac 打开 Safari 浏览器调试(菜单栏 ->开发->iPhone 设备名 -> 选择调试页面) | 4.手机允许远程调试，并访问调试页面 |
| 5.在弹出的 Safari Developer Tools 中调试 | 5.电脑点击 inspect 按钮 |
| 6.进入调试界面 | |
| 没有 iPhone 设备可以在 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器 | 直接使用手机扫码查看，体验更佳 |
VConsole
- 日志(Logs)：console.log|info|error|..
- 网络(Network)：XMLHttpRequest,Fetch,sendbeacon
- 节点(Element)：HTML 节点树
- 存储(Storage): Cookies,Localstorage, Sessionstorage
- 手动执行 JS 命令行
- 自定义插件
使用代理工具调试
原理:
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
以 Charles 为例:
- 安装 Charles
- 查看电脑 IP 和 端口
- 将 IP、端口号填入手机 HTTP 代理
- Charles 允许授权
- 使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
- 手机访问开发环境页面
注意：默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。
NodejS调试
Inspector Protocol + Chrome Devtool
- 执行命令 node --inspect=8888 index.js
- chrome 浏览器访问服务
- 点击绿色 node 图标打开 node 调试面板(在chrome://inspect/#devices 中配置network target)
- 在 node 调试面板中使用断点调试
Inspector Protocol + VS Code
VS Code 点击运行 --> 添加配置 --> 启动调试 --> 添加断点 --> 查看变量、堆栈
常用开发调试技巧
1.线上即时修改 Overrides
2.利用代理解决开发阶段的跨域问题
3.启动本地Source map
4.使用代理工具Mock数据
