Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When I find that I have a problematic code snippet, how should I go about debugging it?
Firebug is one of the most popular tools for this purpose.
All modern browsers come with some form of a built-in JavaScript debugging application. The details of these will be covered on the relevant technologies web pages. My personal preference for debugging JavaScript is Firebug in Firefox. I'm not saying Firebug is better than any other; it depends on your personal preference and you should probably test your site in all browsers anyway (my personal first choice is always Firebug).
I'll cover some of the high-level solutions below, using Firebug as an example:
Firefox
Firefox comes with with its own inbuilt JavaScript debugging tool, but I would recommend you install the Firebug add on. This provides several additional features based on the basic version that are handy. I'm going to only talk about Firebug here.
Once Firebug is installed you can access it like below:
Firstly if you right click on any element you can Inspect Element with Firebug:
Clicking this will open up the Firebug pane at the bottom of the browser:
Firebug provides several features but the one we're interested in is the script tab. Clicking the script tab opens this window:
Obviously, to debug you need to click reload:
You can now add breakpoints by clicking the line to the left of the piece of JavaScript code you want to add the breakpoint to:
When your breakpoint is hit, it will look like below:
You can also add watch variables and generally do everything that you would expect in a modern debugging tool.
For more information on the various options offered in Firebug, check out the Firebug FAQ.
Chrome
Chrome also has its own in built JavaScript debugging option, which works in a very similar way, right click, inspect element, etc.. Have a look at Chrome Developer Tools. I generally find the stack traces in Chrome better than Firebug.
Internet Explorer
If you're developing in .NET and using Visual Studio using the web development environment you can debug JavaScript code directly by placing breakpoints, etc. Your JavaScript code looks exactly the same as if you were debugging your C# or VB.NET code.
If you don't have this, Internet Explorer also provides all of the tools shown above. Annoyingly, instead of having the right click inspect element features of Chrome or Firefox, you access the developer tools by pressing F12. This question covers most of the points.
Internet Explorer 8 (Developer Tools - F12). Anything else is second rate in Internet Explorer land
Firefox and Firebug. Hit F12 to display.
Safari (Show Menu Bar, Preferences -> Advanced -> Show Develop menu bar)
Google Chrome JavaScript Console (F12 or (Ctrl + Shift + J)). Mostly the same browser as Safari, but Safari is better IMHO.
Opera (Tools -> Advanced -> Developer Tools)
There is a debugger keyword in JavaScript to debug the JavaScript code. Put debugger; snippet in your JavaScript code. It will automatically start debugging the JavaScript code at that point.
For example:
Suppose this is your test.js file
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();
When the browser runs the web page in developer option with enabled debugger, then it automatically starts debugging from the debugger; point.
There should be opened the developer window the browser.
I use old good printf approach (an ancient technique which will work well in any time).
Look to magic %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
%o dump clickable and deep-browsable, pretty-printed content of JS object. %s was shown just for a record.
And this:
console.log("%s", new Error().stack);
gives you Java-like stack trace to point of new Error() invocation (including path to file and line number!!).
Both %o and new Error().stack available in Chrome and Firefox.
With such powerful tools you make assumption whats going wrong in your JS, put debug output (don't forget wrap in if statement to reduce amount of data) and verify your assumption. Fix issue or make new assumption or put more debug output to bit problem.
Also for stack traces use:
console.trace();
as say Console
Happy hacking!
Start with Firebug and IE Debugger.
Be careful with debuggers in JavaScript though. Every once in a while they will affect the environment just enough to cause some of the errors you are trying to debug.
Examples:
For Internet Explorer, it's generally a gradual slowdown and is some kind of memory leak type deal. After a half hour or so I need to restart. It seems to be fairly regular.
For Firebug, it's probably been more than a year so it may have been an older version. As a result, I don't remember the specifics, but basically the code was not running correctly and after trying to debug it for a while I disabled Firebug and the code worked fine.
Although alert(msg); works in those "I just want to find out whats going on" scenarios... every developer has encountered that case where you end up in a (very large or endless) loop that you can't break out of.
I'd recommend that during development if you want a very in-your-face debug option, use a debug option that lets you break out. (PS Opera, Safari? and Chrome? all have this available in their native dialogs)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}
With the above you can get your self into a large loop of popup debugging, where pressing Enter/Ok lets you jump through each message, but pressing Escape/Cancel lets you break out nicely.
I use WebKit's developer menu/console (Safari 4). It is almost identical to Firebug.
console.log() is the new black -- far better than alert().
My first step is always to validate the HTML and to check syntax with JSLint. If you have clean markup and valid JavaScript code then it is time for Firebug or another debugger.
Visual Studio 2008 has some very good JavaScript debugging tools. You can drop a breakpoint in your client side JavaScript code and step through it using the exact same tools as you would the server side code. There is no need to attach to a process or do anything tricky to enable it.
I use a few tools: Fiddler, Firebug, and Visual Studio. I hear Internet Explorer 8 has a good built-in debugger.
I used to use Firebug, until Internet Explorer 8 came out. I'm not a huge fan of Internet Explorer, but after spending some time with the built-in developer tools, which includes a really nice debugger, it seems pointless to use anything else. I have to tip my hat to Microsoft they did a fantastic job on this tool.
You might also check out YUI Logger. All you have to do to use it is include a couple of tags in your HTML. It is a helpful addition to Firebug, which is more or less a must.
I found the new version of Internet Explorer 8 (press F12) is very good to debug JavaScript code.
Of course, Firebug is good if you use Firefox.
Besides using Visual Studio's JavaScript debugger, I wrote my own simple panel that I include to a page. It's simply like the Immediate window of Visual Studio. I can change my variables' values, call my functions, and see variables' values. It simply evaluates the code written in the text field.
I'm using Venkman, a JavaScript debugger for XUL applications.
In addition to Firebug and browser-native developer extensions JetBrains WebStorm IDE comes with remote debug support for Firefox and Chrome (Extension required) built in.
Also supports:
coffescript: how to debug coffeescript in node.js with webstorm 6 source maps
node.js
Options to test this for free are the 30 trial or using an Early Access Version.
If you are using Visual Studio, just put debugger; above the code you want to debug. During execution the control will pause at that place, and you can debug step by step from there on.
As with most answers, it really depends: What are you trying to achieve with your debugging? Basic development, fixing performance issues? For basic development, all the previous answers are more than adequate.
For performance testing specifically, I recommend Firebug. Being able to profile which methods are the most expensive in terms of time has been invaluable for a number of projects I have worked on. As client-side libraries become more and more robust, and more responsibility is placed client-side in general, this type of debugging and profiling will only become more useful.
Firebug Console API:
http://getfirebug.com/console.html
By pressing F12 web developers can quickly debug JavaScript code without leaving the browser. It is built into every installation of Windows.
In Internet Explorer 11, F12 tools provides debugging tools such as breakpoints, watch and local variable viewing, and a console
for messages and immediate code execution.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When I find that I have a problematic code snippet, how should I go about debugging it?
Firebug is one of the most popular tools for this purpose.
All modern browsers come with some form of a built-in JavaScript debugging application. The details of these will be covered on the relevant technologies web pages. My personal preference for debugging JavaScript is Firebug in Firefox. I'm not saying Firebug is better than any other; it depends on your personal preference and you should probably test your site in all browsers anyway (my personal first choice is always Firebug).
I'll cover some of the high-level solutions below, using Firebug as an example:
Firefox
Firefox comes with with its own inbuilt JavaScript debugging tool, but I would recommend you install the Firebug add on. This provides several additional features based on the basic version that are handy. I'm going to only talk about Firebug here.
Once Firebug is installed you can access it like below:
Firstly if you right click on any element you can Inspect Element with Firebug:
Clicking this will open up the Firebug pane at the bottom of the browser:
Firebug provides several features but the one we're interested in is the script tab. Clicking the script tab opens this window:
Obviously, to debug you need to click reload:
You can now add breakpoints by clicking the line to the left of the piece of JavaScript code you want to add the breakpoint to:
When your breakpoint is hit, it will look like below:
You can also add watch variables and generally do everything that you would expect in a modern debugging tool.
For more information on the various options offered in Firebug, check out the Firebug FAQ.
Chrome
Chrome also has its own in built JavaScript debugging option, which works in a very similar way, right click, inspect element, etc.. Have a look at Chrome Developer Tools. I generally find the stack traces in Chrome better than Firebug.
Internet Explorer
If you're developing in .NET and using Visual Studio using the web development environment you can debug JavaScript code directly by placing breakpoints, etc. Your JavaScript code looks exactly the same as if you were debugging your C# or VB.NET code.
If you don't have this, Internet Explorer also provides all of the tools shown above. Annoyingly, instead of having the right click inspect element features of Chrome or Firefox, you access the developer tools by pressing F12. This question covers most of the points.
Internet Explorer 8 (Developer Tools - F12). Anything else is second rate in Internet Explorer land
Firefox and Firebug. Hit F12 to display.
Safari (Show Menu Bar, Preferences -> Advanced -> Show Develop menu bar)
Google Chrome JavaScript Console (F12 or (Ctrl + Shift + J)). Mostly the same browser as Safari, but Safari is better IMHO.
Opera (Tools -> Advanced -> Developer Tools)
There is a debugger keyword in JavaScript to debug the JavaScript code. Put debugger; snippet in your JavaScript code. It will automatically start debugging the JavaScript code at that point.
For example:
Suppose this is your test.js file
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();
When the browser runs the web page in developer option with enabled debugger, then it automatically starts debugging from the debugger; point.
There should be opened the developer window the browser.
I use old good printf approach (an ancient technique which will work well in any time).
Look to magic %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
%o dump clickable and deep-browsable, pretty-printed content of JS object. %s was shown just for a record.
And this:
console.log("%s", new Error().stack);
gives you Java-like stack trace to point of new Error() invocation (including path to file and line number!!).
Both %o and new Error().stack available in Chrome and Firefox.
With such powerful tools you make assumption whats going wrong in your JS, put debug output (don't forget wrap in if statement to reduce amount of data) and verify your assumption. Fix issue or make new assumption or put more debug output to bit problem.
Also for stack traces use:
console.trace();
as say Console
Happy hacking!
Start with Firebug and IE Debugger.
Be careful with debuggers in JavaScript though. Every once in a while they will affect the environment just enough to cause some of the errors you are trying to debug.
Examples:
For Internet Explorer, it's generally a gradual slowdown and is some kind of memory leak type deal. After a half hour or so I need to restart. It seems to be fairly regular.
For Firebug, it's probably been more than a year so it may have been an older version. As a result, I don't remember the specifics, but basically the code was not running correctly and after trying to debug it for a while I disabled Firebug and the code worked fine.
Although alert(msg); works in those "I just want to find out whats going on" scenarios... every developer has encountered that case where you end up in a (very large or endless) loop that you can't break out of.
I'd recommend that during development if you want a very in-your-face debug option, use a debug option that lets you break out. (PS Opera, Safari? and Chrome? all have this available in their native dialogs)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}
With the above you can get your self into a large loop of popup debugging, where pressing Enter/Ok lets you jump through each message, but pressing Escape/Cancel lets you break out nicely.
I use WebKit's developer menu/console (Safari 4). It is almost identical to Firebug.
console.log() is the new black -- far better than alert().
My first step is always to validate the HTML and to check syntax with JSLint. If you have clean markup and valid JavaScript code then it is time for Firebug or another debugger.
Visual Studio 2008 has some very good JavaScript debugging tools. You can drop a breakpoint in your client side JavaScript code and step through it using the exact same tools as you would the server side code. There is no need to attach to a process or do anything tricky to enable it.
I use a few tools: Fiddler, Firebug, and Visual Studio. I hear Internet Explorer 8 has a good built-in debugger.
I used to use Firebug, until Internet Explorer 8 came out. I'm not a huge fan of Internet Explorer, but after spending some time with the built-in developer tools, which includes a really nice debugger, it seems pointless to use anything else. I have to tip my hat to Microsoft they did a fantastic job on this tool.
You might also check out YUI Logger. All you have to do to use it is include a couple of tags in your HTML. It is a helpful addition to Firebug, which is more or less a must.
I found the new version of Internet Explorer 8 (press F12) is very good to debug JavaScript code.
Of course, Firebug is good if you use Firefox.
Besides using Visual Studio's JavaScript debugger, I wrote my own simple panel that I include to a page. It's simply like the Immediate window of Visual Studio. I can change my variables' values, call my functions, and see variables' values. It simply evaluates the code written in the text field.
I'm using Venkman, a JavaScript debugger for XUL applications.
In addition to Firebug and browser-native developer extensions JetBrains WebStorm IDE comes with remote debug support for Firefox and Chrome (Extension required) built in.
Also supports:
coffescript: how to debug coffeescript in node.js with webstorm 6 source maps
node.js
Options to test this for free are the 30 trial or using an Early Access Version.
If you are using Visual Studio, just put debugger; above the code you want to debug. During execution the control will pause at that place, and you can debug step by step from there on.
As with most answers, it really depends: What are you trying to achieve with your debugging? Basic development, fixing performance issues? For basic development, all the previous answers are more than adequate.
For performance testing specifically, I recommend Firebug. Being able to profile which methods are the most expensive in terms of time has been invaluable for a number of projects I have worked on. As client-side libraries become more and more robust, and more responsibility is placed client-side in general, this type of debugging and profiling will only become more useful.
Firebug Console API:
http://getfirebug.com/console.html
By pressing F12 web developers can quickly debug JavaScript code without leaving the browser. It is built into every installation of Windows.
In Internet Explorer 11, F12 tools provides debugging tools such as breakpoints, watch and local variable viewing, and a console
for messages and immediate code execution.
i have built a HTML5 web site (or rather webapp as you wish) and it works fine in Chrome and firefox. I would say the only thing out of the ordinary is, that it uses
Google Closure in some parts (the issue persists in the simplest, non-optimized mode)
HTML5 canvas for 2D drawing
Now I was curious whether it would run on my Galaxy Tab Tablett and indeed it does. I was able to set up the remote debugging facility https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=de and debug my code to get rid of a few things that were not working properly. However I notice that android-chrome regulary crashes while I use my app. The console in my desktop browser then complains about websocket being closed (thats why I suspect it really is a problem of the tablet side).
I would like to know what makes my website crash and am a bit flubbergusted that my HTML/js site can crash a browser like chrome so easily. I would have thought that it should be more stable than that.
Now as I would like to have an "entry" point into debugging the issue:
is there a crash log of chrome for android that I can inspect somehow?
can I somehow make it (chrome or android in general) more verbose on error messages?
There are a couple of things that you can do:
chrome://crashes will list the crashes that it has caught when a tab crashes - you might need to turn on crash reporting in the settings. You won't be able to fix it but you will be able to report it us so we can see if it is an issue.
Use logcat and see if there are any specific issues in the tracing output, such as an out of error message.
Does Dreamweaver CS 3 have a JavaScript debugger?
The only information on anything close is that it says I need to click on the
'preview/debug in browser' button which does open the page, but no debugging ever happens when the page has an error. I also see no way to set breakpoints or walk through the code.
MS Visual Web Developer (Visual Studio Express - which is free) has a debugger that you can attach to a process. So even if you are not developing in it, you can debug the JavaScript in any browser. It also has a very rich variable watch that allows you to drill down through all the decendants of an object for its respective values. I was hoping that Dreamweaver could at least match Visual Web Developer...
What is the experience using the Visual Studio debugger tools with non-Internet Explorer browsers?
Dreamweaver has no effective built-in debugger.
Firebug works great with non-Internet Explorer browsers
Visual Studio tools work great with ID browsers
What is the one that works well across the board?
Debuggers are specific to a particular interpreter/compiler, not to a language. The same language - in this case, JavaScript - can have more than one interpreter/compiler. In particular, each browser has their own.
So to debug JavaScript in Internet Explorer, you need an Internet Explorer debugger - either the one built into Internet Explorer, or one of the Visual Studio flavours. To debug JavaScript in Chrome, use Chrome's debugger. To debug JavaScript in Firefox, use Firebug. (And so on.)
There is nothing native to Dreamweaver that handles debugging JavaScript, but there are several other options out there for free.
The Firebug add-on for Firefox allows you to set breakpoints and step through JavaScript. Download and play with that, and you should find what you need. Here is a brief tutorial hitting on your points: Debug Javascript with Firebug
I solved most JavaScript problems using the Error Console in FireFox. I never got Dreamweaver's to work.
I agree with CheGueVerra, defenitively the best debugger is the "error console" in Firefox. If you want to make it even better, just download the Firefox Add-on Console². All you need to debug JavaScript code is there.
You can also use Firebug, which is in my opinion the best JavaScript debugger for Firefox even if there are still some issues sometimes (refer to my post a few days ago, Stack Overflow question Firebug debugger not working in Firefox 3.x?).
I assume you're looking for something where you can attach breakpoints and such... Well, without echoing the others (this can be done in Firebug), do try Aptana Studio. It can be run like a plugin on Eclipse and can be used to debug JavaScript.
I use Firebug and the Mozilla JS console heavily, but every now and then I run into an IE-only JavaScript bug, which is really hard to locate (ex: error on line 724, when the source HTML only has 200 lines).
I would love to have a lightweight JS tool (a la firebug) for Internet Explorer, something I can install in seconds on a client's PC if I run into an error and then uninstall. Some Microsoft tools take some serious download and configuration time.
Any ideas?
You might find Firebug Lite useful for that.
Its bookmarklet should be especially useful when debugging on a user's machine.
Since Internet Explorer 8, IE has been shipping with a pretty impressive set of tools for JavaScript debugging, profiling, and more. Like most other browsers, the developer tools are accessible by pressing F12 on your keyboard.
Script Tab
The Script tab is likely what you'll be interested in, though the Console, Profiler, and Network tabs get plenty of use as well while debugging applications.
From the Script tab you can:
Format JavaScript to make it more readable
Move from source to source of various resources on the page
Insert breakpoints
Move in and over lines of code while stepping through its execution
Watch variables
Inspect the call stack to see how code was executed
Toggle breakpoints
and more...
Console Tab
The console tab is great for when you need to execute some arbitrary code against the application. I use this to check the return of certain methods, or even to quickly test solutions for answers on Stack Overflow.
Profiler Tab
The profile is awesome if you're looking for long-running processes, or trying to optimize your code to run smoother or make fewer calls to resource-intensive methods. Open up any page and click "Start profiling" from the Profiler tab to start recording.
While the profiler is working, you can move about the page, performing common actions. When you feel you've recorded enough, hit "Stop profiling." You will then be shown a summary of all functions ran, or a call tree. You can quickly sort this data by various columns:
Network Tab
The network tab will record traffic on your site/application. It's very handy for finding files that aren't being downloaded, hanging, or for tracking data that is being requested asynchronously.
Within this tab you can also move between a Summary view and a Detailed view. Within the Detailed view you can inspect headers sent with requests, and responses. You can view cookie information, check the timing of events, and more.
I'm not really doing the IE Developer Tools justice - there is a lot of uncovered ground. I would encourage you to check them out though, and make them a part of your development.
I would recommend Companion JS.
This is the free version of Debug Bar but I find it easier to use and have the features I need. Great to test little JavaScript snippets in IE the same way I do with Firebug in Firefox.
EDIT 5 years later: I now uses Internet Explorer integrated developer tools.
IE 8 is supposed to have better tools, but the IE Developer Toolbar is pretty good.
I use both Microsoft Script Debugger and FireBug Lite, depending on what I am debugging. Both are great tools- try them both out and stich with what you're comfortable with.
In IE8 just press F12!
Go to Tools->Internet Options…->Advanced->Enable Script Debugging (Internet Explorer)
then attach Visual Studio Debugger when an error occurs.
If you're using IE 8, install the developer toolbar because it has a built in debugger.