如何实现打开Chrome DevTools Console标签时自动聚焦输入框?
在Mac上自动聚焦Chrome DevTools Console输入框的方法
下面提供几种可行的方案,涵盖原生DevTools脚本、系统自动化工具和第三方工具:
方法一:利用Chrome DevTools User Scripts(原生无额外工具)
Chrome 110及以上版本支持自定义用户脚本,可实现标签切换时自动聚焦:
- 打开Chrome DevTools,按
F1进入设置,找到Experiments,勾选"User Scripts"后重启DevTools - 切换到User Scripts标签,点击
+ Add script,命名为AutoFocusConsole.js - 粘贴以下代码并保存:
// 监听Console面板激活状态 document.addEventListener('visibilitychange', () => { const isConsoleActive = document.querySelector('.panel[aria-label="Console"][aria-expanded="true"]') !== null; if (isConsoleActive) { setTimeout(() => { const input = document.querySelector('.console-prompt textarea, .console-prompt-editor'); if (input) { input.focus(); input.selectionStart = input.selectionEnd = input.value.length; } }, 50); } }); // 首次打开Console时触发聚焦 setTimeout(() => { const isConsoleActive = document.querySelector('.panel[aria-label="Console"][aria-expanded="true"]') !== null; if (isConsoleActive) { const input = document.querySelector('.console-prompt textarea, .console-prompt-editor'); if (input) { input.focus(); input.selectionStart = input.selectionEnd = input.value.length; } } }, 100);
之后每次切换到Console标签,输入框都会自动获得焦点。
方法二:用Automator创建系统快速动作(免费原生工具)
适合需要手动触发但一键完成打开+聚焦的场景:
- 打开「Automator」,新建「快速动作」
- 设置「工作流程收到」为「没有输入」,「应用程序」选择「Google Chrome」
- 添加「运行AppleScript」动作,粘贴以下代码:
tell application "Google Chrome" activate tell application "System Events" -- 打开DevTools keystroke "j" using {command down, option down} -- 切换到Console标签 keystroke "2" using {command down} -- 聚焦Console输入框(DevTools内置快捷键) keystroke "`" using {control down} end tell end tell
- 保存动作(比如命名为「Focus Chrome Console」),然后到「系统偏好设置→键盘→快捷键→服务」中给这个动作设置快捷键(如
Cmd+Opt+Shift+J)
方法三:用Keyboard Maestro实现全自动触发(第三方工具)
如果你有Keyboard Maestro(付费自动化工具),可以设置打开DevTools时自动执行聚焦:
- 新建宏,触发条件设为「当Google Chrome激活且DevTools窗口存在」
- 添加以下动作:
- 模拟按键:
Cmd+Opt+J(确保DevTools打开) - 模拟按键:
Cmd+2(切换到Console标签) - 模拟按键:`Ctrl+``(聚焦输入框)
- 模拟按键:
- 保存宏后,只要打开Chrome DevTools,就会自动切换到Console并聚焦输入框。
内容的提问来源于stack exchange,提问作者GorvGoyl
相关产品推荐
相关产品推荐

