当前位置：首页 > news >正文

Chrome开发者工具

news 2025/10/24 7:34:18

最好是把常见操作和问题判断逻辑绘制一个树干图

前端问题定位：当页面功能异常时，首先查看 Console 面板是否有红色错误信息，这能快速定位大多数 JavaScript 问题。
样式问题则优先使用 Elements 面板检查元素样式是否正确应用和计算。
前后端问题界定：利用 Network 面板可以清晰界定问题归属。
如果前端根本没有发送请求，或发送的请求参数错误，通常是前端问题。如果前端发送了正确请求，但后端返回了错误的状态码（如5xx）或数据，则可能是后端问题。
Console 的更多用途：除了查看日志，你还可以在 Console 中：
使用 $0快速获取在 Elements 面板中选中的元素。
使用 $x(“你的XPath表达式”)来验证 XPath 定位表达式是否准确

chrome开发者模式工具栏

Elements（元素）
查看、编辑页面的 HTML 和 CSS，实时调试页面结构和样式。
Console（控制台）
显示 JavaScript 日志和错误，并可直接在此执行 JavaScript 代码与页面交互。
Sources（源代码）
调试 JavaScript 代码的核心面板，可设置断点、单步执行、查看变量等。
Network（网络）
记录和分析所有网络请求（如 XHR、图片、脚本），查看请求头、响应头、状态码和加载性能。
Performance（性能）
全面分析页面的运行时性能，找出导致卡顿的瓶颈（如脚本执行、渲染、绘制耗时）。
Memory（内存）
分析网页的内存使用情况，帮助发现和解决内存泄漏问题。

Fetch/XHR
在 Chrome 开发者工具的 Network（网络）面板中，“Fetch/XHR” 按钮是一个过滤器。它的功能非常专一：只显示由 JavaScript 发起的异步网络请求，这主要包括使用古老的 XMLHttpRequest对象和现代的 Fetch API发送的请求，这个过滤器的主要价值在于帮助开发者快速定位和调试与页面动态交互相关的数据请求。
精准过滤：在一个复杂的网页中，网络请求可能包含HTML文档、CSS样式表、JavaScript文件、图片、字体等多种资源。当你需要专门检查与服务器进行数据交互的API请求时（例如登录、提交表单、获取用户信息等），点击“Fetch/XHR”按钮可以过滤掉所有其他类型的资源，让你只关注于最核心的数据流。
调试API接口：这是最重要的用途。你可以详细查看每个请求的：
请求详情：包括URL、请求方法（GET、POST等）、请求头（Headers）、发送的数据（Payload）。
响应详情：包括HTTP状态码（如200、404）、响应头、服务器返回的数据。
性能分析：请求花费的时间，有助于定位接口速度慢的问题。
设置断点：在 Sources 面板中，你可以为包含特定URL字符串的XHR或Fetch请求设置断点。当JavaScript代码发起匹配的请求时，执行会暂停，方便你精确调试是哪段代码发起了这个请求