Is there a way to prevent the chrome dev tools from stealing the focus if you stop the debugger / reach a breakpoint?
I'm debugging with intellij js debug and chrome is stealing its focus on every step.
In the Chrome DevTools Settings under Preferences -> Sources, there is an option "Focus Sources panel when triggering a breakpoint". Disabling this option seems to fix the issue.
That is really annoying, my kind of solution is to set the size of the Chrome window very small and then navigate using the Chrome Debugger Shortcuts (F10, F11, F8) and not the WebStorm/IntelliJ ones (F8, F7, F9), then it kind of works. Chrome stays in focus, but it is small and you see it stepping normally in the WebStorm.
Related
I would love it if there was a hotkey, or some other method I could use to avoid having to use the mouse to constantly re-open this window whenever I redeploy my app.
Alternatively, is there a way of re-using an opened device inspector window that I'm unaware of?
chrome://inspect URL can be a good option.
But, what IS chrome://inspect? Well that's a global development tools page. It opens on the "Devices" tab by default, so that's handy.
I searched for a keyboard shortcut, but sadly I didn't discover any.
You could bookmark chrome://inspect and put a shortcut on your desktop by the way (except for Chromebooks, which is what I wrote my answer with)
From there, you can jump to inspection of any open page in your Chrome browser, which is nice too.
Alternative: When undocked, the Inspector will have the Console in the bottom. Well on the bar above the console, the leftmost three-dot menu has a direct "Devices Inspector" option.
I use os x and use Cmd+Opt+I Hotkeys to open Inspector in chrome.
You can find more hotkeys here
Hope this helps
Thanks
I am using chrome version 36+
according to this page, I should be able to allow custom themes using the following instructions:
Installation Instructions
Add this theme
Goto chrome://flags and Enable Developer Tools experiments.
Open developer tools settings, select Experiments tab, and check 'Allow custom UI themes'.
Reload devtools.
I do not see such a tab in the dev tools settings. I see only 'general', 'workspace', and 'shortcuts'
These are some simple steps to follow, hope it will be helpful.
Open a new chrome tab, type chrome://flags
Find, "Enable Developer Tools experiments." using ctrl/cmd+f or simply searching for it by scrolling down the page.
Click the "enable" link
Click on "Relaunch Now" at the bottom of the page.
After restarting Chrome, open DevTools, DevTools settings, and select the experiments tab.
Now select the experiment you want (e.g. "Allow custom UI themes").
You need to reload devtools after: Alt-R will reload devtools itself, or you can just close and reopen it.
To get to the Dev Tools Experiments area you have to click on the gear icon in the inspector.
If still not working you should go to:
chrome://extensions/
And click the 'Enable' checkbox for the DevTools extension you wish to enable.
Had the same issue,
I found I was going to browser settings which is NOT where you should be going to ,
You need to go to developer setting .
i.e right click>inspect element> dev tools
You need to restart the browser after changing the flag at chrome://flags
I found it. There is a checkbox under experiments tab:
Allow custom UI themes
Restart chrome just not means to close the chrome and then open it. you should click the 'Relaunch Now' button of the flags tab. and then it's work for me.
loislo's answer is absolutely right (You need to restart the browser after changing the flag at chrome://flags). But notice that your chrome can work in the background. Go to the tray, look for the chrome icon and exit.
Navigate to chrome://flags/
Find and enable Developer Tools experiments Mac, Windows, Linux, Chrome OS
Relaunch Chrome, open develop tool, setting, you will see experiments tab.
My Chrome version: Version 61.0.3163.100
2022 update: There doesn't seem to be any option in chrome://flags but there is an option:
devtools > settings > experiments > Allow extensions to load custom stylesheets
With Chrome 32.0.1700.77 the new emulator tab is handy except it's the default tab when I refresh my page.
During my standard development workflow, I constantly refresh the page when I make changes. I usually have the console window open at the bottom of the network or source views. But every single time I refresh the page, the Emulators tab takes focus and I can't see the console.
This is truly annoying since the app will fail because of a simple JavaScript typo, but I can't see the console without clicking one more time (to focus the console tab).
Has anyone found a workaround for this?
Combined with the Chrome Developer Tools unresponsive since update 32.0.1700.76 m issue, I would have to say Google really tripped up this release.
Unfortunately there doesn't seem to be a workaround yet. It looks like there has been a bug reported to Google as found on this thread, but no fix has come about yet.
I think the only way (right now) to prevent the console tab from being hidden when needed is to avoid using the emulator or revert to a previous version of Chrome.
Hopefully a fix comes soon!
It's been a while since this post was made, but I came across the same issue recently. When you have the developer toolbar open, the phone icon beside the "Elements" tab should be blue. Clicking that will disable Emulation.
source: https://groups.google.com/d/msg/google-chrome-developer-tools/g_93_bKmaiA/SdHk0aXdEo4J
Is there a way to disable inspect element, right click and F12 in google chrome?
This is definitely not possible to do from a web page.
Even if you disable right click and disable the default behaviors for F12, Ctrl+Shift+I, and Ctrl+Shift+J, there is no way to stop a user from opening Dev Tools on a different page and navigating to your page with Dev Tools already open.
Also, you can access Dev Tools by going to Menu > Tools > Developer tools, which cannot be prevented by any website.
You can run chromium in a java environment. This I have seen, then its impossible to open developer tools, and settings etc are not accessable. But of course it would involve a lot more work and development time.
According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/
Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.
Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.
I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.
A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.