---
title: 浏览器开发者工具里最该会用的 5 个面板
site: 星湖の小窝
category: 前端
tags: [前端, 调试, DevTools]
date: 2026-10-10
updated: 2026-10-10
id: note-devtools-panels
---

# 浏览器开发者工具里最该会用的 5 个面板

开发者工具看着复杂，日常其实只用五六个面板。按"遇到什么问题用它"来记，比背功能列表有用得多。

### 1. Elements：查布局与样式

- 点左上角箭头再点页面元素，直接定位到它的 DOM
- 右侧改数值看效果，**改的是临时预览、不会保存到文件**，刷新即还原，可以放心试
- 盒模型那一块能直接看出 margin / padding 是谁在捣乱

### 2. Console：跑一行代码试试

- 直接输 `document.title` 看结果，不用改文件再刷新
- 看报错：红色行会写明是哪个文件哪一行
- "页面没反应"这类问题，先看这里

> 安全提醒：控制台里粘贴来路不明的代码是常见骗局（对方可以借此拿到你的登录态）。除非你确定自己在做什么，别粘。

### 3. Network：接口到底发了什么

- 刷新页面，请求按时间排好；点任意一条看请求头、请求体、响应
- "状态码 200 但页面不对"这类问题，答案都在响应里
- 勾上 Preserve log 可以保留跳转前的记录，排查登录跳转特别有用

### 4. Application：Cookie、缓存、存储

- 看当前站点的 Cookie（HttpOnly 的会标出来，JS 读不到）
- 清缓存、清某个键值 —— 调试"改了代码但页面没变"时最常用
- 看 localStorage / sessionStorage 里存了什么

### 5. Lighthouse：跑一次体检

- 性能、可访问性、最佳实践、SEO 四项打分
- 重点看它给出的具体建议（图片太大、没设尺寸、对比度不足），照着改最有性价比

### 一个建议

别一上来就装一堆插件。先把这五个面板用熟，遇到具体问题再装对应的扩展。