36

This question is directly related to following existing question with different tag:

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

As stated in the title, is there anyway we can switch focus from web developer tools to page in Chrome on Mac OSX.

I looked up online, and at Chrome Dev. doc and help forum, nothing there but they pointed to SO for an answer. Here are some links regarding this question, I already found useless:

Community
  • 1
  • 1
Alvin T
  • 418
  • 4
  • 8
  • Hitting ⌘+⌥+J twice will hide the dev tools and focus on your actual window. Do you want to focus on window without hiding dev tools? – Mohsen Oct 16 '12 at 10:18

10 Answers10

29

Press F6 three times. To go back to DevTools press F6 one time.

F6 loop the focus in this order:

  • Page
  • DevTools(if DevTools is open)
  • Address bar
  • Bookmarks
Mwiza
  • 7,780
  • 3
  • 46
  • 42
Michel Alonso
  • 804
  • 10
  • 16
27

You can move focus to the address bar with "Cmd + L". If you put javascript: in the address bar and hit the enter key, you can switch the focus to the page.

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

  1. Go to Chrome Settings page (Cmd + ,)
  2. Click "Manage search engines..." in the Search section
  3. Add a new search engine with
    • any name e.g. Back to page
    • any keyword e.g. j
    • URL - javascript:

enter image description here Now you can move focus to the page only with j.

Sanghyun Lee
  • 21,644
  • 19
  • 100
  • 126
  • 4
    nice, thank you... It is a hack, but works for me. I'm surprised Chrome Dev Team never added generic shortcut for that. – iLemming Oct 07 '15 at 00:10
  • Genius! How has this option not been implemented into Chrome in the 3 years since this question was posted? – GreenRaccoon23 Oct 07 '15 at 17:20
  • Hmmm, this isn't working for me on Chrome 50.0.2661.102 :( – Jason Axelson Jul 29 '16 at 23:48
  • 2
    I wish Ctrl + L (Cmd + L equivalent) worked on Linux. It doesn't break out of Dev tools. – Elijah Lynn Feb 09 '17 at 19:04
  • @ElijahLynn Try Alt+D instead of Ctrl+L to jump to the address bar. It's a little more widely implemented: works in major browsers, Windows Explorer, KDE/Gnome, and in may other programs with address/nav bars. The best part is that this leaves Ctrl+L free to clear the web console like in most terminals (although newer browser versions often make you hit Ctrl+Shift+L). The main downside is it doesn't generally work on Mac, though Cmd+L does, so Mac users stick with that I guess. – Ken Bellows Mar 27 '17 at 17:30
  • @ElijahLynn 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. Thanks @kenbellows for pointing to `Alt+D` shortcut. – evenfrost Aug 29 '17 at 15:01
  • 2
    just the hack I was looking for! One improvement: change keyword to `l`, so you can quickly press `⌘+L`, `L`. – Red Twoon Jan 31 '19 at 17:38
  • @RedTwoon that's awesome advice. Thanks! – Sanghyun Lee Jan 31 '19 at 20:16
  • 1
    This hack is brilliant! – undg Dec 31 '22 at 17:59
10

If you've un-docked dev-tools, on a Mac use Cmd+` (backtick) to move focus to active or next window.

This keyboard shortcut can be found and customized at:

System preferences -> Keyboard -> Shortcuts -> Select "Keyboard" category

rafi
  • 1,648
  • 2
  • 18
  • 23
eon
  • 1,868
  • 1
  • 23
  • 24
  • 9
    I think this may only work if you've undocked devtools. If Chrome has only one window, this has no effect for me on 10.9.3 – ptim Aug 22 '14 at 01:46
  • @memeLab Even undocking this doesn't work for me. Specifically, I have an onkeydown event handler which doesn't fire when I switch away from the undocked devtools to the main window being debugger and then hit a key. I have to actually click on the page to get focus for some reason, but this causes other problems because I'm trapping those clicks for other purposes. – Michael Sep 15 '14 at 22:39
  • yeeesss. ive been looking for this for ages... thank you – steveinatorx Aug 31 '16 at 21:27
7

I've had this exact same use case, and I'm surprised there isn't a simple shortcut for it. I've done some research, and it seems there are a few options:

  1. Use command + option + J to toggle the console off. This will bring focus back to the web page. Then, hitting command + option + J again will open the console and direct the focus there once again. This is probably not the best way since there is a little bit of on each toggle.

  2. Open Dev Tools in separate window. You can find this by clicking the three dots in the top right corner of the dev tools, and then you can find a button for undocking the tools into a separate window. Then, to toggle focus between the web page and console, you can hit command + `.

  3. The answer above from @Sangdol is a great solution for switching focus from the console to the web page. This is probably the fastest and best way of doing this once it's set up. The only thing I'd like to add is how to switch focus back to the console. For this, you can hit command + shift + C twice (hitting it only one will successfully switch the focus, but will leave the browser in 'Inspect Element' mode). I've found that if the focus on the webpage is in a text box, you may have to hit Esc first before hitting command + shift + C.

Community
  • 1
  • 1
Kurt Weiberth
  • 121
  • 2
  • 7
3
  1. Press ⌘+L to go to address bar.
  2. Press Esc.

You have now switched focus from web developer tools to page. To switch back press focus back press ⌘+⌥+C.

Bibek Lekhak
  • 61
  • 1
  • 7
2

This works for docked but is best for undocked dev tools and multiple windows/tabs.

 

  1. With devtools focused hit ⌘+Shift+P
  2. start typing in Debuggee
  3. Hit enter when you see Focus debuggee, done!   

Then to go back to dev tools just hit ⌘+⌥+J to focus back on the tab you left them.

 

It saves me some time everyday - my tabs can grow on me over the day... or days... weeks - pretty sure you've all been there - R&D!

Tom Tu
  • 9,573
  • 35
  • 37
2

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.
Roee Rokah
  • 197
  • 2
  • 9
1

OS X 10.8.3 - Mountain Lion

customize "Move focus to next window in application" short cut, because the default key map is "Command + F1", which is binded to show "Shortcuts for Developer Tools" on chrome.

massan
  • 64
  • 1
0

Update in chrome 107

You can now customize keyboard shortcuts for commands in DevTools.

Go to DevTools Settings > Shortcuts > set shortcut for "Focus debuggee".

enter image description here

adl
  • 1,865
  • 1
  • 25
  • 32
-1

Hitting ⌘+⌥+J twice will hide the dev tools and focus on your actual window. Do you want to focus on window without hiding dev tools?

Mohsen
  • 64,437
  • 34
  • 159
  • 186
  • 1
    Thanks for the answers but ⌘+⌥+J or ⌘+⌥+I will only reopen more developer tools, it doesn't focus back to the page. It doesn't matter if dev tool is hidden or not, I just want the focus back to the page. – Alvin T Dec 07 '12 at 18:46
  • 3
    yes, I want to shift focus to actual window, without hiding dev tools – chrismarx Oct 24 '13 at 14:25