前端必须知道的开发调试知识|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第8天
Bug与Debug
Bug的产生
前端Debug的特点
- 多平台
- 多环境
- 多工具
- 多技巧
Google Devtools
修改元素和样式
-
点击.cls开启动态修改元素的class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态的查看类名生效效果
-
点击具体的样式值(字号，颜色，宽度高度等)可以进行编辑，浏览器内容区域实时预览
-
Computed下点击样式里的箭头可以跳转到styles面板中的css规则 Console
-
console.log
-
console.warn
-
console.error
-
console.debug
-
console.info
-
console.table
具象化展示JSON和数组数据 -
console.dir 通过类似文件树的方式展示对象的属性
-
占位符 给日志添加样式，可以突出重要的信息
%s:字符串占位符
%o:对象占位符
%c:样式占位符
%d:数字占位符
Source Tab
Application
Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie Performance
LightHouse
移动端H5调试
真机调试
iOS
- 使用Lightning数据线将iPhone与Mac相连
- iPhone开启Web检查器
- iPhone使用Safari浏览器打开要调试的页面
- Mac打开Safari浏览器调试
- 在弹出的Safari Developer Tools中调试 Android
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试
- 电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices 并勾选Discover USB devices选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
