这是我参与「第五届青训营」伴学笔记创作活动的第19天
这节课讲了
- Web 应用使用 Chrome devTools 调试
- 移动端 H5 调试
- NodeJs 应用调试
- 常用代理工具的使用
使用浏览器调试
在本地代码端，可以 通过添加一行 debugger; 命令，当代码执行到这一行，会自动进入调试模式 从浏览器端进行浏览器调试需要以下几个步骤：
- 打开 浏览器开发者工具的 Sources 源代码面板
- 找到需要调试的文件
- 打断点
- 进入 Debugger 模式，开始调试
移动端 H5 调试
- 使用 Chrome inspect 调试手机Webview页面
- 使用 Charles 代理，请求抓包
- 使用 Charles 在手机上实时跑 PC 端代码
- IOS模拟器调试和查看各机型表现
PC端调试
前端Debug特点
- 多平台:浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境:本地开发环境、线上环境
- 多工具:Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole ...
- 多技巧:Console、BreakPoint、sourceMap、代理等
调试方法
动态修改元素和样式
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到styles面板中的 css 规则
Console
- console.log
- console.warn
- console.error
- console.debug
- console.debug
- console.info
- console.table 具体化的展示 JSON 和 数组数据
- console.dir 通过类似文件树的方式展示对象的属性
Source Map 出于安全考虑，上线之前js会被压缩，压缩后只有一行，变量使用'a','b'替换 mappings 字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行
Application Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- Indexed DB
- Web SQL
- Cookie
