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

问题

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:

• https://developers.google.com/chrome-developer-tools/docs/shortcuts
• https://groups.google.com/forum/?fromgroups#!topic/google-chrome-developer-tools

回答1:

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:

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

回答2:

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

回答3:

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

回答4:

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.

回答5:

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.

回答6:

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.

回答7:

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!

回答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?

来源：https://stackoverflow.com/questions/12823333/keyboard-shortcut-to-switch-focus-from-web-developer-tools-to-page-in-chrome-on