This is probably a dumb question, but while debugging JavaScript files with breakpoints in Chrome Dev Tools, I notice that when an error occurs, the message just flashes in red and I have no idea what it is saying. So for example, when I'm stepping through a function and I encounter a line where the function fails, a red error message displays but flashes so quickly that I can't read it. Is there a setting that I can change to fix this? Or an area where it logs my errors?
Here is a picture of the errors I'm talking about: they just flash and disappear.
Thanks!
There is a little checkbox on the console tab called 'Preserve log'. When checked, it will prevent the flashing error problem without having to add additional code to prevent the page reloading.
There should be a small red icon near the top right corner of the developer tools. Click that and it should show you a list of all the errors. Alternatively, just go to the Console section.
Related
For some reason my Google Chrome console has changed to my usual preference and I'm unable to figure out why.
Would anyone know why I can no longer just see my console.logs();?
This is what I'm currently seeing, the only option that will bring up logs is the Verbose option, but of course I am getting an overwhelming amount of messages in the verbose option of console logs.
Even the official documentation shows the console differently:
https://developers.google.com/web/tools/chrome-devtools/console/
From the Developer Tools window, hit your F1 key. That should bring up Settings > Preferences. At the bottom right of that window click the button 'Restore defaults and reload.'
Just go to console in the browser and at the top have gear Icon click on and there at the very bottom you find "Restore defaults and reload" just have a hit on it there you go.
For example, if there is a slideshow moving along, I can see the HTML changing live in Firebug's HTML tab.
The Console tab only shows things that are console.log()-ged to it, or if there is an error. I would like to see confirmation that each line of the Javascript is getting executed - as well as any output/values that are returned/generated as that happens. Like a little cursor on the left going down line by line as it executes - and stopping as soon as error is encountered?
Use breaking points and debugging in console. You can open your script in firebug and choose lines where you can add breakpoints. Then, you can run your script and see in panel on the right a lot of stuff.
When I refresh my page with firebug loaded, it pauses in Firebug with the following screen shown :
What is causing this, as it will not allow me to interact further with my site until I close Firebug? Is there a bug in my code?
Looks like you have a breakpoint set on that line or possibly an error and break on all errors is turned on.
Go to breakpoints tab and remove all the break points and also set break on all errors to off.
I'm trying to debug a JavaScript onFocus event attached to a bunch of text boxes on a page. The bug occurs when selecting a text box and then tabbing to the next text box. I'm trying to debug this by placing a break point in the onFocus event using the Chrome Developer Tools. The problem I'm facing is that when I select a text box and the break point is caught, Chrome Developer Tools steals focus and does not return it, so I can't tab to the next text box. Anyone have an idea for a work around? I guess I can resort to alert statements to print all of the information I need without using Chrome Developer Tools......
Chrome Dev Tools includes a Play/Pause button both in the Inspector and as an overlay to the webpage. Using the overlay prevents focus from landing on the Inspector.
Also, I've found the following type of logging solution to be easier to track than the interval method (thanks to less redundancy and the ability to pick up on changes that occur more rapidly than the interval):
$('*').on('focus blur', function(event) {console.log(event.type + " to:"); console.log(document.activeElement);});
One option for debugging tricky cases is to set an interval to poll the focus in the console.
setInterval(function() {console.log($(':focus')); }, 1000);
Type this in the console (update it to include whatever details you are interested in), hit enter, and then keep the console where you can see it while you do stuff in your UI.
*MDN docs for setInerval()
You are right, Chrome DevTools receive focus and do not restore it when you switch back to the debugged page. Feel free to file a bug at http://new.crbug.com (make sure you start the summary with "DevTools: " so that the bug can be assigned to the appropriate team as quickly as possible.)
On a side note, console.log() is a slightly better alternative to alert() as it allows formatted output.
There's a checkbox in the Rendering tool of Chrome DevTools labelled "Emulate a focused page". This prevents the webpage from getting blur events when you click on DevTools or other windows.
I'm currently moving a website from self hosted onto a CMS system. The current site uses a modal popup script called SqueezeBox.js
I've copied the code across exactly how it looks on the current website, however the modal popup box isn't triggering when I click on a thumbnail image.
Looking at the code in the header I've spotted that the CMS I'm using is also calling a number of other javascript files and I'm wondering if one of them is causing a conflict.
What's the best way to find out if this is the case? I've tried Firefox's plugin Web Developer but can't see anything in the Error Console. However I'm not 100% sure I'm using it correctly. Can anyone else point me in the direction of a simple to use javascript conflict detector?
Cheers
Adam
If you have Google Chrome, open up the Developer Tools and you can go into the 'scripts' tab, open up your javascript files and look for the click handler.. click along the side of the code to set a breakpoint, then when the code reaches that spot (if you click it, for example), it will pause, and then in the Developer Tools you can see what functions are being called where as you step through the code. You can also hover over any variable in the code window to see its value. Very handy! You can then see if it's getting into your plugin at all (you can do this as well by setting a breakpoint inside the plugin at a place like the first line that will always be accessed when its run).
I believe you can do the same thing with Firebug
It's a bit of a different thinking process to get into (step into, step over, turning breakpoints on and off etc) but it's extremely useful.
A more simple way of checking where problems are occuring is by adding an alert('im working); or something similar to code you're not sure if it's working. You can also alert a variable to see what the value is at that point. You can also use console command to print it to firebug's console. These are doing things that breakpoints/debugging do for you except with the debugging you don't need to change your code.
If there is a javascript error, then the easies way is using firebug or the Chrome Inspector (right click on the thumbnail and choose "Inspect element"). Open the console tab of either and refresh the page. If there is an error, it will be reported in the console and provide a link to the relevant line.
If there is no error being reported, then the code's logic is preventing the box from being displayed. You'll need to step through the code to find the error. Look at what function is being called from the click handler of the thumbnail image. Go to that function in either tool and place a breakpoint on the first line of the function. Click the thumbnail again and the code will pause on that line. From there you can step through the code and see which code branch is followed. There's likely a sanity check at some point that fails and causes the code to bomb out.