在Chrome中切换焦点从网页开发工具到页面的键盘快捷方式

Question

我使用Chrome的Vimium插件，可以用r键刷新页面。但是当我使用开发者工具时，页面会失去焦点，为了再次使用r键我需要点击页面（虽然我也可以通过按钮刷新）。有人知道从开发者工具返回页面的快捷键吗？我知道可以使用cmd [在开发者工具内部切换窗格，但找不到返回页面的方法。

- dc-

---

我也想找到一些方法来实现这个。他们在开发工具中选择了“cmd L”作为“跳转到行号”的快捷键，这非常令人恼火，因为它破坏了通常会聚焦于地址栏的行为... - Adam Biggs

我为此编写了一个通用解决方案。如果您想在任何情况下轻松地将焦点移动到页面，请查看此链接：https://dev59.com/7mcs5IYBdhLWcg3wdz1m#30567119 - Sanghyun Lee

你可以在单独的窗口中打开开发工具，然后使用常规的窗口切换。 - sylvain

相关：https://superuser.com/questions/324266/google-chrome-mac-set-keyboard-focus-from-address-bar-back-to-page - Ciro Santilli OurBigBook.com

Answer 1

• 当 Chrome DevTools 聚焦时，Shift + F6 将聚焦于页面内容。
• 当 Chrome DevTools 处于打开状态且页面内容聚焦时，F6 将聚焦于 Chrome DevTools。

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

Google Chrome 功能快捷键

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

- Mike

---

请注意，这是特定于平台的（Windows 和 Linux），在OSX上不起作用。 - JuanCaicedo

我可以确认 - 这在Linux和Chromium上运行得非常好。谢谢 :-) - modulitos

@Mike的方法是有效的，我可以确认。然而，我想提及另一种方法。由于我是前端开发人员，有时我会将我的DevTools设置为“未停靠单独窗口”模式，在这种模式下，快速在页面和DevTools之间切换的方法是`Alt+``（Linux）。不确定Windows和Mac是否适用。 - Sushmit Sagar

在Mac上，按CMD+L可以定位到地址栏，然后按CMD+SHIFT+TAB可以向后循环浏览标签页，以便访问页面内容。 - Hampus Ahlgren

CMD+SHIFT+TAB 打开 MacOS 应用切换器。对我有用的是 CMD+L 来聚焦地址栏，然后按 Escape 键来聚焦页面。 - Huon Imberger

Answer 2

我仍然没有找到一种方法可以在保持开启的情况下，从开发者工具中聚焦页面，但是：

• 如果开发者工具已经打开，使用 Cmd+Opt+c 聚焦到它。
• 关闭开发者工具并使用 Cmd+Opt+i 聚焦到页面。
• 如果开发者工具已关闭，可以使用 Cmd+Opt+j 直接跳转到控制台。
• 使用 Cmd+[ 和 Cmd+] 来切换标签页。
• 使用 Esc 在开发者工具中切换控制台。

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

- rafi

Answer 3

从Hugh Lee不要脸地抄袭过来的。

---

1. 按下F6或Cmd + L或Ctrl + L，使地址栏获得焦点。
2. 键入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:

- TMB

---

这是我目前找到的最好的方法，但仍然很烦人，需要按下这么多键才能聚焦页面（cmd+L+j+enter）。你有找到更好的方法吗？ - Doug

Answer 4

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

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

- vhs

---

这应该是被接受的答案！比 Shift + F6 更快，而且它是平台无关的（在 OSX 上也可运行）。 - Alacritas

无法在我的计算机上工作。它只是在各种可点击项之间切换标签。（如果开发者工具控制台输入行有焦点，<kbd>Tab</kbd> 实际上会插入一个制表符。） - JellicleCat

Answer 5

我在这里回答过类似问题。
新更新：Chrome 版本 92.0.4515.131。

• 当 DevTools 处于打开状态并具有焦点时。
  
• 按下 (⌘ Command+⌥ Option+↓ 下箭头键) 两次。
  第一次按下-焦点将转移到URL。
  第二次按下-焦点将转移到页面。

- Roee Rokah

---

如果对您有帮助，请点赞，让其他人也能看到。 - Roee Rokah

最佳答案！结合“tab”键，您也可以以这种方式在控制台中输入。 - Duncan

Answer 6

在OS X中，你可以使用以下快捷键轻松地在应用程序窗口之间切换：

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

将焦点移动到上一个窗口：⌘ + ⇧ + `

如果无法使用这些快捷键，请检查是否已在以下位置启用：

系统偏好设置 > 键盘 > 键盘快捷键选项卡 > 键盘部分

- Luke Barton

---

谢谢！这个问题更多是针对开发工具在同一个窗口的情况。 - dc-

这仅适用于未停靠的开发工具。 - chrismarx

Answer 7

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

- evenfrost

Answer 8

Chrome版本号为35.0.1916.114。

在网页上按F12，应该会显示元素选项卡，如果没有，请使用ctrl+[进行切换。一旦您从页面上获得了元素选项卡，如果需要，可以使用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

- Mark Robbins

Answer 9

我也对此感到相当沮丧，但我的问题有点不同。我将开发工具分离（在单独的窗口中），我总是需要点击才能返回页面。

我写了一个适合我的小型苹果脚本：

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

我已将其绑定到一个快捷键，使用Spark。因此，每当我在一个分离的开发工具窗口中，我按下我的快捷键，焦点会回到页面上，然后我可以再次使用Vimium。

- Cotten

Answer 10

按下F6键聚焦地址栏，按下回车或F5键刷新，然后按下Tab键聚焦浏览器窗口元素...

这种方法可能不是很直接，也不一定适用于所有情况，但如果你正在测试Tab索引或其他内容，并且不想使用鼠标，这是我找到的唯一方法，可以在不关闭控制台的情况下切换回去。

- bingo