I'll be working on a page and the firebug icon will have a red circle with an error count in it. If I click it, nothing happens. How do you see what the errors are? On the firebug website it tells you to click the icon.
Thanks!
Click on Firebug Icon, top right, under X button, go to "Console" tab first, check if there are any errors (red lines), go to "Net" tab next, check again for errors (404). You might have a image missing on the website or some external css/js file that dosen't exist or you have a javascript error.
Most common causes are 404 errors or javascript errors.
Related
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 following this tutorial on how to use DevTools to insert breakpoints. I've opened the example page and have added a breakpoint on the click event, as in part 2 of the tutorial.
However, when I click the button, DevTools does not highlight function onClick() { in the get-started.js file, as the tutorial says it will. Instead, it highlights a minified function in a minified file (end.min.js):
Why is this happening? And how can I fix it? I would like to follow the tutorial, but it's pretty difficult with the breakpoint being added to the minified file.
I am not sure where end.min.js is even coming from: the Network tab doesn't show it being loaded. I'm not sure if it's related, but when I try to view the source of the page, Chrome shows the "loading" icon forever.
Is Chrome doing something clever with
It seems like an extension (I'd say a password manager) is adding event listeners too, and your breakpoint first catches this listener.
You can either test with the extension disabled (you may need to refresh the page), or just press "Resume" to go to the next listener.
Are you sure you're following the tutorial? I have followed this:
DevTools lets you pause your code in the middle of its execution, and
examine the values of all variables at that moment in time. The tool
for pausing your code is called a breakpoint. Try it now:
Go back to the demo and open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).
Click the Sources tab.
Click Event Listener Breakpoints to expand the section. DevTools
reveals a list of expandable event categories, such as Animation and
Clipboard.
Next to the Mouse event category, click Expand
Check the
click checkbox.
And the expected error shows:
Also you have to activate pause on caught exceptions, and seeing the image that you have provided it seems like you don't have that activated.
But I see if you open DevTools when you reload the page, another error pops up, maybe if you close DevTools, reload the page and try again?
There are strange errors in twig files. First of all there is a dark green background, the other problem is "statement expected".
I tried to "Invalidate cache" but it does not help.
the only thing that helps is just to put "Power Save Mode" that totally disable code analyse.
screenshot http://i.imgur.com/FMQ336i.jpg
There are injected language fragments. Point mouse there, press Alt+Enter and select Un-inject language/reference.
I have a rogue blank <div> getting inserted from somewhere in my code, and it is difficult to find when it is coming in. I am using debugger; and stepping through the code, however, the step function is in the 'Sources' tab of chrome dev tools, and the 'Elements' tab has the view I need. I have two screens, and have the dev tools on one screen and the page on the other, but I need to see when the div is coming through on the HTML as I step through the code, and it is quite cumbersome to switch tabs after each click.
Is there any way to accomplish this view to troubleshoot faster (maybe a second instance of dev tools? or split the tabs?), or another suggestion? Since I don't know how it is getting generated, I can't color the div and just look for the color to come on screen...
It is still not possible to display the elements and source tabs at the same time on chrome dev tools. (Latest Chrome version: v64).
If some element is inserted to your DOM and you want to find code responsible for adding it then I suggest using more appropriate tool than debugger;. Check out "subtree modifications":
You can now right click the view tab and select "Move to bottom" so you can see both element and sources at the
Now its possible to view the element and page source in the same page.
Follow the steps below:
Open debugger or Ctrl+Shift+C
From Right corner press the "customize and control Dev tools" icon, under those option click show console drawer:
Now from the left bottom, click on the quick source option as shown in picture:
All the js files opened in sources will be seen here:
I don't know what I've switched on (by accident) but every time I have the Inspect Element area open and then try to click anything on the webpage not within the Inspect Element area (especially something jQuery related like a slideshow for example) it greys the page, shows a message saying 'Paused in debugger' and then opens a jQuery file within the Sources section of Inspect Element.
Within the 'Call Stack' area, it shows a message saying 'Paused on a "click" Event Listener'.
I don't remember switching this feature on but I'm keen for it to be switched off.
I know this question has been asked before - I thought I'd found the answer when everyone suggested we look to see if the 'Pause' option is switched on (blue). However, it's not switched on, it's grey not blue or any other colour and when I hover over it, it says "Don't pause on exceptions. Click to Pause on all exceptions".
You might also check the Source tab, check under the Event Listener Breakpoints panel if you've set any breakpoints under 'Mouse'.
This can also cause the issue
Break Point icon at top left should be blue like this(For Deactivate BreakPoints)
Should not grey like this
Found solution here, if the little octagonal stop/pause sign (at lower left of Chrome "Sources") is colored (blue or purple), you need to click on it until it's black again.
It did drive me nuts for a short while.....scroll all the way to the bottom of breakpoint window and you'll find XHR Breakpoints & under it there is the Any XHR checkbox...
Goto the sources tab and check all breakpoints.
Go to Elements tab and remove all breakpoints from right pane under DOM Breakpoints
One possible cause, it that you've enabled the "pause on exceptions" (the little stop-sign shaped icon with the pause (||) symbol with in in the lower left of the window). Try clicking that back to the off/grey state (not red nor blue states) and reload the page.
For me, I resolved it by temporarily disabling the Chrome Bitwarden extension.
You could check to see in the Sources tab in the devtools panel to see what is causing this error, it could be an extension.
To open the devtools panel on Chrome, press the F12 key.
For Visual Studio Users, just go Tools>Options>Debugging and make disabled it