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
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
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.
Go to Chrome Settings page (Cmd + ,)
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:
Now you can move focus to the page only with j.
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
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:
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.
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 + `.
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.
Press ⌘+L to go to address bar.
Press Esc.
You have now switched focus from web developer tools to page.
To switch back press focus back press ⌘+⌥+C.
This works for docked but is best for undocked dev tools and multiple windows/tabs.
With devtools focused hit ⌘+Shift+P
start typing in Debuggee
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!
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.
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.
Update in chrome 107
You can now customize keyboard shortcuts for commands in DevTools.
Go to DevTools Settings > Shortcuts > set shortcut for "Focus debuggee".
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?
Related
This is an extremely stupid question... but how do I close/toggle the search box in vscode?
I hit [ cmd + shift + f ] to do a global search, but then I need to reach for my mouse to actually close the box to allow for more screen space.
I've searched through their issues, and there seems to be another user in the past who also experienced something similar --> https://github.com/Microsoft/vscode/issues/32613 , but the solution provided of cmd - b only works for closing the sidebar.
My developer speed has drastically dropped since this issue, and I'm certain there's been a fix.
Please help. :(
**added in picture here -->
Press CTRL + SHIFT + E. It will switch to and focus the explorer.
Your search results are appearing in the panel, not the sidebar.
To toggle the panel:
pc/mac: ctrl + ` (backtick)
mac: ⌘ + J
However, if you want your search results to appear in the sidebar (which I think is the default behavior), then add this line to your settings:
"search.location": "sidebar"
Similar to what Vijey has mentioned, you can use the Toggle Panel keyboard shortcut which will do the job for me. On A mac the shortcut is
⌘ Command+J
I'm coming from sublime where the search results appear in a new tab - making it much easier to close the results (just like closing an other tab)
The best way to get rid of the search panel is by doing the following: -
On a windows computer, press and hold CTRL + Q
A window will then pop up, you can then release Q when the window pops up but you still have to hold down the CTRL key to keep the pop up open
3.Now use your mouse to click on the option called explorer and the search menu is now gone
There is no keyboard shortcut to close the search panel. However, you can create a shortcut yourself as shown in the attached image.
1) Go to File > Preferences > Keyboard Shortcuts.
2) Search for the command 'Close Panel' and set it to your convenient keyboard shortcut.
In the image below, I set it to Ctrl+F8.
If the search box displays in the sidebar (see Amr Noman's answer on how to set that up if it isn't already), How do you close the search box and go back to your project folders? In this case, there is no tab you can close with a click of the mouse. One way is to set up a keymap shortcut, e.g.
{
"key": "cmd+'",
"command": "workbench.files.action.showActiveFileInExplorer"
},
You can figure this out by going to Preferences -> Keyboard Shortcuts and searching for sidebar. One of the hits is described as "File: Reveal Active File in Side Bar"
More generally, any action that hides your project folder view in the sidebar can be cancelled by this shortcut.
I have the developer tools floated to be a separate window.
It nows takes the entire screen.
I did lots of research to see how to close it, but found nothing related.
Most of the posts are about how to open it.
(I tried CMD + option + i / F12, neither one works).
Also, I wonder how to dock it back into the page. I do not see such
an option under the "..." on top right corner.
Command+Shift+D (Mac) or Control+Shift+D (Windows, Linux) restores the DevTools window back to whatever position you had it in before you undocked it.
You can also change the docking position by opening the Command Menu, typing Dock, and selecting the option you want.
You can also access these options from DevTools's Main Menu. Note: It sounds like you were looking for the options in Chrome's main menu. You won't find any DevTools options there, other than the option to open DevTools.
It's possible to browse the commands previously run in the console by pressing the up and down arrow keys. I want to clear this history. How can I do this?
You can now just right click on the console area and select "Clear console history".
If you want to clear the list of last typed commands, follow these steps:
(Step 1 and 2 are important, don't skip them!)
Undock the console (click on the icon in the bottom-left corner, ).
(if you don't see , but , then hold the mouse pressed for a few seconds to get the desired icon)
Press Ctrl + Shift + J to open the console for this console. (On OSX use Cmd + Option + i)
Go to the Resources tab, "Local Storage", chrome-devtools://devtools.
Right-click on the item with key "consoleHistory", and choose "Delete".
Done! You may close the new console, and then dock the previous one if wanted. The console history will be gone when you reload the console.
If you just want to clear the console log (not the commands), just press Ctrl + L.
You could also use Incognito mode if you don't want to keep the list of commands you're going to type.
I found a quick way to do this with cool keyboard shortcut:
Inside chrome console
Press Ctrl + Shift + P
You will see this awesome command palette opened:
type clear and you will find it :)
That's it!
If you don't want to have this console history (like myself), simply disable it from the devtool's configuration options (see on the image) below ...
This is very simple, just right click the console window and select Clear console history, then refresh the page.
Please note, refreshing/reloading that tab is required.
Simply enter clear() in the chrome console to remove all previous text there.
I ended up here looking for how to do the same thing in Firefox.
In case anyone else does the same, there is a clearHistory command in the Firefox console which will do just that.
https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands
You can do that now easily with
cmd + shift + p
Type "clear"
Choose Clear console history
It can also be fixed by going to the developer tool settings and resetting to defaults.. (this will not reset 'Chrome', only developer tools options)
Open Chrome devtools
Go to settings (or press Windows ->F1 / OS X -> FN + F1)
Reset to the defaults
This way you will lose your developer settings, but for me the only thing that mattered was turning cache off again..
These shortcuts Clear Console.
⌘ K or
Ctrl L
I generally close tabs while using Eclipse with command+w, however, sometimes hit command+q by mistake. Even though I have Eclipse set-up to warn me when exiting (Preferences -> General -> Start-up and Shutdown, "Confirm exit when closing last window"), this shortcut seems to bypass the warning, which is quite annoying.
Is there a solution to this same as the way Chrome presents a warning when hitting this shortcut? A hack in some plist file maybe? Google searches have not helped much.
OK, so having the same problem with Safari and doing a google search led me to this Apple discussions page. Basically following these steps (via #evenhuis) you can re-map the quit shortcut to any other menu function:
Go to System Preference > Keyboard.
Choose Keyboard Shortcuts
Click Application Shortcuts
Press the + button
Under Application choose Eclipse
For Menu Title input "Show All". (You could use some
other innocuous menu option here)
For Short Cut use ⌘Q
Is it possible to open the developer tools inside(attached to) a popup and not detached? I'm currently working a site with popups and need to bebug javascript and find it quite annoying to toggle between the popup and the developer tools window.
When debugging popup windows you can convert them to tabs. You can do this by right-clicking the title icon and selecting the show as tab option. Then you can open the developer console as usual.
There is a tiny button waaay down to the left of the developer tools (in the row where Inspect Element and clear console log are), it looks kinda like two rectangles overlapping... The tooltip should read "Undock into separate window"...
Is that what you meant?
-Edit- Just reread the question better... I guess that is not what you meant... :)
Open Chrome Dev Tools (Cmd + Option + I)
Open the Console tab
Paste the following, the hit enter:
setTimeout(function(){debugger;}, 5000)
Navigate to your popup and wait- in 5 seconds, the debugger will pause the page, and you can see your code!
Enjoy your debugging! 🐛
Reference from Mitch Winkel-Davis
Please press and hold the tiny button for seconds.
After that, you will find the another icon (or button) at the same location.
Please release your mouse button.
You can see a popup window of developer tools.
Just press ⌥ + cmd + I when the pop up window is in focus and dev tools will open in a new pop up window