Chrome 打开新标签页时自动打开开发者工具

遇到的问题

最近遇到了一个场景,就是需要在 Chrome 上使用开发者工具调试移动端的样式以及一些功能,而且涉及到的功能有点击相关按钮打开一个新窗口。想要新打开的窗口也保持开发者工具打开的状态,便于调试,但是新窗口是以 pc 端形式打开的。

经过一番搜索之后,发现 Chrome 上提供相关配置,修改之后就可以在新打开的窗口中保持开发者工具打开的状态。

解决方案

  1. 打开开发者工具(Cmd⌘ + Option⌥ + I);

  2. 打开 Setting:

  1. 在 Preferences 选项中找到 Global (选项列表的最下方),然后勾选 Auto-open DevTools for popups :

这样我们在一个页面打开开发者工具,然后点击功能按钮打开新的标签页的时候会自动打开开发者工具,也就能完成我们的需求:

其他

另外还有一个开发小技巧,就是我们在开发过程中如果打开了开发者工具 - Network,刷新页面会清空请求记录,如果我们需要保留之前的请求记录,可以将 Network 中的 Preserve log 打开:

在刷新页面后,网页请求就不会被清空了:

结束

相关推荐
专业抄代码选手1 分钟前
06|双缓冲与 Commit:让 Fiber 支持第二次渲染
前端·javascript·react.js
涛涛ing1 分钟前
4.8K Star!一套规则让 AI 帮你写出“像人写的”前端代码
前端
万物智能4 分钟前
OpenHarmony源码树解剖—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
前端·后端
天才熊猫君7 分钟前
通用虚拟滚动表格行拖拽排序:从思路到完整实现
前端·javascript
hh9509 分钟前
Agent Plan × DeepSeek Harness:角色 Prompt 驱动的 Agent 分工优化与协作质量实验
java·前端·人工智能·prompt·adg·agent plan·adg成都社区
专业抄代码选手12 分钟前
05|把递归渲染拆成 Fiber:让一棵大树可以暂停
前端·javascript·react.js
像我这样帅的人丶你还16 分钟前
🚀苹果的液态玻璃咋做?🚀
前端·webgl·three.js
天才熊猫君18 分钟前
Vue 3 插槽机制深度解析:两条线与三层树
前端·javascript
爱丶不疚21 分钟前
BrowserWindow:你的Electron 应用可以不用手写红绿灯
前端·electron
用户5944041035628 分钟前
【完整fx】Vue3 + TS + Leafletjs 打造企业级原神大地图
前端