Google Chrome F12 console not showing warnings? - google-chrome

I'm using Google Chrome 30 (stable, not beta or canary; Windows 8) and for some reason it's displaying that I have five warnings but it's not showing what those warnings are in the console.
I can access the cause of the warnings by finding the faulty file in the sidebar (under Frames > *.html) but I was wondering if there was something I could do to make it display the warnings in the actual log. I have tried clicking on the (!5) icon, clicking "Warnings" instead of "All" and selecting the actual file but none of these seem to display the warnings. Any ideas?

Remove your logging filter (eg http://puu.sh/4XrSx.png) to see errors that are being hidden from console.
Another note is you can make chrome pause a script on an exception in the scripts tabs (eg http://puu.sh/4XrLR.png) by setting the pause on exceptions setting

by ctrl+shift+j => setting => General => cancel the "Disable cache (while DevTools is open)"

Related

How to get rid of [VM] line in Chrome console?

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:

Chrome extension is blocking my Javascript [duplicate]

I have recently started to see a frequent error in Chrome Dev Tools when right clicking on an element for the purposes of selecting "Inspect Element" - instead of selecting the element on the "Elements" tab the error "Uncaught Error: Parameter 2 (message) is required." appears in the "Sources" tab for a virtual "extensions:: schemaUtils" script.
The error occurs in the function "validate" as per the screenshot below.
This error seems to occur since installing the "OneTab" extension, and indeed goes away when I disable it. I have reported it to the extension author, so far without response. Unfortunately as work have seen fit to issue me with an underpowered machine, removing OneTab is not an option as memory otherwise runs in extremely short supply.
The issue is easy to replicate, within Stack Overflow itself click on the "StackExchange" icon top left, and then right click on one of the "Your Communities" items. The context menu does not open and the above error appears. This also affects the pop-out menus on the primary product I am working on.
This error only occurs in a single instance of Chrome, which happens to be my primary developer machine, and does not occur on Chrome Canary on the same computer, and with the same extension installed.
Chrome 37.0.2024.2m on a Windows 7 Professional, Service Pack 1, x64 laptop.
Do I have a corrupted copy of Chrome? Can other users replicate this error (with or without the OneTab extension)? Is there anything short of removing the extension permanently that I can do to restore essential "Inspect Element" functionality?
I have already tried resetting Chrome within the settings menu.
The problem you're experiencing is that a breakpoint is triggered for (uncaught) errors.
To stop this from happening, open the Sources tab of the developer tools, and make sure that the circle with the two stripes in it is GREY, not blue. This circle means "Pause on exception" and is the right-most icon in the next picture.
Just stating more clearly : if you are ok with that, just disable the OneTab Chrome extension.
de-activating and re-activating breakpoints in the devtools solved my issue
The breakpoints icon is in Developer Tools, on the Sources tab, the icon left of the pause button.
I also use OneTab, am on OSX 10.10.5, Google Chrome Version 46.0.2490.71 (64-bit) - other extensions I have installed are LastPass, Xdebug helper, JetBrains, Postman, DevTools Theme: Zero Dark Matrix, Google Docs (and similar)
The breakpoints solution was suggested here https://stackoverflow.com/a/25623760/1875965
You started the validation at i + 1, it should be i.
Change:
var message = "Invalid Argument for " + (i + 1) + ".";
Into:
var message = "Invalid Argument for " + (i) + ".";

Error in Chrome DevTools

I have recently started to see a frequent error in Chrome Dev Tools when right clicking on an element for the purposes of selecting "Inspect Element" - instead of selecting the element on the "Elements" tab the error "Uncaught Error: Parameter 2 (message) is required." appears in the "Sources" tab for a virtual "extensions:: schemaUtils" script.
The error occurs in the function "validate" as per the screenshot below.
This error seems to occur since installing the "OneTab" extension, and indeed goes away when I disable it. I have reported it to the extension author, so far without response. Unfortunately as work have seen fit to issue me with an underpowered machine, removing OneTab is not an option as memory otherwise runs in extremely short supply.
The issue is easy to replicate, within Stack Overflow itself click on the "StackExchange" icon top left, and then right click on one of the "Your Communities" items. The context menu does not open and the above error appears. This also affects the pop-out menus on the primary product I am working on.
This error only occurs in a single instance of Chrome, which happens to be my primary developer machine, and does not occur on Chrome Canary on the same computer, and with the same extension installed.
Chrome 37.0.2024.2m on a Windows 7 Professional, Service Pack 1, x64 laptop.
Do I have a corrupted copy of Chrome? Can other users replicate this error (with or without the OneTab extension)? Is there anything short of removing the extension permanently that I can do to restore essential "Inspect Element" functionality?
I have already tried resetting Chrome within the settings menu.
The problem you're experiencing is that a breakpoint is triggered for (uncaught) errors.
To stop this from happening, open the Sources tab of the developer tools, and make sure that the circle with the two stripes in it is GREY, not blue. This circle means "Pause on exception" and is the right-most icon in the next picture.
Just stating more clearly : if you are ok with that, just disable the OneTab Chrome extension.
de-activating and re-activating breakpoints in the devtools solved my issue
The breakpoints icon is in Developer Tools, on the Sources tab, the icon left of the pause button.
I also use OneTab, am on OSX 10.10.5, Google Chrome Version 46.0.2490.71 (64-bit) - other extensions I have installed are LastPass, Xdebug helper, JetBrains, Postman, DevTools Theme: Zero Dark Matrix, Google Docs (and similar)
The breakpoints solution was suggested here https://stackoverflow.com/a/25623760/1875965
You started the validation at i + 1, it should be i.
Change:
var message = "Invalid Argument for " + (i + 1) + ".";
Into:
var message = "Invalid Argument for " + (i) + ".";

Auto-scrolling Chrome's DevTools console

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!

How to disable chrome extensions JS when debugging in devtools?

When I add mouse event breakpoint, devtools always jump into extension's JS.
Is there any way to point to my mouse event code directly?
The only way to disable the script (e.g. to avoid side-effects) is by disabling the extension (for instance, by using incognito mode if the extension is not enabled in incognito mode).
If you don't mind the scripts to run, but want to ignore extension code, then you can use the script blackboxing feature of Chrome's devtools.
If you never develop extensions and aren't interested in stepping through it, then open the settings menu of the devtools, click on Blackboxing and then the "Blackbox content scripts" checkbox:
If you only want to selectively ignore files, then you can also right-click on the source of the file that you want to ignore, and click on the "Blackbox Script" contextmenu option. To remove the pattern, go to the "Blackboxing" settings panel as shown before.
I think the simplest way is to open an incognito window (Ctrl-Shift-N) (or Cmd-Shift-N for mac) and debug in there, because then there will be no extensions loaded (by default).
I know what you mean by this question: when debugging, and doing something simple like pausing execution, you always find it breaks into one of the extension's codes instead of the current webpage's code.
open developer tools, then go to settings and then click on ignore list, and check the checkbox for add content script to ignore list, then add this to the ignore list: ^chrome-extension://
If you're using Google Chrome (or any Chromium-based browsers), simply run a new browser instance with a fresh user's data directory.
On Linux:
google-chrome --user-data-dir=$(mktemp -d)
This way, all extensions will be disabled without having to manually switch off/on them.
I like to use Profiles for that.
While changing into incognito mode might help you to disable most of the extensions, some of them might be allowed and still run. For example I have DarkReader and Ublock enabled in incognito mode.
My favorite workaround is to use a "Guest" profile or to create a profile that you can use for debugging. I think it is easier than creating a Framework Ignore List inside of devtools.
How to create a profile: https://support.google.com/chrome/answer/2364824
Example: My debugging profile
First off you should probably review the tutorial on how to debug chrome extensions here:
http://code.google.com/chrome/extensions/tut_debugging.html
When in doubt, you can always use the debugger keyword directly in the JavaScript code where you want to launch the debugger from, like so:
element.addEventListener("mouseover", function() {
debugger;
// some JS handler code...
});
Depending on if your JS is in a popup, background page, or in a content script, you will need make sure you launch the dev tools from the right place.
For a popup, you need to right click on the extension icon and "Inspect Popup" and then from the JavaScript console you would need to run location.reload(true)
For a background page, you need to go to the extensions settings page, chrome://settings/extensions, turn on developer mode, expand the extension in question and click the background page link.
The content script should be visible directly from the page it is loaded onto.