Chrome 开发者工具(Chrome DevTools)

Chrome 开发者工具(Chrome DevTools)是谷歌 Chrome 浏览器内置的网页开发调试工具集,无需安装即可通过 F12 或右键检查打开。它覆盖了从页面结构、样式、脚本到网络、性能、存储的完整调试链路,是现代前端开发的核心工作台。

概述

DevTools 随 Chrome 于 2008 年发布并持续演进,底层基于 Chrome DevTools Protocol(CDP)与浏览器内核通信。这一协议同时向外部开放,Puppeteer、Playwright 等自动化工具、各类 IDE 的浏览器调试功能都构建其上。基于同为 Chromium 内核的 Edge 等浏览器也内置了几乎相同的工具。

核心特点

• Elements 面板:实时查看与编辑 DOM 树和 CSS 样式,查看盒模型、层叠关系,调试 Flex 与 Grid 布局。
• Console 面板:查看日志与错误、执行任意 JavaScript,配合 console 系列 API 辅助调试。
• Sources 面板:对 JS 设置断点、单步执行、查看调用栈与作用域,支持 Source Map 调试打包前源码。
• Network 面板:记录每个请求的耗时、状态、请求头与响应体,可模拟弱网与禁用缓存。
• Performance 与 Memory 面板:录制运行时火焰图定位卡顿,拍摄堆快照排查内存泄漏。
• Application 面板与 Lighthouse:管理 Cookie、localStorage、Service Worker,并可一键生成性能与最佳实践评分报告。

应用场景

前端开发者用它调试样式与脚本错误、分析首屏加载与运行时性能、排查接口请求问题;后端与测试人员用 Network 面板核对接口数据;性能工程用 Performance、Lighthouse 面板做量化优化;移动开发可通过远程调试连接 Android 设备上的 Chrome 与 WebView。

常见问题

问:线上代码被压缩,如何调试？答:部署时生成 Source Map 并在 DevTools 中加载,即可把压缩代码映射回原始源码设置断点;DevTools 也提供代码美化(pretty print)功能应急。

问:如何调试手机上的页面？答:安卓设备开启 USB 调试后,在桌面 Chrome 访问远程调试页面即可检查手机浏览器或 WebView 中的页面;也可先用设备模拟模式在桌面模拟不同屏幕。