Chrome浏览器F12有哪些实用功能

F12 开发者工具大部分人只用来看看元素，其实几个功能日常很好用：临时把整页文字改成可编辑状态、重发一个请求改参数看结果、拦截接口返回伪造数据、把请求一键拷成 fetch 代码。这些都不需要插件，打开面板就能用，调试完关掉页面即可恢复原样。这几项都藏在 Console 和 Network 两个标签里，记住位置就能随手用，不用装任何插件。

Chrome浏览器F12有哪些实用功能

第1步：打开开发者工具

在任意页面按 F12，或右键选「检查」，面板默认停在 Elements 标签，这里是页面的 DOM 树。

第2步：把页面改成可编辑

在 Console 里输入 `document.designMode = 'on'`，整页文字立刻变成可以随手改的状态，改完截图很方便，刷新就还原。

第3步：进 Network 重放请求

切到 Network 标签，刷新页面后会列出所有请求，右键某一条能选「Replay XHR」，同参数再发一次。

第4步：拷成 fetch 或本地 Mock

同一个右键菜单里还有「Copy as fetch」，把请求复制成可直接粘贴的代码；在 Network 的 Overrides 里还能改返回值做本地 Mock。