用于将焦点从 Web 开发人员工具切换到 Chrome 页面的键盘快捷键答案

【问题标题】：Keyboard shortcut to switch focus from web developer tools to page in Chrome用于将焦点从 Web 开发人员工具切换到 Chrome 页面的键盘快捷键
【发布时间】：2012-06-14 11:14:30
【问题描述】：

我使用 Vimium for Chrome，它允许我使用 r 键进行刷新。当我使用开发工具时，我失去了页面的焦点，必须单击页面才能再次使用r（尽管我显然只是用按钮刷新）。有谁知道从开发工具切换回页面的键盘快捷键？我知道您可以使用cmd [ 在开发工具中切换窗格，但找不到切换回页面的方法。

【问题讨论】：

我也想找到一些方法来实现这一点。他们在开发工具中选择cmd L 作为“跳转到行号”，这很烦人，这破坏了关注地址栏的通常行为......
我为此写了一个通用的解决方案。如果您想在任何情况下轻松地将焦点移至页面，请检查此stackoverflow.com/a/30567119/524588
您可以[在单独的窗口中打开 devtools][1] 然后使用常规窗口切换。 [1]：stackoverflow.com/questions/23668827/…
相关：superuser.com/questions/324266/…

标签： google-chrome google-chrome-devtools

【解决方案1】：

如果使用 Windows，以下 AHK 脚本将完成这项工作：

#IfWinActive ahk_exe chrome.exe
  !a::Send +{F6}
#IfWinActive

验证：

关注 Chrome 开发工具。
按 Alt+A。
现在网页应该是焦点。

【讨论】：

【解决方案2】：

就像我已经回答了 here
新更新： 在 chrome 版本 92.0.4515.131 中。

当 DevTools 打开并聚焦时。
按（⌘命令+⌥选项+↓向下）两次。
第一次按下 - 焦点将转移到 URL。
第二次按下 - 焦点将转移到页面。

【讨论】：

如果对你有帮助，请点赞，让别人看到

【解决方案3】：

我的解决方案基于上层答案（适用于 Mac 用户）：

将抽屉设置为控制台
在 DevTools 中聚焦，按 Esc 打开抽屉（控制台）
按Tab，切换页面焦点
在页面输入焦点后，按Shift + Tab 在 DevTools 中切换焦点

【讨论】：

【解决方案4】：

有人知道从开发工具切换回页面的键盘快捷键吗？

Tab 是您要查找的键。在按 Esc 打开控制台后使用它来聚焦页面。

【讨论】：

这应该是公认的答案！比 Shift + F6 更快，而且它独立于平台（也适用于 OSX）。
不适用于我的机器。它只是通过各种可点击的标签。（如果 DevTools 控制台输入行曾经被聚焦，Tab 实际上会插入一个 Tab 字符。）

【解决方案5】：

在 Linux 上，使用 Alt+D 从开发工具切换到地址栏，然后按两次 Shift+Tab。这将带您回到主页。可惜它在 Mac 上不起作用。

【讨论】：

【解决方案6】：

我仍然没有找到从开发工具中聚焦页面的方法，同时让开发工具打开，但是：

如果开发工具已打开，请使用 Cmd+Opt+c 将其聚焦
使用 Cmd+Opt+i 关闭开发工具并关注页面
如果开发工具关闭，直接跳转到控制台：Cmd+Opt+j
使用 Cmd+[ 和 Cmd+] 切换选项卡
Esc 在开发工具中切换控制台

参考：https://developers.google.com/chrome-developer-tools/docs/shortcuts

【讨论】：

【解决方案7】：

当 Chrome DevTools 被聚焦时，Shift + F6 将聚焦在页面上内容。
当 Chrome DevTools 打开并且页面内容是专注，F6 将专注于 Chrome DevTools。

参考：https://support.google.com/chrome/answer/157179

Google Chrome 功能快捷方式

F6 在地址栏、书签栏之间向前切换焦点（如果显示）和页面内容
Shift + F6 在地址栏、书签栏（如果显示）和页面内容

【讨论】：

请注意，这是特定于平台的（Windows 和 Linux），不适用于 OSX
我可以确认 - 这在 Linux 和 Chromium 上运行良好。谢谢:-)
我可以确认@Mike 的方法有效。但是，我还想提一下另一种方法。由于我是一名前端开发人员，我有时将我的 DevTools 用作“未停靠的单独窗口”模式，在这种模式下，在页面和 DevTools 之间快速聚焦的方法是 Alt+` (Linux)。不确定是否同样适用于 Windows 和 Mac。
在 mac go 上：CMD+L 指向地址字段，然后 CMD+SHIFT+TAB 在选项卡堆栈中向后循环以获取页面内容。

【解决方案8】：

点击 Control + L 聚焦地址栏。然后按 F6 一次聚焦书签栏（如果有的话），再次按 F6 聚焦页面。

【讨论】：

根据打开的“窗格”（例如，下载）可能需要两次以上的 F6 键才能进入网页。例如，在这个时间点，我需要按四次 F6 键才能将我从地址栏转到网页视图。

【解决方案9】：

无耻抄袭Hugh Lee

点击 F6 或 Cmd + L 或 Ctrl + L 并聚焦地址栏
输入 javascript: 并按回车键。

现在您只能使用 j 将焦点移至页面。

但是 javascript: 太长了，不是吗？然后按照这个。

Go to Chrome Settings page
Click "Manage search engines..." in the Search section
Add a new search engine with
    any name e.g. Back to page
    any keyword e.g. j
    URL - javascript:

【讨论】：

这是迄今为止我发现的最好的，但仍然很烦人，我需要按这么多键才能聚焦页面 (cmd+L+j+enter)。你找到更好的东西了吗？

【解决方案10】：

我得到了相当这个沮丧过，但我的问题是，虽然有点不同。我有分离（在一个单独的窗口）开发工具，我总是需要点击找回页面。 P>

我写了一个小的AppleScript，对我的作品： P>

tell application "Google Chrome"
    activate second window -- if I have dev tools open "second window" is the page
    tell second window to tell active tab
        set the URL to "Javascript:window.focus();"
    end tell
end tell

我有它绑定到使用@ 987654321快捷@ P>

所以每当我在一个分离的开发工具窗口的时候，我打我的快捷方式和焦点放回到页面，我可以再次使用Vimium。 P>

【讨论】：

【解决方案11】：

OS X 您可以在应用程序窗口之间循环使用：

将焦点移至下一个窗口：⌘ + `

