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
Related
I'm trying to follow this tutorial:
https://www.youtube.com/watch?v=2zmUSoVMyRU
And at the beginning he is typing in commands in the console such as
$('a')
which appears to be returning all the a tags in the dom.
When I do this on my website, I get
TypeError: $ is not a function(…)
I also get this when running console.log as a command
function Function() { [native code] }
Im wondering is there something I have missed completely with dev tools, or is it that there might be some problem with my website overwriting the console.log function (i use wordpress)?
There is also a comment at the bottom where a user is having a similar problem (undefined errors), but it doesnt seem they resolve it.
Use like this.It can show you all the a tags in the dom
$$('a')
A quick alternative on chrome dev tools is just to use:
$$('a')
Just to add an explanation: $('a') is using the jquery library which is a piece of JS you have to include in you site. So it will only work on dev tools if the website has jquery included. In your case it doesn't work because of that.
$$ is something built in on chrome dev tools and it will always work, no mater if jquery is included in your website or not.
About console.log you can't just type 'console.log', you have to use it like this: console.log('log my message');
So it needs to be a function call where you pass a string argument that you want to get printed out on chrome dev tools console
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
Very often I hack and play with the JavaScript code on some website. Many times JavaScript code is secured in a function:
(function(){
var = ...
...
}());
and I cannot access the object defined in that scope.
Moreover such code is only executed once, when the page loads, thus modifying it with the chromium/google-chrome developer console (Sources toool) is useless.
Is there any simple way to live-edit some JavaScript code in a page and reload the page so that it runs the modified code?
Have a look at using something like Tampermonkey https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
the Chrome equivalent of Firefox's Greasemonkey
EDIT: you could use this in combination with adblock to disable the loading of the script you are targeting: https://stackoverflow.com/questions/13919183/how-to-turn-off-one-javascript-or-disable-it-under-chrome
I wouldn't call it simple, but something like Intercept Proxy might be able to do it -- replacing one file with another.
I found a way to achieve what I needed.
Using Chromium's debugger I can set a breakpoint on any statement of the source code.
Once that statement is executed, the code suspends and Chromium's console gives me access to whatever is in the stack of the current function.
I'd like to set a breakpoint in a "Cart.add" function in the Chrome or Safari JavaScript debuggers. Problem is, this function is defined in a large minified JS file, and doesn't exist on a line by itself.
Some documentation says that the WebKit-based debuggers support "break" or "debug" commands in the debug console, but those don't seem to work in newer versions of the debugger.
Setting a breakpoint on that line of the JS file doesn't work either, since there are lots of functions on that line.
Any suggestions?
In Chrome when you open Scripts tab you can prettify selected file by clicking on { } button ("Pretty print") at the bottom. After that you can find your line and set a breakpoint. The code will remain prettified with breakpoints in place after a page refresh.
The debugger statement is probably what you're looking for.
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
a. Perform an implementation defined debugging action.
b. Let result be an implementation defined Completion value.
Else
a. Let result be (normal, empty, empty).
Return result.
The break statement is for exiting loops and switch statements and has nothing to do with debugging.
The real solution though is to not bugger your code in the first place :)
1) The error message should give you a link to the source code in the
Sources tab. Click on that link to get taken to the transpiled code.
2) Click the "{ }" icon at the bottom of the source code in the
Sources tab to format the transpiled code for easier debugging.
3)Stick a breakpoint at the line that is failing.
4) Reproduce the
problem again. This time, it should break at the breakpoint before
the error occurs.
5) Examine the local variables and call stack to
determine what exactly is going wrong.
For chrome users, you'll want to enable automatic pretty print in the experimental features.
setting your breakpoint should work now.
If you have saved the webpage then beautify your js file using jsbeautifier.org which formats your entire script. Then replace your js content with the beautified version. From here you can debug your JS easily
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.