——基于Chrome DevTools
关于Element标签页面下
- 查看和编辑HTML元素。可以看到网页的完整HTML结构,选中任意元素查看和编辑其HTML代码,包括元素标签、属性、内容等。
- 查看和编辑CSS样式。选中一个HTML元素,可以在右侧看到应用到它身上的所有CSS规则,可以临时添加、编辑或删除CSS属性及其值。
- 实时看到样式更改效果。当你编辑HTML元素或其CSS样式时,网页会实时更新,你可以立即看到更改后的效果,这极大方便了样式调试工作。
- 选取元素。可以通过点击 Elements 面板选取对应在网页上的元素,或通过在网页上右键选择 “审查”来选取一个元素及其父节点。也可以通过选择器来选取特定元素。
- 查看继承样式和计算样式。选中一个元素,可以查看它从父节点继承的样式,也可以查看最终应用到它身上的计算样式,这有助于定位样式冲突和问题。
关于Console标签页面下
- 查看错误和警告信息。当页面的JavaScript代码出现错误或警告时,Console面板会实时打印出错误消息和调用栈信息,方便定位和修复问题。
- 打印调试信息。可以使用console.log()在控制台打印变量值、对象信息等,console.table具象化的展示JSON和数组数据，console.dir等通过类似文件树的方式展示对象的属性以调试JavaScript代码。
- 追踪调用栈。当在某行JavaScript代码处设置断点后刷新页面,断点会暂停执行并打印当前调用栈,可以逐级上溯,查看函数调用关系和变量作用域,这在调试复杂代码时非常有用。
关于Source标签页面下
- 查看JavaScript源文件。可以看到网页引入的所有JS文件(包括外部文件和内嵌代码),点击文件可以查看其源代码。
- 设置断点。可以在JavaScript源码的任意行号处设置断点,然后刷新页面使程序运行至断点处暂停,这时可以查看变量和调用栈的值,单步步过或步入代码来跟踪调试。
- 条件断点。可以为断点设置触发条件,仅当条件满足时断点才会触发,这可以避免频繁进入不需要的断点。条件可以设置为变量值、调用次数等。
- 监视变量和表达式。可以在右侧变量面板添加变量,DevTools会在每次断点触发时显示这些变量的值,并在值变更时高亮,这有助于监视关键变量的变化。
- 单步调试。在断点处可以单步执行当前行的代码(Step Over),单步进入当前函数调用(Step Into), 或单步跳出当前函数(Step Out)。这允许逐行跟踪代码的执行过程。
- 调用栈。显示当前路径中各函数之间的调用关系,可以查看各个调用的文件路径、行号和变量作用域。点击调用栈中的某行可以跳到对应的源码位置。
关于Network标签页面下
- 查看所有网络请求。可以看到网页加载过程中发出的所有HTTP请求,包括请求头、响应头、预请求资源、响应内容等信息。这有助于分析网页的资源加载情况。
- 过滤网络请求。可以通过过滤器选项只查看CSS、JS、XHR、Fonts等类型的请求,也可以按文件名或过滤器内容进行过滤,这可以简化网络面板的信息。
- 编辑和重新发送请求。选中一个网络请求,可以编辑其中的请求方法、URL参数或请求头,然后重新发送该请求,这可以用于测试不同的请求方案。
- 下载网络资源。可以下载任何网络请求的响应内容,这在调试或分析第三方资源时很有用。
- 管理网络条件。可以模拟不同的网络条件,如Fast 3G、Slow 3G和GPRS连接,这可以测试网页在不同网速下的性能表现。也可以完全断开网络以调试离线状态。
关于Performance标签页面下（了解）
- 分析加载性能。可以记录一个网页的加载过程,然后查看Loading 时间轴来分析各资源的加载时序和时间,找出加载时间长的资源并优化。也可以查看资源大小来检查过大资源。
- 查看渲染性能。通过Rendering 时间轴可以查看页面首次渲染和重新渲染的时间,分析影响页面渲染性能的因素。也可以记录页面滚动、动画等操作来分析渲染性能。
- 采集FPS信息。DevTools 会在屏幕右上角显示当前页面的FPS(每秒帧数),可以判断页面是否流畅。也可以通过 FPS 时间轴查看整个记录过程的FPS变化情况。低FPS往往表明存在性能问题。
- 分析内存使用。通过Memory 时间轴可以查看页面在加载和交互过程中内存的变化,监视内存泄漏或过度占用内存的情况。也可以逐步回放并检查每个时刻占用内存较高的对象。
