JavaScript大前端
Chrome 开发者工具（DevTools）快速入门
Chrome DevTools 快速入门指南，涵盖打开方式、命令菜单、常用面板（Elements、Console、Sources、Network 等）功能详解。介绍元素检查、样式调试、移动端模拟、DOM 查询、事件监听、断点调试、网络请求分析、性能监控及 Lighthouse 评估。提供实用快捷键与操作技巧，帮助开发者提升排查效率与优化能力。
Chrome DevTools 快速入门指南，涵盖打开方式、命令菜单、常用面板（Elements、Console、Sources、Network 等）功能详解。介绍元素检查、样式调试、移动端模拟、DOM 查询、事件监听、断点调试、网络请求分析、性能监控及 Lighthouse 评估。提供实用快捷键与操作技巧，帮助开发者提升排查效率与优化能力。
在前端开发中，Chrome 开发者工具（DevTools） 是排查问题、优化性能、理解浏览器行为最强大的助手之一。无论是想快速定位页面样式异常、分析接口请求，还是调试 JavaScript 逻辑，DevTools 都能提供直观高效的方式帮助我们'看清代码背后发生了什么'。
F12 或 Ctrl + Shift + ICommand + Option + I⋮ → '更多工具' → '开发者工具'在使用 Chrome 开发者工具时，可以通过 鼠标滚轮 快速调整界面缩放。 只需将鼠标移动到调试面板区域，然后按住 Ctrl（Windows） 或 Command（Mac） 键，同时滚动鼠标滚轮，即可实现 放大 或 缩小 整个调试界面。
command + shift + Pctrl + shift + p输入快捷键打开菜单栏，搜索 theme 就可以切换 dark 和 light 主题色。
Chrome 开发者工具（DevTools）中的 命令面板（Command Menu） 里有四个与截图（Screenshot）相关的命令。
输入 screenshot 查看选项：
'Dock' 决定了 调试面板相对于网页的停靠位置。
输入 dock 查看选项：
在命令面板中输入 'Code'，然后勾选 'Enable code folding' 选项，即可在 Sources 面板 中启用代码折叠功能。
| 面板 | 功能简介 | 典型用途 |
|---|---|---|
| Elements | 查看 / 修改页面结构和样式 | 实时调整 CSS、查看 DOM |
| Console | 执行 JS 代码、查看日志 | 打印调试输出、测试代码片段 |
| Sources | 查看 / 设置断点调试 | JS 调试、逐步执行代码 |
| Network | 监控请求 / 响应 | 分析接口请求、性能、缓存 |
| Application | 查看本地数据 | LocalStorage、Cookie、IndexedDB |
| Performance | 性能分析 | 监控加载速度、渲染时间 |
| Lighthouse | 页面质量报告 | SEO、性能、可访问性检测 |
Elements 面板 可以 直接看到网页的 DOM 结构、样式规则和渲染状态，并能实时修改、验证效果。 主要用于查看、编辑和调试网页的 HTML DOM 结构 与 CSS 样式。
上面是 DOM 树结构（HTML），下面是 样式区（Styles / Computed）。
打开调试面板后，点击左上角的 箭头图标（选择元素模式），然后将鼠标移动到想要检查的元素上。 高亮区域代表元素在页面布局中的不同部分：
点击左上角的 手机与平板图标（Toggle device toolbar），进入移动端预览模式。
按下 Ctrl + F（Windows） 或 Command + F（Mac），下方会出现搜索框。
| 查询目标 | 输入语法 | 说明 |
| 查找所有图片 | img | 直接输入标签名 |
查找类名为 btn 的元素 | .btn | 使用类选择器 |
查找 ID 为 main 的元素 | #main | 使用 ID 选择器 |
| 查找 div 下的 span | div span | 使用后代选择器 |
| 查找具有属性的元素 | input[type="text"] | 使用属性选择器 |
| 查找第一个列表项 | li:first-child | 使用伪类选择器 |
| 查询目标 | XPath 语法 | 说明 |
| 查找所有 div 元素 | //div | 双斜杠表示在文档中查找任意位置 |
| 查找 ID 为 main 的元素 | //*[@id="main"] | * 表示任意标签 |
| 查找类名为 btn 的元素 | //*[@class="btn"] | 精确匹配 class 属性 |
| 查找包含某文本的节点 | //*[contains(text(), "登录")] | 模糊匹配文本内容 |
| 查找第一个列表项 | (//li)[1] | 使用括号和索引指定第一个匹配项 |
在 Console（控制台）面板 中，也可以直接通过命令快速定位到页面中的 DOM 元素。
inspect(document.getElementById('section_one'))
在 Elements（元素）面板 中，先选中你想修改的元素，然后在右侧的 element.style 区块直接添加新的 CSS 样式。
.element.style { color: red; background-color: #f5f5f5; }
在 Elements 面板 → Styles（样式） 区域，还会看到一些特殊标记：
user agent stylesheet：浏览器默认样式。Inherited from xx：从父元素继承的样式。
如果希望在调试时 让这些状态保持常驻，可以按照以下步骤操作：
:hov 按钮，展开伪类选项。:hover、:active 等）。以下是一个演示示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类状态 Demo</title>
<style>
body { font-family: Arial, sans-serif; padding: 30px; }
h2 { margin-top: 40px; }
.hover-btn { background-color: #3498db; color: white; border: none; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s; }
.hover-btn:hover { background-color: #2c80b4; }
.active-btn { background-color: #e74c3c; color: white; border: none; padding: 10px 20px; cursor: pointer; transition: background-color 0.1s; }
.active-btn:active { background-color: #c0392b; }
.focus-input { display: block; margin-bottom: 20px; padding: 8px 12px; border: 2px solid #ccc; outline: none; transition: border-color 0.3s; }
.focus-input:focus { border-color: #f39c12; }
.focus-within-box { border: 2px solid #ccc; padding: 15px; margin-bottom: 20px; transition: border-color 0.3s; }
.focus-within-box:focus-within { border-color: #8e44ad; }
.focus-visible-input { display: block; margin-bottom: 20px; padding: 8px 12px; border: 2px solid #ccc; outline: none; }
.focus-visible-input:focus-visible { border-color: #27ae60; box-shadow: 0 0 5px rgba(39, 174, 96, 0.5); }
.target-box { padding: 15px; border: 2px solid #ccc; margin-bottom: 20px; transition: border-color 0.3s; }
.target-box:target { border-color: #e67e22; background-color: #fdf2e9; }
a { display: inline-block; margin-bottom: 10px; color: #3498db; }
</style>
</head>
<body>
<h1>伪类状态 Demo</h1>
<h2>1. :hover</h2>
<button>Hover 我</button>
<h2>2. :active</h2>
<button>Active 我（鼠标按下）</button>
<h2>3. :focus</h2>
<input type="text" placeholder="Focus 我">
<h2>4. :focus-within</h2>
<div>
<label>Focus 内的输入框：</label>
<input type="text" placeholder="输入文字">
</div>
<h2>5. :focus-visible</h2>
<input type="text" placeholder="Tab 选中我">
<h2>6. :target</h2>
<a href="#target1">点击我激活 target</a>
<div>我是 target 元素，点击上方链接即可激活我</div>
</body>
</html>
class="xxx"。<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<style>
.bg { background-color: red; width: 200px; }
.color { color: white; }
</style>
</head>
<body>
<div>添加/删除类名</div>
</body>
</html>
假设你有一个盒子，里面包含多个子元素（items），每个子元素都有同样的类名 item，样式如下：
.item { padding: 10px; background-color: #f5f5f5; margin-bottom: 5px; }
如果在 Styles 面板 修改了 .item 的 padding，所有具有 .item 类的元素都会同步变化。
使用 :cls 功能：在 Elements 面板 中选中你想单独调试的元素，找到右侧 Styles 面板 上方的 :cls 区域，勾选或取消某个 class 的状态，Chrome 会 只对选中的元素生效。
在 Elements 面板 中选中目标元素，将鼠标悬停在元素的 类名 上，右键选择：Copy → Copy styles。
右键点击选中的元素，在弹出菜单中选择：Copy → Copy outerHTML。
向下滑动到最底部，会看到 图形化盒模型（Box Model）面板。
可以在 Computed 面板 上方的 搜索输入框 输入 background 或相关属性名。
Layout 面板主要分为两个部分：Grid 和 Flexbox。 调试示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Layout 面板学习 Demo</title>
<style>
body { font-family: sans-serif; padding: 20px; background-color: #fafafa; }
.flex-container { display: flex; justify-content: space-around; align-items: center; gap: 10px; background-color: #e0f7fa; padding: 20px; border: 2px solid #0097a7; margin-bottom: 40px; }
.flex-item { width: 80px; height: 80px; background-color: #4dd0e1; display: flex; justify-content: center; align-items: center; border-radius: 8px; font-weight: bold; color: white; }
.grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); gap: 10px; background-color: #fff3e0; padding: 20px; border: 2px solid #f57c00; }
.grid-item { background-color: #ffb74d; display: flex; justify-content: center; align-items: center; font-weight: bold; border-radius: 8px; color: white; }
</style>
</head>
<body>
<h2>Flex 布局示例</h2>
<div>
<div>A</div><div>B</div><div>C</div>
</div>
<h2>Grid 布局示例</h2>
<div>
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>
</body>
</html>
在 Layout 面板中，如果勾选 Grid/Masonry overlays，页面上会出现一层带有数字标识的网格线。
当页面中的元素使用了 Grid 或 Flexbox 时，Chrome 会在元素右侧自动显示一个小标签（例如 grid 或 flex）。点击这个标签即可快速切换布局辅助线的显示状态。
在 Styles 面板中也可以直接调试布局。当选中使用了 Flexbox 或 Grid 的元素时，在 CSS 样式规则旁边会出现一个小图标，点击该图标会显示该元素的 布局辅助线。
Event Listeners 是 Chrome DevTools 中专门用来 查看和调试 DOM 元素绑定的事件 的面板。 调试代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Demo</title>
</head>
<body>
<div>点击我</div>
<script>
const button = document.querySelector(".btn");
button.addEventListener("click", handleClick);
function handleClick() {
console.log("你点击了按钮！");
}
</script>
</body>
</html>
点击 事件旁边的删除图标，即可移除该事件监听器。
Properties 面板用于查看 选中 DOM 元素的所有属性和方法。
主要功能包括查看元素的所有属性、事件绑定情况、原型链及调试 JavaScript 对象属性。
Accessibility 面板是 Chrome DevTools 中用于 检查网页无障碍（A11y）信息 的工具。
可查看元素的无障碍属性、树状结构展示、属性与状态，以及调试辅助功能问题。
Console 面板是 DevTools 中用于 查看日志、执行 JavaScript 代码以及调试脚本 的核心工具。
在 Console 面板中输入例如：let a = 1
$_ 是 Chrome Console 中的一个 快捷变量，用于 访问最近一次表达式的结果。
在 Chrome DevTools Console 中，有一些 快捷变量 用于快速引用最近选中的 DOM 元素：
| 变量 | 含义 |
|---|---|
$0 | 当前在 Elements 面板选中的 DOM 元素 |
$1 | 上一次选中的 DOM 元素 |
$2 | 再上一次选中的 DOM 元素 |
$3 | 再再上一次选中的 DOM 元素 |
$4 | 再再再上一次选中的 DOM 元素 |
输出普通信息或者变量值。
console.log('Hello, World!');
console.log('Value of a:', a);
输出错误信息，通常显示为红色。
console.error('Something went wrong!');
输出警告信息，通常为黄色。
console.warn('This is a warning!');
以表格形式展示数组或对象。
const users = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}];
console.table(users);
清空 Console 面板所有输出。
console.clear();
将日志分组。
console.group('User Info');
console.log('Name: Alice');
console.log('Age: 25');
console.groupEnd();
记时，用于性能测试。
console.time('LoopTime');
for(let i=0;i<100000;i++){}
console.timeEnd('LoopTime');
断言，如果条件为 false，则输出错误信息。
console.assert(a > 10, 'a must be greater than 10');
显示代码执行路径（堆栈跟踪）。
function foo() { function bar() { console.trace('Trace here'); } bar(); }
foo();
在 Console 面板顶部，可以通过 Log 级别筛选 来控制显示哪些类型的日志。
小眼睛用于 实时监视变量或表达式的值变化。 调试代码：
let count = 0;
setInterval(() => { count++; }, 1000);
直接在控制台观察 count 的值时，系统会实时显示并更新它的变化。
这些按钮是 Source 面板中进行代码调试（debugger）时的核心工具。
当页面的 JavaScript 代码正在运行时，点击该按钮会立即暂停所有脚本的执行。
执行下一行代码。如果下一行是函数调用，不进入函数内部。
执行下一行代码。如果这一行是函数调用，则进入函数内部。
从当前函数内部直接执行到函数结束位置并返回上一层调用点。
让脚本从当前断点处继续运行，直到遇到下一个断点或者脚本执行结束。
临时关闭（禁用）所有断点，但不会删除它们。
| 按钮名称 | 图标含义 | 操作结果 | 使用场景 |
|---|---|---|---|
| 🟡 Pause script execution | ⏸️ 暂停 | 暂停当前执行的脚本 | 强制中断代码执行 |
| 🟢 Step over next function call | ⤴️ 跳过函数 | 执行当前行，不进入函数内部 | 快速跳过简单函数 |
| 🔵 Step into next function call | ⬇️ 进入函数 | 进入函数内部调试 | 想看函数内部逻辑 |
| 🟣 Step out of current function | ⬆️ 跳出函数 | 执行完当前函数返回上层 | 结束当前函数调试 |
| 🟠 Resume script execution (Step) | ▶️ 继续执行 | 从当前断点继续执行 | 跳到下一个断点或结束 |
| Deactivate breakpoints | ⛔ 暂时禁用所有断点 | 禁用断点 | 让脚本继续执行，不受断点打断 |
在代码中插入一行 debugger;，当程序执行到这一行时，浏览器会自动暂停执行。
在左侧文件树中找到要调试的 JS 文件，点击代码行号，即可在对应行设置一个断点。
| 方法 | 使用场景 | 是否修改代码 | 触发时机 |
|---|---|---|---|
debugger; 语句 | 临时调试、快速插入 | 需要修改源码 | 执行到语句时 |
| 手动断点 | 长期调试或不便改代码时 | 不修改源码 | 命中断点时 |
点击右侧的 加号（＋），即可在 Watch 面板 中添加需要监听的属性或变量。
在 Elements 面板 → Break on...（中断点调试） 有一个重要功能，用于在 DOM 结构发生变化时自动暂停代码执行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Break On Demo</title>
<style>
.container { border: 2px solid #3498db; padding: 10px; margin: 20px; }
.item { padding: 5px; margin: 5px; background-color: #f5f5f5; }
</style>
</head>
<body>
<div id="box">
<div>原始元素</div>
</div>
<button id="add">添加子节点</button>
<button id="attr">修改属性</button>
<button id="remove">删除节点</button>
<script>
const box = document.getElementById("box");
document.getElementById("add").onclick = () => {
const div = document.createElement("div");
div.className = "item";
div.textContent = "新添加的节点";
box.appendChild(div);
};
document.getElementById("attr").onclick = () => {
box.style.borderColor = "red";
box.setAttribute("data-updated", "true");
};
document.getElementById("remove").onclick = () => {
box.remove();
};
</script>
</body>
</html>
在 Sources 面板 → Event Listener Breakpoints 区域，你可以看到一系列按类别分组的事件类型。
| 分类 | 示例事件 | 说明 |
|---|---|---|
| Mouse | click, mousedown | 鼠标相关事件 |
| Keyboard | keydown, keyup | 键盘输入事件 |
| Control | resize, scroll | 浏览器或元素控制事件 |
| DOM Mutation | subtree modifications | DOM 结构变化事件 |
| XHR /Fetch | Fetch, XHR | 网络请求相关事件 |
| Timer | setTimeout, setInterval | 定时器相关事件 |
有时候我们的代码是写在框架（例如 Vue）中，当我们在 Event Listener Breakpoints 中勾选了 click 并点击按钮时，调试器可能会跳转到 Vue 的内部源码文件。
这时可以在右侧的 Call Stack（调用栈） 面板中，找到对应的框架脚本，右键选择 'Add script to ignore list'（添加到忽略列表）。
这样做之后，调试器就会自动忽略框架文件。
Network 面板字段说明：
在 Network 面板中，你可以通过右键点击表头来自由定制显示的字段。
点击 Clear network log 按钮后，会立即清除当前所有已捕获的网络请求记录。
启用 Preserve log（保留日志）选项后，Chrome 会在页面刷新或跳转后仍然保留之前的网络请求记录。
勾选 Disable cache 后，Chrome 会在页面刷新或发起请求时忽略浏览器缓存。
Throttling 功能可以模拟不同网络环境。
Network → Export HAR，可以将当前捕获的所有网络请求导出为 HAR 文件。
Chrome DevTools 中的 Application 面板 用于查看和管理网页在浏览器端存储的数据、缓存资源以及相关应用信息。
以下是核心模块介绍：
例如在 Console 面板 中执行：document.cookie = "username=zhangsan" 然后切换到 Application 面板 → Cookies，就能看到刚刚设置的 username=zhangsan Cookie 已经被成功写入。
Performance 面板用于记录并分析页面的运行过程（加载与交互），帮助你找出性能瓶颈。 Google DevTools Jank Sample 是由 Google 开发者提供的一个性能测试示例页面。 点击 '增加' 按钮后，页面会不断生成大量元素，随着数量的增加，渲染与计算压力逐渐上升，页面的性能也会明显下降，出现卡顿。 而点击 '优化' 按钮后，可以看到页面运行变得流畅许多，清晰展示了性能优化前后的对比效果。
开始捕获网页的性能数据（CPU、JS、渲染、内存等）。
在 页面加载的同时自动开始性能录制，用于分析页面加载性能。
清除当前面板中已录制的性能数据。
| 功能名称 | 作用说明 | 使用场景 |
|---|---|---|
| Record | 手动开始录制性能数据 | 用户交互、动画、特定操作性能分析 |
| Record and Reload | 自动刷新并从加载开始录制 | 页面首屏加载性能分析 |
| Clear | 清除现有记录 | 准备重新采样或对比多组数据时 |
Save trace 是保存当前性能录制数据，Load trace 是加载之前保存的性能数据。
当你完成一次性能录制后，可以点击 'Save trace' 按钮将当前的性能分析数据导出为一个 .json 文件。
'Load trace' 用于导入之前保存的 .json 性能文件。
| 功能 | 作用 | 常用场景 |
|---|---|---|
| Screenshots | 捕获网页渲染截图 | 分析白屏、动画流畅度 |
| Memory | 记录内存使用变化 | 查找内存泄漏 |
| Collect garbage | 手动触发 GC | 对比 GC 前后内存占用 |
| Show ignore list settings | 设置忽略文件 | 过滤无关代码、专注业务性能 |
| 功能名称 | 功能说明 | 使用场景 / 注意事项 |
|---|---|---|
| Enable advanced paint instrumentation (slow) | 启用高级绘制监控 | 分析页面复杂渲染、重绘、样式变化导致的性能瓶颈 |
| Disable JavaScript samples | 禁用 JS 样本采集 | 如果你只想分析布局/渲染性能时使用 |
| Show custom tracks | 显示自定义轨迹 | 用于可视化自己定义的事件 |
当图表显示为 红色 时，说明 主线程几乎被当前代码占满。
在性能面板中，还有一个 NET 区域，用于表示 网络请求情况。
在性能面板上方，被圈出的部分显示了 每一帧的页面截图。
Frames 面板展示了与 绘制帧（Rendering Frames） 相关的信息。
上方圈出的部分用于展示 布局（Layout）切换的频率。
Main 面板主要展示 火焰图（Flame Chart）。
如果在 Task（任务）面板 上看到一个 红色小三角，说明该任务属于 长任务（Long Task）。
在 火焰图（Flame Chart） 上继续放大，可以看到 Layout（布局计算） 的相关任务。
Summary 面板会直观展示页面渲染统计。
Bottom-Up 面板是 从最消耗时间的函数开始向上统计调用链 的一种视图。
Call Tree（调用树） 是一种 从入口函数开始，按调用层级展开函数执行的视图。
Call Tree 与 Bottom-Up 的对比
| 视图 | 排序方式 | 适用场景 |
|---|---|---|
| Call Tree (Top-Down) | 从入口函数展开调用链 | 分析调用路径，找出整个函数调用流程中的瓶颈 |
| Bottom-Up | 按函数自身耗时排序 | 快速找到最耗时的函数，不关心它被谁调用 |
Event Log 用来展示页面中发生的 各种事件。
Lighthouse 是 Chrome DevTools 内置的一款自动化网站质量评估工具。
测试网页加载速度与交互性能。 重点指标包括：FCP, LCP, CLS, TTI, Speed Index。
检查网页是否对所有用户友好。
检查网页是否遵循安全和现代开发规范。
检查页面是否符合搜索引擎收录标准。
检查网页是否具备离线访问、安装到桌面、快速加载等 PWA 特性。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online