Project I'm working on uses jQuery.
I have a series of Ajax calls being made that load() other HTML fragments which in turn load() other fragments. The whole thing is confusing. I didn't write the code.
Is there any tool which will allow me to walk the callstack so I can figure what is calling a method? any browser tools that would help me figure this out?
Resolution:
In the end this was being caused because a <script src="..." was being injected in the server-side code. Your suggestions really helped - it was a combination of those and temporarily setting Ajax to sync instead async that helped me track down the issue.
$.ajaxSetup({
async: false
});
Firebug is capable of this.
When the debugger is paused, Firebug shows you the call stack, which is the set of nested function calls that are currently running and waiting to return.
The call stack is represented as a compact strip of buttons in the toolbar, each with the name of a function on the stack. You can click any button to jump to the line where that function is paused, and look at the local variables inside that function.
Chrome also has a pretty wicked debugger built-in under Developer Tools, no add-ons/extensions needed.
+1 for firebug. you can pause the debugger to walk the call stack
http://getfirebug.com/javascript
You might also want to try Opera's Dragonfly (available in any recent Opera build). I find it less refined than Firebug, but some errors are much more explicit under it.
Related
I am very new to Java script,HTML and CSS and know the basics of it. As I am working for the project I am feeling difficulty to find which java script function(code flow) is being executed,even though using console. So any tips to make it easy or any tool to find which line number being executed. Thank you.
Use
alert("function was called");
or
console.log("function was called");
to track your functions.
Use chrome developer tools, set the break point somewhere in the beginning and then use Step options to jump into/out functions and track it. This url would help you: https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/step-code?hl=en
Yeah, in the beginning it does take time to getting used to console/developer tools.
I would suggest to go through some tutorial of the consoles to get some insight. Here are some of the links-
https://developer.chrome.com/devtools
Most helpful part of these tools is the breakpoint. The function you want to know how it behaves on your website, just find that files in the source section of the dev tools. Place a breakpoint. Whenver the execution reaches the function. The debugger pauses right there and then allows you to see the execution line by line.
https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints?hl=en
This will help you get started.
I want to force the Chrome debugger to break on a line via code, or else using some sort of comment tag such as something like console.break().
You can use debugger; within your code. If the developer console is open, execution will break. It works in firebug as well.
You can also use debug(function), to break when function is called.
Command Line API Reference: debug
Set up a button click listener and call the debugger;
Example
$("#myBtn").click(function() {
debugger;
});
Demo
http://jsfiddle.net/hBCH5/
Resources on debugging in JavaScript
http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/
http://berzniz.com/post/78260747646/5-javascript-debugging-tips-youll-start-using-today
As other have already said, debugger; is the way to go.
I wrote a small script that you can use from the command line in a browser to set and remove breakpoint right before function call:
http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/
debugger is a reserved keyword by EcmaScript and given optional semantics since ES5
As a result, it can be used not only in Chrome, but also Firefox and Node.js via node debug myscript.js.
The standard says:
Syntax
DebuggerStatement :
debugger ;
Semantics
Evaluating the DebuggerStatement production may allow an implementation to cause a breakpoint when run under a debugger. If a debugger is not present or active this statement has no observable effect.
The production DebuggerStatement : debugger ; is evaluated as follows:
If an implementation defined debugging facility is available and enabled, then
Perform an implementation defined debugging action.
Let result be an implementation defined Completion value.
Else
Let result be (normal, empty, empty).
Return result.
No changes in ES6.
On the "Scripts" tab, go to where your code is. At the left of the line number, click. This will set a breakpoint.
Screenshot:
You will then be able to track your breakpoints within the right tab (as shown in the screenshot).
There are many ways to debug JavaScript code. Following two approaches are widely used to debug JavaScript via code
Using console.log() to print out the values in the browser
console. (This will help you understand the values at certain points
of your code)
Debugger keyword. Add debugger; to the locations you want to
debug, and open the browser's developer console and navigate to the
sources tab.
For more tools and ways in which you debug JavaScript Code, are given in this link by W3School.
It is possible and there are many reasons you might want to do this. For example debugging a javascript infinite loop close to the start of the page loading, that stops the chrome developer toolset (or firebug) from loading correctly.
See section 2 of
http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/
or just add a line containing the word debugger to your code at the required test point.
Breakpoint :-
breakpoint will stop executing, and let you examine JavaScript values.
After examining values, you can resume the execution of code (typically with a play button).
Debugger :-
The debugger; stops the execution of JavaScript, and callsthe debugging function.
The debugger statement suspends execution, but it does not close any files or clear any variables.
Example:-
function checkBuggyStuff() {
debugger; // do buggy stuff to examine.
};
You can set debug(functionName) to debug functions as well.
https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function
I wouldn't recommend debugger; if you just want to kill and stop the javascript code, since debugger; will just temporally freeze your javascript code and not stop it permanently.
If you want to properly kill and stop javascript code at your command use the following:
throw new Error("This error message appears because I placed it");
This gist Git pre-commit hook to remove stray debugger statements from your merb project
maybe useful if want to remove debugger breakpoints while commit
I want to backtrack from where the function is called in ExtJS.
Just like in PHP we have debug_trace() which shows the whole chain of methods .
is there something like that available in extjs or javascript
You should be able to set a breakpoint in your browser's dev tools of choice and bring up the call stack.
Search "call stack" in the following articles:
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging
https://developer.mozilla.org/en-US/docs/Tools/Debugger
if you are using chrome, i know there is a console.trace() which you can add in your code while debugging to bring you the trace, i havent used it on any other to know if it exists on otheres
you can also use the debugger keyword to add breakpoints or you can use the debugger function in your dev console
I am working in FireFox and I notice that a exception is thrown in my Firebug console.
The exception is in a jQuery function, but I have no idea who the caller is.
The webpage has a lot of custom javascript files included with many lines of code.
Is there any trick that I can use to find out from where the call came?
I have tried removing some of the included javascript files, but due to the size of the project and how things are connected, it is limited.
I tried placing a "debugger;" attribute in a javascript file and just stepped through the code, but it doesn't seem that I hit the correct place doing this.
One way to find the caller is to put a breakpoint in the jquery line where the exception is thrown. Then you will be able to go through the call stack and see how is the first caller.
But be carefull with firebug, sometime when you put breakpoints, you get a different behaviour if you have multiple asynchronous call. If this is your case, use Chrome debugger to manage this.
I just started doing some Javascript work for a project, I do mostly backend work so I'm sorry for being new at this! Also, not using a Javascript framework because I want to learn about the fundamentals before making everything very easy for myself :)
So, here is my question/confusion: I wrote a little javascript that dynamically changed forms. This is how I called the code:
// loads the initial box
window.onload = initList(environment_box);
// loads artifacts on each change to environment select box
environment_box.onchange = changeList;
This worked like magic - in CHROME that is! I never noticed it wasn't working in Firefox (its just an internal tool, so I can assume decent browsers, but I figure hey, if its working in Chrome, it will work in Firefox!). So, I did some investigation, and it seems as though the code isnt getting executed in Firefox. I whipped out firebug and wanted to see what was going on.
The interesting thing was, when I enabled Console on firebug, my code got executed! I am very confused as to why, and I would much appreciate any help I could get. Thanks!
-Shawn
You are calling some method on console in your JavaScript is my best guess. Chrome has console defined be default, so it is not a problem.
On Firefox, however, there is no such global object (not without Firebug), so when you try to call a property on an undefined object like,
console.log(..);
it throws an exception which you are not catching, so the JavaScript execution halts.
You're probably calling a method of the console object which just doesn't exist by default in most web browsers. It may be always available on webkit based browsers (like Chrome) but with firefox/IE(/opera?) it requires an external add-on, either firebug or a javascript dependency.
Checkout things like firebugx which simply defines the most common methods of a console object as no-op functions.