This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Debug Javascript
Every now and then i have one jquery object and i am not able to find whats inside it.
I had to try many combinations like see the class name , id and other attributes to see what is that variable and sometime by hiding it.
Is there any proper way of debugging the jquery object to see whats inside it?
Firebug, Internet Explorer Developer Toolbar, Chrome Developer Tools. These are some of the tools for some of the respective browsers.
Some IDES like eclipse let you debug inline.
Also there is a javascript statement : debugger;, which you can use for this purpose .
Using firebug or the chrome developer tools you can debug any javascript object.
You need to add a breakpoint just after the object initialization and then add the object to the watch panel.
Object members are displayed in a tree view.
Related
This question already has answers here:
Console.log is there a way to name sent variables?
(4 answers)
Why can't I get the variable name as a string? I want to create my own 'console.log' function
(3 answers)
Closed 5 years ago.
When I use console.log to debug I typically use a line of code that looks like this.
console.log("totalLength " +totalLength);
My output includes the variable name and its value.
But is there shorthand for this? Or is there maybe a better/faster/more convenient line of code to monitor variables? Thanks so much!
Yes, it's called using the debugger. Printing out variable values is not a good debugging practice.
If you are using Chrome, open up the Developer Tools and go to the Source tab. In the sidebar take a look at "Watch" and add your expressions in it.
You can also just look at source code panel. It will show all the variables' value by default. The "Watch" section allows more flexible expressions.
You can monitor all the variables present in the global scope.
for(var b in window) {
if(window.hasOwnProperty(b)) console.log(b);
}
The window object contains the information about the functions and vars present. You can essentially type window in console and monitor.
The .net framework has the very useful Debugger Display Attribute which allows you to specify how a class or field is displayed in the debugger variable windows.
Is there an equivalent of this (which would work in chrome dev tools), which I can use on my JS objects?
There is Custom Object Formatters but it is in preview only and it seems to be hard to use.
You seems to be better of adding some getter property that you can expand when needed
By the way do you know that for an unexpanded object the five properties that are shown are those that was first assigned to the object?
This question already has answers here:
JavaScript: Is there a way to get Chrome to break on all errors?
(5 answers)
Closed 6 years ago.
I'm trying to implement Metronic admin theme in my app, but when I click on a button, I get Empty string passed to getElementById(). and the buttons don't work.
I'm trying to track down which piece of code triggers this error. How can I find out where the problem is?
write debugger; right before the javascript code that you feel is troublesome. Also keep the inspect tools open (usually F12)
This will create a breakpoint in the code execution with which you can then debug your code and look for errors.
This question already has answers here:
Firebug says "No Javascript on this page", even though JavaScript does exist on the page
(17 answers)
Closed 7 years ago.
Even after i explicitly said that there is a difference in my bug from existing bug some modearators have marked it as duplicate may be i have not explicitly mentioned the difference so i am highlighting here
In my case the error goes away ie., i am able to view the javascipt in the debugger once I restart the Firefox
I know there is a post, which mentions the issue of Firebug not displaying JavaScript with the following error message:
If tags have a "type" attribute, it should equal "text/javascript" or "application/javascript". Also scripts must be parsable (syntactically correct).
But in my case the error goes away once I restart the Firefox.
This has been happening since the last update of Firefox. Earlier versions were not having this problem.
Is there any way to tweek Firefox, so that I don't have to restart Firefox every time to debug my JavaScript?
Note that the browser does not interpret scripts with type="text/x-jsrender" and therefore Firebug (or the built-in DevTools debugger) doesn't display the contents of the <script> tag.
Also note that JsRender templates are not JavaScript, so they cannot be debugged with JavaScript debuggers. It is JsRender that uses the type text/x-jsrender as indicator that it needs to parse the contents within the <script> tag.
You will be able to see the contents of the tags within Firebug's HTML panel, though.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
IE9 equivalent of querySelectorAll
I'm trying to get all elements with the classname "video" in some JS running in IE9. I'm using var videopanels = document.querySelectorAll(".video"); which is working great in Chrome.
Unfortunately I'm getting this error when I watch document.querySelectorAll(".video") in the debugger:
document.querySelectorAll(".video")
Object doesn't support property or method 'querySelectorAll'
Error
However, when I watch document in the debugger (it shows up as a DispHTMLDocument) and open up the [Methods] list, I see
querySelectorAll()
querySelectorAll(v)
IHTMLDOMChildrenCollection
What's going on? How come I can see it in the debugger, but not (apparently) actually call or use it?
Change your doctype to html5 standards.
<!DOCTYPE html>
Also check IE9 isn't operating in compatibility mode as this may cause it to ignore some methods it supports.