将焦点移到最后一个窗口：⌘ + ⇧ + `

如果这不起作用，请检查它是否已启用

系统偏好设置 > 键盘 > 键盘快捷键标签 > 键盘部分

【讨论】：

谢谢！不过，问题更多在于开发工具何时位于同一窗口中。
这仅适用于未停靠的开发工具

【解决方案12】：

按 f6 聚焦地址栏，按 return 或 f5 刷新，然后按 tab 聚焦浏览器窗口元素...

这是迂回的，可能在所有情况下都没有帮助，但如果你正在测试标签索引或其他东西并且不喜欢使用鼠标，这是我想出如何在不关闭的情况下切换回来的唯一方法控制台。

【讨论】：

【解决方案13】：

Chrome 版本 35.0.1916.114

在网页上，F12。应该显示元素选项卡，如果不使用 ctrl+[ 切换到它。从页面获取要在 F12 上显示的元素选项卡后，如果需要，您可以使用 Esc 进入控制台。

然后，当元素面板被聚焦时，在您遇到有趣的三个选项卡之前，我得到了样式面板，“用户代理样式表”。还有两个标签，我在右上角看到了一个小虚线图标，空间来显示它。

此时我们距离开始有 5 个标签。另外两个选项卡，我得到“在样式中查找”，再一个选项卡，我得到计算属性面板。然后另一个选项卡到达它下面的过滤器。

现在我们有 9 个标签。

猜猜第 10 个标签是什么。

或者，如果你的小指累了，它只是向后移动 8 个 shift-tabs。

这就是我们在业务中所说的“可发现性”。

再说一遍，这里是 AutoHotkey 脚本：

; Match any part of title
SetTitleMatchMode, 2
#IfWinActive - Google Chrome
;#IfWinActive ahk_class Chrome_WidgetWin_1
  +F10::  ; goto html body, use upper left corner mouse click
    CoordMode, Mouse, Screen
    MouseGetPos, xpos, ypos
    CoordMode, Mouse, Relative
    MouseClick, left,10, 95, 1, 0
    CoordMode, Mouse, Screen
    MouseMove, %xpos%, %ypos%, 0
    Return
  F10:: ; from html, goto dev tools (Elements Panel must be default here, with console open ESC), 
        ; might need to adjust tab number to suit your icons to the right of location bar
    Send, ^l
    Send, {tab 7}
    Return
  ^F10:: ; from html, goto dev tools - previously opened console (Elements Panel must be default here, with console open ESC)
    Send, ^l
    Send, {tab 7}
    Send, {tab 13}
    Return
#IfWinActive ;Chrome

【讨论】：

【解决方案14】：

无法从开发窗格切换到窗口，但cmd r 完成了所需的操作（刷新页面）。

【讨论】：