Since its inception few years back, Chrome has become a de-facto IDE for web development. I've been using it's Canary(Version 28.0.1464.0) channel for quite a bit and been happy as a clam.
Only issue that keeps bothering me is the lack of ability to have the DevTools console pane, auto scroll to the last message added. I understand that many folks would prefer to have the current behavior. However I was wondering: Does anyone knows how (if even possible with the current release) to flip the switch and have the console auto-scroll?
Thanks.
Clearing the console and scrolling the bar down to the bottom didn't work for me.
The problem was that I had zoomed out DevTools.
Solution:
Focus the DevTools, e.g. by clicking on the console's > prompt
Hit Ctrl-0 (zero) on Windows, or Cmd-0 (zero) on OS X, to restore the default font-size
Hopefully then auto-scroll to bottom will start working again!
Thanks to this guy for pointing it out:
http://code.google.com/p/chromium/issues/detail?id=161646#c5
One Reason why it's happening:
Logging of HTML elements into the console makes the console view lose the last console message.
How to solve it:
Instead of doing something like this:
console.log("Some logging message:", html_element)
try this (wrapped the messages with brackets)
console.log(["Some logging message:", html_element])
It drove me crazy too and I found the solution here:
Google Chrome follow developer console logging
With the console open, drag the scroll bar down to the bottom of the
window and release it. It should tail the output for you.
It does not matter if you have the console docked or not.
Working for me on a osx 10.8.5 and chrome 31
In Chrome version 29.0.1547.76 m, it auto-scrolls when you undock the console. It stops auto-scrolling if you click on the console, then you'll have to clear the console before auto-scroll will be ready to start again.
The "Undock into separate window." button is the bottom-left most button of the console.
For me I've noticed that the autoscroll stopped when the console showed a warning so I've filtered out the warnings and all is good:
For me the only solution that worked was:
click F1 (settings)
At the bottom restore defaults and reload.
None of the above worked.
I found this solution in Chrome 49+
Go Dev-tools/ Settings /
"Console tab"
x Preserve log upon navigation.
Done!
Related
Since yesterday I have following problem: The variables in session storage are not visible anymore in chrome/devtools under session storage. In the console, I can call the variables, so they're here, but not visible.
So far the only way I could solve this problem is by changing my chrome profile to "gast". Then I can see the variable back. But I don't know which settings should I do to make it work under my regular profile.
Anyone a clue?
I had the same problem and I just solved and it was very simple.
1 - Open devTools and go to Settings
2 - In Preferences roll to the bottom of the page and select the "Restore defaults and reload" option.
I'm seeing the same thing, the localStorage preview sometimes gets stuck and is not updating. Reload or reset of preferences is not helping.
Reported it here: https://bugs.chromium.org/p/chromium/issues/detail?id=1414104
Had the same issue.
My teammates could see data in the application tab, but I could not.
What solved the problem was running:
chrome://restart
in the address bar.
Hope this helps.
Now I can see about VM line in my chrome developer tools like this.
There are some solution that I found,
such as make gray 'pause button'
however, it was already gray in my developer-tool
and it was also not worked for me.
How can I get rid of that VM messages in my console?
Thanks for read my problem.
With the right mouse click on a VM:xxx link select "Reveal in Sources panel", and study the code that causes those console messages.
In my case, I found there this line - original Method(...format WithStyles(args, 'color: ${color}'));, and other lines there revealed that it was referring to React Devtools Extention. So in its "Components" console tab => Settings gear icon => Debugging tab => I checked on the "Hide logs during second render in strict mode" option.
It helped me, but it can be some other extension in your case. Study the source code of a message first.
Open Chrome console, than select All Levels (it may appear like Default, if so, click it.) See in the list if Info is checked. If it is checked, close it. It helped me to get rid of it, hope it will help you to get rid of [VM] line in Chrome console too.
Check the image below:
i'm struggling with the classic HTML input of type file. I was using it on my angular application and i had freeze sometimes, the whole browser became unresponsive, and the only thing that works is the scroll.
You can't click any buttons, select any text or even change tab on the browser for about 5 seconds. I tried a lot of different file type and sizes and it doesn't change any of this, it even freeze sometimes when i don't select any file in the explorer and i click the close button directly.
So I thought it was my implementation that was bad and i went to the Mozilla developper website where you have an example and I have exactly the same behaviour. I also tried to take only the HTML from the Mozilla website and put it alone on a .html file and again, same behaviour.
This does not occur 100% of the time, but I would argue that on my end it does it about 60/70 % of the times.
I tried it on chrome and Firefox (both up to date), on multiple computer (all running Windows though) and i have the same behaviour on all of them.
I don't have any error or anyting in the consoles.
I don't know what to do with this, i'm pretty sure it can't be the file's input on the whole web that are bugged, but i tried a lot of various things with always the same results. Should i report it somewhere? ( if so, where? ) Or what would you suggest to do to investigate this further?
I couldn't find anyone discussing this issue on the internet apart for this thread that had no solution, they also say in this thread that the bug is not reproducible in Edge, but i just tried and it does the same thing.
Thanks for reading me and for any help about this.
Chrome freezes for few seconds when after any use of file field.
It was because I had a shortcut in "Quick Access" menu in windows explorer. This shortcut has been linked with a folder shared by network. I've removed this shortcut and everything is good now.
Same here, I have a mapped network drive that is not responding, this make a 5 seconds delay. After unmapping the drive, no more delay. The delay is the same in firefox or chrome.
Same here, if you want to remove it, on Windows 10, click on the icon Quick access (blue star), then right click on the dead link appearing in the "Frequent folders" panel on the right panel and choose "Unpin/Remove from Quick access". There should be no error message.
I'm trying to view the emulation panel but I can't find it anywhere. Everywhere I've looked it says to open an overrides panel to find it but that's missing too. I also can't find any helpful or new answers to my question. Pressing esc only opens up console and there's nothing in settings that seems to help. Can someone please tell me how to reach it?
Instead of emulation in the drawer Device Mode is now offered for emulating other devices. It provides many benefits over the old emulation mode, such as taking into account the meta viewport tag on render. So what you see is much closer to what you'd get in real life.
I'm using 51.0.2704.103 (64-bit) on a Mac.
Cmd-Opt-i to open console.
Click the button with three vertical dots and the very top right of the Developer Tools window.
Select: more tools > sensors:
If the console draw is not already open it will open. Either way there should now be a sensors tab next to the console tab on the console draw. Click this tab and follow your nose from there.
Note that this tab had an x by it. Hitting this will hide the sensors tab and next time you use it you will need to follow the steps above again to reinstate it.
How to remove all breakpoints in one step in Google Chrome? Using version 11.
[update]
There is now a feature request for this.
[update]
The feature request is closed (Dec 2011)!
This is now possible in Sources tab of Chrome Developer Tools.
Please see screen grab below and right click within the "Breakpoints" section of the left window.
Since recently (Chrome 18), you can right-click any breakpoint in the Breakpoints pane and voila! The "Remove All JavaScript Breakpoints" popup menu item!
Chrome Devtools crashed everytime I tried to access the Sources panel because of a breakpoint on a minified Javascript file.
To remove all breakpoints without access to the interface, you can do the following:
Open inspector-on-inspector : undock first inspector and hit ctrl+shift+i to open the second
On the inspector-on-inspector console, execute the following:
window.localStorage.breakpoints = [];
Close the inspectors and reload the page. Now the breakpoints are gone.
Under Sources, you can click button marked with red on picture below or use shortcut Ctrl + F8 just like tool tip is showing (activate / deactivate breakpoints). A little bit lower under 'Breakpoints' you will see all your breakpoints. If you choose to disable all, they will be grayed out.
solution here.
To purge all breakpoints open inspector on inspector (undock first
inspector and hit ctrl-shift-I to open the second) and run
"WebInspector.settings.domBreakpoints.set([])" in second inspector's
console.
new Tabs; Ctrl+Shift+J to Console; Access URL
Open the Chrome task manager and end the tab page.
Ctrl+Shift+J to Application -> Service Workers (Offiline) -> Refresh
to Sources Cancel Breakpoint
Success
Another option is to de-activate all break points using:
Ctrl + F8
In my case Uninstall and new installation of Chrome was without any success.
Also window.localStorage.clear() did not help.
My "last chance solution" is to remove entire directory where Chrome is storing its data.
First turn off your Chrome.
Then look at this path "c:\Users\ {your_user} \AppData\Local\Google\Chrome\User Data\Default\Local Storage\". Here try to delete all what is in this directory.
You can also clear all inspector settings and reload the inspector. It helped me with fantom breakpoint I could not remove in any other way. Open inspector and go to Preferences -> Sync -> Restore defaults and reload (at the bottom).
Step 1: Go to Developer tools and expand Breakpoint section
Step 2: Right click on expanded area of breakpint and there will be many options lik