PC 端调试:
前端Debug的特点：多平台，多环境，多工具，多技巧
Elements:用于查看和编辑网页 HTML 和 CSS 的工具。可以在这里查看页面元素的结构，修改样式，并通过它查看每个元素的样式和布局。点击cls开启动态修改元素的class输入字符串可以动态的给元素添加类名，勾选/取消类名可以动态的查看类名生效效果·点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览，Computed下点击样式里的箭头可以跳转到styles面板中的cSs规则，可以用以下2种方式强制激活伪类·选中具有伪类的元素，点击:hov. DOM树右键菜单，选择Force State
Console:JavaScript 控制台，用于在网页运行时执行 JavaScript 代码，查看执行结果和调试信息。可以使用这个工具来检查变量值，执行代码片段，并在页面中进行实时调试。
Source:用于查看网页源代码的工具。可以在这里查看网页的 HTML，CSS 和 JavaScript 代码，并对它们进行调整。
Performance:一个性能分析工具，用于查看网页加载性能和渲染性能。可以使用这个工具来了解页面的加载时间，执行的 JavaScript 代码和渲染的图形，并对其进行优化。
Network:一个网络请求分析工具，用于查看网页加载的网络请求。可以使用这个工具来检查请求的响应时间，请求的大小，并对其进行优化。
移动端调试：
真机调试：指通过连接真实的移动设备进行调试，能更好地反映用户实际使用场景，
代理调试：在移动端设备和开发工具之间加入代理服务器，对移动端的请求进行抓包调试。
常用工具：charles
常用开发技巧：
- 线上及时修改overrides:使用浏览器的开发者工具可以线上实时修改样式，结构，JavaScript代码，方便快速实现页面的调整。
- 跨域问题解决: 开发阶段可以使用代理解决跨域问题，同时也方便我们查看请求响应内容，调试接口。
- 本地source: 开发环境中启用本地source，可以使用浏览器的开发者工具查看详细的错误信息，方便代码的调试。
- 数据模拟: 在开发阶段使用代理工具来模拟后端数据，可以在前端开发完成后，更快的验证页面的功能。
