77

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 order to use r again (though I would obviously just refresh with the button). Does anyone know of a keyboard shortcut to switch from the dev tools back to the page? I know you can use cmd [ to switch panes inside of the dev tools, but can't find a way to switch back to the page.

4

14 Answers 14

47
  • When Chrome DevTools is focused, Shift + F6 will focus on the page content.
  • When Chrome DevTools is open and the page content is focused, F6 will focus on Chrome DevTools.

Reference: https://support.google.com/chrome/answer/157179

Google Chrome Feature Shortcuts

F6 Switch focus forward between the Address bar, Bookmarks bar (if showing), and page content
Shift + F6 Switch focus backward between the Address bar, Bookmarks bar (if showing), and page content

5
  • 9
    Note that this is platform specific (Windows and Linux) and does not work on OSX Commented Aug 30, 2017 at 8:24
  • 2
    I can confirm - this works great on Linux and Chromium. Thanks :-)
    – modulitos
    Commented Sep 26, 2017 at 18:33
  • The @Mike 's method works i can confirm. However i'd like to mention another method as well. Since i am a Front-end developer, i sometimes use my DevTools as "Undocked Seperate Window" Mode and in this mode a quick way to focus between page and DevTools is Alt+` (Linux). Not Sure if same works for Windows and Mac. Commented Oct 11, 2018 at 5:30
  • 1
    On mac go: CMD+L to target the address field then CMD+SHIFT+TAB to cycle backwards in the tab stack to get to the page content. Commented Jul 3, 2021 at 10:38
  • 1
    CMD+SHIFT+TAB opens the MacOS app switcher. What works for me is CMD+L to focus the address bar, then Escape to focus the page.
    – Huon
    Commented Oct 6, 2022 at 0:12
14

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

13

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:

enter image description here

1
  • this is the best i have found so far, but still annoying i need to press so many keys to just focus the page (cmd+L+j+enter) . Did you find something better?
    – Doug
    Commented Jun 18, 2019 at 9:30
8

Like I have answered here
New Update: In chrome Version 92.0.4515.131.

  • When DevTools is open and focus.
  • Press (⌘ Command+⌥ Option+↓ Down) Twice.
    First time pressed - the focus will transfer to the URL.
    The second time pressed - the focus will transfer to the page.
2
  • If helped you, please upvote, that others can see
    – Roee Rokah
    Commented Jan 13, 2022 at 9:20
  • Best answer! Combined with "tab" you can also type into the console this way.
    – Duncan
    Commented Mar 5, 2023 at 14:09
6

Does anyone know of a keyboard shortcut to switch from the dev tools back to the page?

Tab is the key you're looking for. Use it to focus the page after pressing Esc to open the console.

2
  • This should be the accepted answer! Faster than Shift + F6, and it's platform-independent (works on OSX as well). Commented May 21, 2020 at 4:16
  • 6
    Doesn't work on my machine. It just tabs through the various clickables. (And if the DevTools Console input line is ever focused, <kbd>Tab</kbd> actually inserts a Tab character.)
    – Jellicle
    Commented Jul 19, 2021 at 19:22
4

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

2
  • Thanks! The question is more for when the dev tools are in the same window though.
    – dc-
    Commented Sep 7, 2015 at 18:33
  • 1
    This is only for dev tools undocked
    – chrismarx
    Commented Dec 12, 2018 at 15:23
2

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
2

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.

2

If using Windows, the following AHK script will do the job:

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

To verify:

  • Focus Chrome DevTools.
  • Press Alt+A.
  • Now the webpage should be focused.
2
  • 1
    Not sure why AHK is needed... it appears the F6 will do the trick, although it may require pressing it twice as the first seems to focus only the stuff on the address bar row.
    – Michael
    Commented Nov 20, 2022 at 2:19
  • @Michael Pressing Shift+F6 once to focus the webpage, but Alt+A is more convenient, that's why AHK is needed.
    – Wenfang Du
    Commented Nov 20, 2022 at 5:50
1

hit f6 to focus on address bar, hit return or f5 to refresh, then hit tab to focus on the browser window elements...

It's roundabout and probably doesn't help in all cases, but if you're testing tab index or something and don't like to use your mouse, this is the only way I figured out how to switch back without closing the console.

1

I got pretty frustrated with this too, but my problem is a bit different though. I have dev tools detached (in a separate window) and I always need to click to get back to the page.

I wrote a small applescript that works for me:

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

I have it bound to a shortcut using Spark.

So whenever I'm in a detached dev tools window, I hit my shortcut and focus is put back to the page and I can use Vimium again.

1

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.

1
  • It may take more than two F6 keypresses to make it to the web page depending on which "panes" (e.g., downloads) are open. For example, at this point in time, it requires four F6 presses with chromium to get me from the address bar to a focus on the web page view.
    – dat
    Commented Sep 13, 2020 at 17:22
1

My solution is based on Upper answers (for Mac users):

  1. Set drawer to Console
  2. With focus in DevTools, press Esc to open drawer (Console)
  3. Press Tab, to switch focus on page
  4. With focus in page input, press Shift + Tab to switch focus in DevTools
0

There isn't a way to switch from the dev pane to the window, but cmd r accomplishes what was needed (a refresh of the page).

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.