Keyboard shortcut to switch focus from web developer tools to page in Chrome

Question

I use Vimium for Chrome, which allows me to refresh with the r key. When I am using the dev tools I lose focus of the page, and have to click in the page in or

Answer 1

Chrome Version 35.0.1916.114

On web page, F12. Should show Elements tab, if not switch to it with ctrl+[. Once you get elements tab to show on F12 from page, you can use Esc to get to the console, if need be.

Then, when elements panel is focused, three tabs before you meet anything interesting, I get the styles panel, 'user agent stylesheet'. Two more tabs and I get the little dotted icon in top right, space to show that.

At this point we are 5 tabs away from start. Two more tabs and I get 'find in styles', one more tab and I get the computed properties panel. Then another tab gets to the filter below it.

Now we are at 9 tabs.

Guess what the 10th tab is.

Or, if your pinky is getting tired, it is only 8 shift-tabs going backwards.

That's what we call in the business, 'discoverability'.

Then again, here is the AutoHotkey script:

; 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

Answer 2

Shamelessly copied from Hugh Lee

---

1. Hit F6 or Cmd + L or Ctrl + L and focus the address bar
2. Type javascript: and hit the enter key.

Now you can move focus to the page only with j.

---

But javascript: is too long, isn't it? Then follow this.

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:

Answer 3

Hit Control + L to focus the addressbar. Then hit F6 once to focus the bookmark bar (if you have one) and F6 again to focus the page.

Answer 4

I still haven't found a way to focus page from dev-tools, while leaving dev-tools opened, but:

• If dev-tools is opened, focus it with Cmd+Opt+c
• Close dev-tools and focus page with Cmd+Opt+i
• If dev tools is closed, to jump straight into console: Cmd+Opt+j
• Switch tabs with Cmd+[ and Cmd+]
• Esc to toggle console in dev-tools

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

Answer 5

OS X you can natively cycle between application windows using:

Move focus to next window: ⌘ + `

Move focus to last window: ⌘ + ⇧ + `

If this isn't working, check it's enabled in

System Preferences > Keyboard > Keyboard Shortcuts tab > Keyboard section

Answer 6

While on Linux, switch to address bar from Dev Tools with Alt+D and then press Shift+Tab twice. This brings you back to main page. Shame it doesn't work on Mac though.