i want track error in my javascript code.Some times javascript automatically executes and hangs my browser i want to track which part of javascript is executing automatically and hangs ....
For tracking errors using console.log
Or use an alert as your first line of code with the variable's inside it and this should help,
I would recommend console.log as alerts become annoying, Console log also makes it easier to view variables, objects and arrays. I personally use chrome you should try it :)
This might also help Console log question
Related
I want to debug a website that is built from millions of lines of js code, and I want to find the function that will receive a specific value as one of the arguments. Is it possible to break the execution when any function receive a specific value as one of the arguments?
You could add a conditional breakpoint in
Chrome's debugger
Firefox' debugger
Alternatively, if the browser of your choice does not have similar functionality, you could invoke the debugger statement conditionally (if you can modify the code):
if(value === "wanted") debugger;
however that only works if you know the functions that might receive a specific parameter
Is it possible to break the execution when any function receive a specific value as one of the arguments?
No, that's close to impossible. Adding a breakpoint to "any function" will probably slow down execution a lot, if it's even possible. Doing so programmatically might work somehow, though it seems like a lot of work for little benefit. If you know the value, you probably also know the source and can debug from there.
I have a fairly substantial application which i have been developing for a while and i have been able to debug things just fine.
However...
Yesterday i was trying to debug a specific piece of code which seems to break the dev-tools in chrome.
This specific piece of code is the onmessage-callback of a webworker. (Which, as i said, i have been able to debug before)
I have a switch-statement inside to determine which code to execute based on a message in the payload and the debugger only breaks for a specific message.
Any breakpoints i place outside of the callback work just fine but the ones inside (Even before the switch-statement is executed) result in halted code execution with most of the relevant tools disabled.
I have no call-stack, no scope overview, no variable contents when hovering over an identifier.
The breakpoint which got hit is shown under the breakpoint-pane highlighted but in the code window the blue highlight indicating which row of code is about to be executed is missing.
I seem to be able to add watches but that's about it except for resuming execution or single-stepping. (Allthough without seeing which row is about to be executed)
I have tried with chromium as well and some different versions of it but i always get the same result.
My intuition told me that my payload is too big and the debugger breaks because it can't allocate enough memory for the tools but the payload is small compared to payloads i have debugged before.
My question is, what could cause the debugger to break like this?
(Sorry for the lack of example code, there is just too much code required to reconstruct the scenario)
This problem is honestly the strangest thing I have encountered. I have no idea whether or not it's able to be reproduced, so I'm just asking for some input on possible causes.
The code is accessing a property (transit) on an object inside a lodash 'each' loop. The object is called step.
The code throws an exception when it tries to access a property on transit, on step (step.transit.propName). It says 'transit' is undefined.
But when you type 'step.transit' into the console, somehow the debugging tools are able to access it!
The code, and the V8 inspector tools, somehow aren't looking at the same thing. What on earth is happening here?
You'll have to look at the screenshot there to really grasp what's going on. Notice how the watch expressions show step['transit'] being both available, and unavailable at the same time....
It's strange, when I stop the code at that line, and type 'step.transit' into the console, I get the appropriate object. But there's some crazy thing in the code, where it can't seem to execute it.
This is an AngularJS app. Is there any way I could have screwed this data up in order to cause this weird error?
I'm trying to debug a bunch of functions that redirect the user. I want to "kill" the script while it's running to to read the output of console.log(). I can't just use a simple return because there are many functions that work together.
Set a breakpoint at the spot in your code where you want to pause. If you add a debugger statement in your code browsers that support it will automatically stop at that point and open the debugger (actually I think some browsers (Chrome?) may ignore the statement unless you already have the console/dev tools open, but obviously you can just start with the dev tools open if necessary).
There are a few options, not all of them applicable to your case:
Throw an exception; that will stop the function and any caller function as well;
Use an alert(), as ismaelga suggested;
Set a breakpoint, as nnnnnn suggested; you can either use the debugger keyword or use your browser´s GUI if present;
Redefine console.log to an empty function; this way nothing will be logged from then on, so you can read what was logged so far without interference.
Some situations where the options will not be possible:
If your code is responding to events, or using things like setInterval, even if the "main loop" stops other code can still run and log stuff;
The alert window may make difficult to see the log, depending on how obtrusive it is for your browser;
There's no suitable debugger, or you can't install one;
Some functions have stored a local copy of console.log, so redefining it won't affect them.
Of all option, I'd sugest the 4th, since you can read your logs calmly without "breaking" the page. If you want to "filter" the logs, you can also have some functions call the "correct" log (a saved copy of console.log), while the rest calling the "fake" one (the one you redefined).
Declare a global variable that is outside of any function, and add code within each function or long-running loop that checks the value of that variable and only proceeds if the value is set a certain way. This way the variable serves as a semaphore and you can change its value from anywhere and terminate all processing in accordance with its value.
For example, a simple Boolean variable called stopProcessing that is initialized as false but can be set to true to let all functions know to return and all loops to break ASAP.
Ok so I hope this is a question that isn't to basic for you guys.
I know enough jQuery to get myself into trouble, meaning I can grab elements and do stuff with it, write my own little functions for interactivity and such. But then something doesn't go as expected, before I post questions to stackoverflow and get answers that make me slap myself in the forehead I would like to debug it myself and am sick of inserting alert(); into my code. In reading up on the subject there is mention of console.log();, console.info(); and the such but I can not find any resource that explains how to use these in real world scenarios for debugging.
Do any of you know of a good resource or tutorial (not afraid to read a book) that can explain how to use these functions for the layman. It seems that the tutorials and such I am finding are either way to advanced or just skim the surface and don't show you how to use them. I understand I can insert console.log(); and it will spit out information in the console for firebug or element inspector. But what if my hand baked function is doing something unexpected somewhere up the line, how do I find the problem as the browser parses the javascript.
Any help would be greatly appreciated as I feel learning this will help me understand what is going on in my code, so I can stop staring at the screen going “Why isn't this working, it worked in the jsfiddle!”
console.log() just takes whatever you pass to it and writes it to a console's log window. If you pass in an array, you'll be able to inspect the array's contents. Pass in an object, you can examine the object's attributes/methods. pass in a string, it'll log the string. Basically it's "document.write" but can intelligently take apart its arguments and write them out elsewhere.
It's useful to outputting occasional debugging information, but not particularly useful if you have a massive amount of debugging output.
To watch as a script's executing, you'd use a debugger instead, which allows you step through the code line-by-line. console.log's used when you need to display what some variable's contents were for later inspection, but do not want to interrupt execution.
Learn to use a javascript debugger. Venkman (for Firefox) or the Web Inspector (part of Chome & Safari) are excellent tools for debugging what's going on.
You can set breakpoints and interrogate the state of the machine as you're interacting with your script; step through parts of your code to make sure everything is working as planned, etc.
Here is an excellent write up from WebMonkey on JavaScript Debugging for Beginners. It's a great place to start.
I like to add these functions in the head.
window.log=function(){if(this.console){console.log(Array.prototype.slice.call(arguments));}};
jQuery.fn.log=function (msg){console.log("%s: %o", msg,this);return this;};
Now log won't break IE
I can enable it or disable it in one place
I can log inline
$(".classname").log(); //show an array of all elements with classname class
Essentially console.log() allows you to output variables in your javascript debugger of choice instead of flashing an alert() every time you want to inspect something... additionally, for more complex objects it will give you a tree view to inspect the object further instead of having to convert elements to strings like an alert().
Breakpoints and especially conditional breakpoints are your friends.
Also you can write small assert like function which will check values and throw exceptions if needed in debug version of site (some variable is set to true or url has some parameter)