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

遇到的问题

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

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

解决方案

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

  2. 打开 Setting:

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

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

其他

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

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

结束

相关推荐
LYFlied2 分钟前
【每日算法】 LeetCode 394. 字符串解码
前端·数据结构·算法·leetcode·面试·职场和发展
硕子鸽12 分钟前
UniApp + Dify 实战:详解 SSE 流式响应的解析与前端渲染
前端·uni-app·dify
lxh011312 分钟前
复原IP地址
前端·数据结构·算法
尼罗河女娲14 分钟前
【测试开发】Selenium + Chrome 自动化中常用 ChromeOptions 参数说明(实践总结)
chrome·selenium·自动化
Miketutu15 分钟前
[特殊字符] uni-app App 端实现文件上传功能(基于 xe-upload 插件)
前端·vue.js·uni-app
San30.22 分钟前
现代前端工程化实战:从 Vite 到 Vue Router 的构建之旅
前端·javascript·vue.js
sg_knight22 分钟前
模块热替换 (HMR):前端开发的“魔法”与提速秘籍
前端·javascript·vue·浏览器·web·模块化·hmr
A242073493023 分钟前
js常用事件
开发语言·前端·javascript
LV技术派24 分钟前
适合很多公司和团队的 AI Coding 落地范式(一)
前端·aigc·ai编程
Fighting_p26 分钟前
【导出】前端 js 导出下载文件时,文件名前后带下划线问题
开发语言·前端·javascript