Suddenly my Chrome console can't show up any more. I even tried to uninstall and install Chrome, but nothing helps.
Look how it looks without the console:
And this is how it looks when I press F12 to open the console (the same thing if I try to open it via the menu) notice that it pushes the content aside with blankspace and there isn't any console at all!:
F Lock also disables this functionality. Please toggle the F lock state and check.
I suggest you to try this:
Go to %LOCALAPPDATA%\Google\Chrome\User Data\
Rename the folder "Default" to "Backup" or something else
Launch Chrome (it will recreate the Default folder with a blank user profile)
If you don't have any problem after doing this, your user profile is corrupted. When you uninstall Chrome, your user profile is kept, this is why the problem was still here after reinstalling.
If your F12 press alone doesn't open the devtools in the browser then press and hold Fn and then press Esc. It's done!!
Now you will be able to open devtool just by pressing F12.
I had a similar problem. In my case, it was the TrackIR software intercepting F12. So if you have TrackIR, check it is not running.
I just stumbled upon this and fixed it by turning off all extensions, and then turning them back on one by one. It turns out in my case the screen reader extension "Chrome Vox" caused the issue.
Related
I'm trying to do a hard reload and empty cache in Chrome because a previously loaded site keeps coming up on the localhost port I'm using.
The problem is the right-click options seem to have stopped working, ie. nothing happens when I right-click on the refresh button and I can only left-click and reload the page normally.
I had the option before so I know it's not the Chrome version I am using. It's pretty annoying. Does anyone know what's happening here?
Thanks in advance!
Just figured out the basic reason for this - Developer Tools Console must be open to access right-click options on the browser refresh button.
There are two ways to do this. The quickest way is to press F12. You can also right-click anywhere on the page and select Inspect.
I guess it is a feature mostly just for developers and the Chrome team doesn't want regular users accidentally clearing their cache!
Press F12 to open the developer tools and then you can right-click the reload button, and you get three options - Reload, Hard Reload (redownloads images) and Empty Cache and Hard Reload.
I am not sure what the problem is here, but I am unable to record timeline in chrome devtool. I click on the start recording icon, and when I stop it, it just keeps saying retrieving timeline.
Chrome Version: 50.0.2661.102 (64-bit)
Operating System: OSX
I tried incognito and also deleted all my /Application Support/Google/Chrome files. Nothing worked.
Just reload it! If you are on a windows/apple computer then press f5. If you are on a chromebook press f3 (or the reload looking button) or You can look on the top left and press the reload button it.
I hope this works for you
The chrome tabs auto refreshes every time when I go to the tab and its turning out to be really annoying. Any fix?
I was able to resolve this inside Chrome Version 48.0 (Running on Windows 7) by performing the following steps.
1.) Open the Chrome browser and navigate to chrome://flags
2.) Search on the page for "Enable tab discarding"
3.) Set this flag to "Disabled"
4.) Restart Chrome.
Chrome will do that when you are low on memory. If you have a lot of programs open, try closing some of them out.
I've Googled this and nothing comes up. So this is some new DOM warning that I have discovered completely on my own. WTH is this?...
Seems to be related to a recent LastPass update, although that's as much as I know.
If you check in dev tools you'll see that the warning is related to 'onloadwff.js'. If you click on that file reference and hover the tab for that file in the sources panel you'll see that the tooltip shows it is part of a chrome extension. I can confirm that disabling the LastPass extension resolves the warning.
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.