How can I put break points in an HTML page in javascript functions to see values of variables as lines get executed. What is the easiest way of doing so?
thanks
Use the keyword "debugger;" to attempt invoking a hard breakpoint.
As long as your browser has Javascript Debugging enabled, then the debugger; statement will tell it to do it's thang and you'll be in a step-by-step debugger.
The Firebug extension for Firefox is by far the easiest, but Internet Explorer's new built-in "Developer Tools" option is quite nice too. Firebug I must say is easier and more polished, but I often must validate in a pile of different browsers and in some cases only Internet Explorer like when debugging the interaction of client-side Javascript and a custom ActiveX control.
The "debugger;" statement always seems to be the golden key to quickly get in to a debugger across platforms and browsers without jumping through a bunch of burning hoops.
So you might have some block of Javacscript like the following, and the browser would invoke the line-by-line debugger on "debugger;" like it was a breakpoint...
var a = 5;
var b = 6;
debugger;
a = b;
You should get Firebug.
In Google Chrome browser press 'Ctrl+Shift+i' buttons.
In IE browser:
- Download Microsoft Javascript debugger.
- In browser goto "Tools->Internet Options->Advanced" and remove "V" from "Disable script debugger" check-box.
Enjoy.
alert(variable);
This is what I do, it pretty much works exactly like a breakpoint. When you press 'OK' the script continues.
Related
I'm trying to reverse engineer a malicious JavaScript. When I initially load the side, JS code is injected that includes the -debugger- statement and injects breakpoints into my chrome developer console.
Reading through stackoverflow
Deactivate all breakpoints does not help -> script freezes
Continue debugger afterwards does not help -> script freezes
Mark the script as blackbox does not help -> script already frozen. Reload doesn't work.
Do you have any ideas how I could analyze / debug the script?
Actually I'm not even able to use the Console from the chrome developer tools because everything freezes.
Chrome Developer Console
you probably found the option to right-click the line next to the debugger statement and select "Never pause here".
however if blackboxing does not work for you - the above won't work either.
you can use blackbox with a regex pattern, if applicable.
it probably won't work either because malicious codes often use window.eval. in that case you override the window.eval yourself. for example
window.eval=x=>console.log(x);
visit chrome://version/
check v8 version
building v8 from source
edit src/ast/ast.h
class DebuggerStatement final : public Statement {
private:
friend class AstNodeFactory;
friend Zone;
-- explicit DebuggerStatement(int pos) : Statement(pos, kDebuggerStatement) {}
++ explicit DebuggerStatement(int pos) : Statement(pos, kEmptyStatement) {}
};
building v8 again
diff out.gn/x64.release/d8
patch chromium binary
I made a function called test() in javascript file.Placed a simple alert into it.
In html file, called the method on click of a button. But,it was not being invoked.
Problem was in the 11th function, nowhere related to mine !!!! But, how can a person making his first javascript function suppose to find that out ???
I am looking for best ways to debug javascript.
You can debug javascript using many modern browsers. See this question for details on how to debug in Google Chrome:
How do you launch the JavaScript debugger in Google Chrome?
Furthermore, you shouldn't use alert() for debugging as this can give different results to a production version due to alert() causing a pause in the script.
It is best practice to use console.log() and view the output in the browsers Console.
You can also put debugger in your javascript code to force a breakpoint. However I prefer not to use this as forgetting to remove this before deployment will cause your script to pause, which can be quite embarrassing!
You should use the debug console provided by the browser.
Chrome has it inbuilt, press CTRL + SHIFT + j. In Firefox, install Firebug plugin.
In your code, add alert() to show flow and get values of variables.
Also, use console.log() which will only output to the debug console.
Depending on your browser choice there are debugging options - I tend to use Firefox, so Firebug in my case. There is a question that list options for other browsers - What is console.log and how do I use it?
Unless the project you're working on has already adopted a mechanism for debugging, console.log() tends to be a simple and useful option when tracking down a problem.
Whilst debugging you could take the approach to log out a line when entering a function, like so:
var myFunc = function(el) {
console.log('Inside myFunc');
// Existing code
};
This will enable you to see which functions have been called and give you a rough idea of the order of execution.
You can also use console.log() to show the contents of variables - console.log(el);
Be mindful to remove/disable console.log() calls once you're done as it will likely cause some issues in production.
To answer your question within question,
how can a person making his first javascript function suppose to find that out ???
Well, when something is wrong in JavaScript, for example, you made a syntax error - the script will stop working from there. However, this won't stop HTML from rendering on, so it might look as if everything is correct (especially if your JS is not changing the look of the page) but all the functionality of JS will be dead.
That's why we use the debug tools (listed in the other answers here) to see what's wrong, and in cases like this, it's very easy to notice which function has errors and is causing the whole script to break. This would probably have save a few minutes to your seniors as well.
The best approach would be to test frequently so that whenever you run into errors, you can fix them right away.
Both firebug and the built in console in webkit browsers make it possible to set breakpoints in running Javascript code, so you can debug it as you would with any other language.
What I'm wondering is if there is any way that I can instruct firebug or webkit that I'd like to set a breakpoint on line X in file Y at runtime, and to be able to examine variables in the specific scope that I have paused in.
I need something that can work in both Chrome (or any other webkit browser) and Firefox. For the latter Firebug is an acceptable dependency. Supporting IE is not a requirement.
I've been building an in-browser IDE ( quick video for the interested: http://www.youtube.com/watch?v=c5lGwqi8L_g ) and want to give it a bit more meat.
One thing I did try was just adding debugger; as an extra line where users set them, but this isn't really an ideal solution.
I'd say you can definitely do this for webkit browsers using the remote debugging protocol. This is based on a websocket connection and a json message protocol that goes back and forth.
You can read the announcement and the whole protocol schema.
Chrome also offers more information about this inside its remote developer-tools docs.
For the debugger domain, for instance, you can see how you can use Debugger.setBreakpoint, Debugger.setBreakpointByUrl and Debugger.setBreakpointsActive to work with breakpoints.
On the other hand, Mozilla also seems to be working on this as you can see in https://developer.mozilla.org/en-US/docs/Tools/Debugger-API and https://wiki.mozilla.org/Remote_Debugging_Protocol though I don't know the completion status of it.
In this case, you can work with breakpoints using the Debugger.Script APIs setBreakPoint, getBreakPoint, getBreakpoints, clearBreakpoints and clearAllBreakpoints
I hope this helps you move forward.
There isn't such a thing, at least not using the public, scriptable side of JavaScript. It would be possible if you have a privileged browser extension that could do that for you. For example, Firebug has a debug method which you can call from its command line, but not from scripts inside a page.
So, you have two solutions:
Implement your own JavaScript interpreter, which you can control as you wish. Might be a bit too ambitious, though...
Rely on a browser extension that can set breakpoints anywhere in the code, expose some API to public code, and interact with it from your JavaScript. But that means that users will have to install some extra piece of software before they can use your "Web IDE".
Use _defineSetter__ to watch variables, and combine it with a call to debugger when an assignment happens.
__defineSetter__("name", function() { debugger; });
or defineProperty:
function setter () { debugger; }
Object.defineProperty(Math, 'name', { set: setter });
References
MDN: Object.defineProperty
A List Apart: Advanced Debugging With JavaScript
JavaScript Getters and Setters
I get an element by id, and I would like to know all attributes of the object.
I've using alerts for all this kind of stuff, is that the way its done in javascript? In AS3 or whatever, I would place a break point, and investigate the object in the variables panel.
Second, if that is the way its done, how can I show ALL attributes, if I don't know what they are in advance, and show them in alert boxes? Using jquery 1.5. Thanks
If by "attributes", you mean the "properties" of the DOM node, then use...
console.dir(element);
...in Chrome's developer tools, or Firebug for Firefox.
This will allow you to expand the Object and fully inspect all of its properties, including the .attributes property.
Debugging with alerts will slowly drain your soul out through your nose. Luckily, there is a better way.
The Javascript console in a modern browser (like Chrome or Safari, or with the Firefox extension Firebug) is awesome.
You can also set breakpoints in the script tab, or from the code via the debugger statement. You can inspect globals and local variables in the scripts tab as well. It's seriously awesome.
Checkout the chrome dev tools videos for way more awesome: http://code.google.com/chrome/devtools/docs/videos.html
You have a few options:
console.log(domElement);
That'll let you log statements and view the item as it exists after your script runs. Note though that Firebug treats the object as live, so changes to the object reflect in your log statement (you'll see the actual object in your log, not just a bunch of strings) at least, it did the last time I used it).
debugger;
That'll let you pause execution and analyze your object via watch window in Firebug or Chrome dev tools, or even in IE9's developer tools.
When a javascript error occures in IE (or in other browsers) you get a popup saying that javascript error has occurred - usually this comes with a line number and some hint.
Sometimes it comes with line 0 and with no way of knowing what the problem is.
Javscript can come from HTML itself, from a js file or from JSP (and more).
Microsoft has a script debugger that helps a lot in finding where js errors are, however sometimes when a js error occurs the script debugger cannot find the code portion and thus its difficult of finding where is the root cause of the problem.
My question is whether anyone knows any way of making script debugger find the code any way (mostly happen with js code that is in JSP file), or at least include in the IE popup the method or js file where the error has occurred. (it only display the line number, and many times its line 0...).
Thanks,
Tal.
The error object which is created when an error is thrown by JavaScript is very unreliable when it comes to the source line, especially within IE. Browsers like Firefox and Safari are better at line numbers, but they are generally pointless due to minification of the files.
What is obviously of more use is getting the call stack, but due to the anonymous nature of JavaScript functions (well, that they can be anonymous) a call stack can often be hard to work out.
If you're doing a try/ catch you can do arguments.callee which will return you the method which called the current method which failed.
Here's a good example of doing a complete stack in JavaScript - http://eriwen.com/javascript/js-stack-trace/
Also developer tools included with Internet Explorer 8 is something good to trace and debug your javascript code
There is a version of Firebug called Firebug Lite that will work with Internet Explorer. It's performance is going to be based on how complex your pages are; however, for relatively lightweight pages, it should provide some insight.
I recommend this tool rather than simply using Firebug and Firefox because not all errors that occur in Internet Explorer will occur in Firefox, and so performing any debugging in that browser may not yield any results.
Firebug on Firefox is usually considered one of the best debugging tools.
On Firefox, go to
http://getfirebug.com
to get it.
This will print you a stack trace:
function Stack()
{
try
{
throw Error()
}
catch(ex)
{
return ex.stack
}
};
print( Stack() );
If all else fails (and when dealing with IE it sometimes does) you can always walk through your code with alerts. It's crude and tedious, but sometimes it's all you can do:
Simply:
var count = 0;
then sprinkle some:
alert(count++);
at strategic lines along your code and note where it stops alerting.
Lather rinse repeat until you have your line.
If using Firefox you can press Ctrl + Shift + J to bring up the JavaScript error console that is built into Firefox, which will tell you exactly what went wrong.