企业官网建设流程全解析

🕵️‍♂️ 前言：别再 console.log(“111”) 了

你是不是还在用console.log打印一切？
对着控制台里展开的一坨 Object 点来点去？
为了重新请求一个 API，不得不疯狂刷新页面？

Chrome DevTools (F12)是浏览器送给开发者的神器，但 90% 的人只用到了它 10% 的功能。
今天，我整理了10 个让你效率翻倍的“隐藏技巧”。学会这些，你的调试速度至少快一倍，连后端同事都会来请教你。

1.console.table()：把数组变成 Excel

这是本文的标题担当。
当你打印一个由对象组成的数组（比如从 API 拿回来的 UserList）时，console.log会显示成折叠的{...}, {...}。

试试console.table()：

constusers=[{id:1,name:"Alice",role:"Admin",status:"Active"},{id:2,name:"Bob",role:"User",status:"Offline"},{id:3,name:"Charlie",role:"User",status:"Active"},];console.table(users);

效果：控制台直接渲染出一张表格，支持点击表头排序！你可以一眼看出谁是 Admin，谁掉线了。

2.$0：快速引用当前选中的元素

在Elements面板中，你点击了某个<div>或<button>，它的后面会出现一个灰色的== $0。
这意味着，你可以在Console面板中直接输入$0来操作这个 DOM 元素！

• $0.click()：触发点击。
• $0.style.display = 'none'：隐藏它。
• $1,$2：分别代表上一次、上上次选中的元素。

3.copy()：一键复制巨型 JSON

后端返回了一个巨大的 JSON，你想把它复制出来去格式化工具里看。
手动选中 -> 拖动鼠标 -> 右键复制？太慢了，而且容易漏掉。

操作：

1. 控制台打印了变量data。
2. 输入copy(data)并回车。
3. 内容已经自动复制到你的剪贴板了！直接去编辑器 Ctrl+V 吧。

4.document.designMode：像编辑 Word 一样改网页

产品经理：“把这个标题改短点看看效果？把那个价格改成 9.9 试试？”
你不需要去改 DOM 节点的innerText。

操作：
在控制台输入：

document.designMode='on'

效果：
现在的网页就像 Word 文档一样，你可以直接点击页面上的任何文字进行修改、删除。改完截图发给产品，深藏功与名。

5.Ctrl + Shift + P：命令菜单 (Command Menu)

像 VS Code 一样，Chrome 也有命令面板。
打开 DevTools，按下Ctrl + Shift + P(Mac 是 Cmd + Shift + P)。

神级命令推荐：

• 输入Screenshot-> 选择Capture node screenshot：只对当前选中的 DOM 节点截图（自动去背景，比系统截图强 100 倍）。
• 输入Theme：快速切换明亮/暗黑模式。

6. Replay XHR：后端最爱的“重放请求”

我们在调试接口时，经常需要看网络请求。如果请求失败了，你想再试一次，难道要刷新页面重新填表单吗？

操作：

1. 切换到Network面板，选中XHR/Fetch。
2. 找到那个请求，右键 -> Replay XHR。

效果：浏览器会携带原本的 Header 和 Token 重新发送一次请求，无需刷新页面。

7. 条件断点 (Conditional Breakpoint)

你在调试一个for (let i=0; i<1000; i++)的循环，bug 只在i === 500时出现。
如果你打普通断点，你要按 500 次 F8。

操作：

1. 右键点击行号，选择Add conditional breakpoint。
2. 输入条件：i === 500。

效果：程序会由着它跑，直到条件满足时才会自动暂停。

8. DOM 断点：谁动了我的 Div？

页面上有一个元素莫名其妙被删除了，或者属性变了，但你找不到是哪行 JS 代码干的（可能是某个祖传 jQuery 插件）。

操作：

1. 在Elements面板选中该元素。
2. 右键 ->Break on->Subtree modifications(子树修改) 或Attribute modifications(属性修改)。

效果：当有 JS 试图修改这个 DOM 时，Chrome 会自动暂停，并定位到那行“肇事”代码。

9. Network Throttling：模拟弱网环境

你的网页在公司千兆光纤下秒开，但在用户的 4G 信号下可能是个灾难。

操作：
Network面板 ->No throttling下拉框 -> 选择Slow 3G。

效果：强制模拟龟速网络，帮你检查 Loading 动画是否正常，请求超时处理是否到位。

10. Coverage：找出“未使用的代码”

网站加载慢？可能是加载了太多无用的 CSS/JS。

操作：

1. Ctrl + Shift + P-> 输入Coverage-> Show Coverage。
2. 点击底部的录制按钮，刷新页面。

效果：
Chrome 会显示每个文件的使用率。红色的条表示加载了但没执行的代码。
你可以据此优化打包体积，把没用的库剔除掉。

📝 总结

Chrome DevTools 不仅仅是一个查看器，它是一个集成开发环境 (IDE)。
掌握这些技巧，不仅能提升工作效率，还能在同事对着屏幕发愁时，走过去淡淡地敲一行document.designMode = 'on'，享受他们崇拜的目光。

工欲善其事，必先利其器。