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
Related
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.
Anyone know of a way to open Chrome Dev tools to a new window upon open?
I know that I can click F12 and then click the 'customize' button and change orientation or pop out the dev tools window. But that's an extra step, and often a window resize is necessary, and when you do it 50 times a day, it gets to be tedious.
Also, sometimes, on pages I'm testing, pressing F12 will change the layout of the elements on the page and even popping out the dev tools leaves the page layout different than before I opened dev tools. This can make it hard to tell if an element is visible or not, which makes troubleshooting Webdriver more difficult.
Ideally, CTRL+F12 or something to open dev tools as a separate window would be super handy. (to any Chromium devs that might be listening ;) But if anyone has another solution, I'd love to hear it.
If you have your DevTools un-docked, the dock mode, size and position of your DevTools window will remain the same as you previously set it. For example, I just set mine to be maximised on my other monitor. Every time I open up DevTools, it's an un-docked, maximised window, and there's no change to the layout of the inspected window other than the fact it's no longer in focus.
You could alternatively launch Chrome using the --auto-open-devtools-for-tabs flag, which will automatically open DevTools in the dock mode, size and position you had it previously. You can use:
Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
Windows: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
In WebDriver, you can set flags for how Chrome opens. However, after looking into this further, it turns out Chrome currently do not support multiple clients connected to the protocol simultaneously.
As for speeding things up, you can switch between dock positions with Cmd+Shift+D (Mac) or Ctrl+Shift+D (Windows). This toggles between the last two modes you have used, so say you have it docked at the bottom, you then pop it out, using the shortcut now will toggle between the two.
Here's how you do it. On opening the developer tools, with the developer tools window in focus, press F1. This will open a settings page. Check the "Auto-open DevTools for popups".
Originally documented here -- https://newbedev.com/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened.
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
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?