这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
重点内容
- PC端调试
- 移动端调试
详细知识点：
PC端调试
Chrome DevTools
Elements界面：
网页对应的元素，（点击任意元素后）右侧的Styles中可以修改对应元素的样式
例子：稀土掘金首页navbar元素
点击右侧Styles底下的.cls开启动态修改元素的class，输入字符可以动态给元素添加类名。勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
两种方法强制激活伪类：
-
选中具有伪类的元素，点击:hov
-
DOM树右键菜单，选择Force State
Computed下点击杨师立的箭头可以跳转到styles面板中的CSS规则
Console界面：
给日志添加样式，可以突出重要信息
%s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符
console.table：具象化的展示JSON喝数组数据
console.dir：通过类似文件树的方式展示对象的属性
Sourses 界面：
左：页面资源文件目录树
中：代码预览区域 - 暂停/继续，单步跳过，进入函数，跳出函数，单步执行，激活/关闭所有断点
右下：debug工具栏
右上：断点调试器
断点调试界面：
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
Performance
区域1：控制面板
区域2：概览面板
- FPS：每秒帧数；CPU: 处理各个任务发生的时间；NET：各个请求花费的时间 区域3：线程面板
- Frames：帧线程；Main：主线程，负责执行JS，解析HTML/CSS，完成绘制；Raster：负责完成某个layer或者某些块（til）的绘制 区域4：统计面板
移动端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按钮
- 进入调试界面
NodeJS调试
Inspector Protocol + Chrome Devtool
- 执行命令
node --inspect=8888 index.js - chrome浏览器访问服务器
- 点击node图标打开node调试面板
- 在node调式面板中使用断点调式
