前端必须知道的调试知识 | 青训营
PC端调试
Elements（元素）
-
用于检查和修改DOM元素，包括HTML结构、CSS样式等。可以实时编辑、添加、删除元素来查看效果。
-
动态修改元素和样式。点击.cls 开启动态修改元素的 class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态的查看类名生效效果
-
点击具体的样式值(字号、颜色、宽度高度等可以进行编辑，浏览器内容区域实时预览 Computed 下点击样式里的箭头可以跳转到 styl面板中的 css 规则
-
可以用以下 2 种方式强制激活伪类
选中具有伪类的元素，点击: hov
DOM 树右键菜单，选择 Force State
Console（控制台）
-
用于输出JavaScript代码的日志信息，方便开发者在代码执行过程中进行调试和错误排查。
-
console.log
-
console.warn
-
console.error
-
console.debug
-
console.info
-
console.table 具像化的展示JSON 和数组数据
-
console.dir
通过类似文件树的方式展示对象的属性
-
占位符
给日志添加样式，可以突出重要的信息
%s: 字符串占位符，%o: 对象占位符，%c: 样式占位符，%d: 数字占位符
Source（源代码）
可以在浏览器中查看和调试JavaScript源代码，包括断点设置、单步执行等功能。
Performance（性能）
可以分析页面的性能情况，包括加载时间、资源占用等，以便进行优化。
Network（网络）
可以监控页面的网络请求和响应，查看请求头、响应头、请求体等信息，有助于网络问题的排查和优化。
移动端调试
真机调试
通过将移动设备连接到开发者计算机，可以在真实的移动设备上进行调试，检查页面在实际设备上的表现。
ios
- 使用 Lightning 数据线将 iPhone 与 Mac 相连2.iPhone 开启 Web 检查器 (设置 -> Safari->高级-> 开启 Web 检查器)
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试(菜单栏一>开发->iPhone 设备名->选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
Android
1.使用 USB 数据线将手机与电脑相连
2.手机进入开发者模式，勾选 USB 调试，并允许调试
3.电脑打开 Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USBdevices 选项
4.手机允许远程调试，并访问调试页面
5.电脑点击 inspect 按钮
6.进入调试界面
代理调试
使用代理工具，如Charles或Fiddler，拦截移动设备与服务器之间的网络请求，以便查看和分析数据流量。
原理：
电脑作为代理服务器手机通过 HTTP 代理连接到电脑手机上的请求都经过代理服务器。
以 Charles 为例：
1.安装Charles
2.查看电脑IP和端口
3.将IP、端口号填入手机 HTTP 代理
4.Charles 允许授权
5.使用 SwitchHosts!软件给 Mac 电脑Hosts
6.手机访问开发环境页面
常用工具
一些常用的移动端调试工具，如Chrome开发者工具的移动模拟器、Weinre（Web Inspector Remote）等，用于模拟和调试移动设备上的页面。
