I come from a traditional programming background, meaning that I can put a breakpoint on a section of code, and when that code is executed, the debugger throws me into the code.
When developing these web apps, it seems that the only debugging one can do is "printf" debugging and using a tool like FireFox Developer to inspect web elements.
How do I run the code so that it drops me into a debugger?Right now I am using a text editor, but not real GUI development environment.
Any pointers would be appreciated.
You can absolutely set breakpoints in your JavaScript code. You need to graduate from a text editor to an actual IDE like Webstorm which will allow you to set breakpoints for your server-side NodeJS code easily.
For your client-side Express code most IDEs have some sort of browser integration that lets you set JavaScript breakpoints, but I tend to just use the browser's built-in developer tools. Look up Firefox or Chrome developer tools and learn how to use them to do things like setting breakpoints in your code. You mentioned using Firefox developer tools to inspect elements, but you seem to have missed the Debugger tab in the Developer Tools window.
Related
I run an after-school coding club for kids who are learning to build their own projects using HTML, CSS, and Javasccript. We are using a browser-based IDE called theia.
A large number of those kids are using school-issued Chromebooks, which unfortunately have developer tools disabled. This is enforced at the district level and is not something they are willing to change (apparently it allows students to cheat on certain testing sites). Being on Chromebooks means students also cannot launch Chrome with --remote-debugging-port.
I'm looking for potential alternatives that will allow students to do any of the following:
Inspect element to see:
underlying DOM element
applied CSS rules
box model properties
View javascript console error messages and stack trace
Interact with the console as a REPL (with access to window scope)
Debug scripts with step-in, step-out, step-over, etc.
I have full control over the IDE and can build extensions on top of it, so I'm hoping to find something I can integrate.
I found a cool proof-of-concept javascript step debugger, but it's not actively developed, and is only intended for use with small example scripts. It works by compiling the js code into something that can be controlled with a state machine. Does anyone know of anything else that's similar?
I'm also wondering if there's a possible way to plug into a headless instance of chrome running on the IDE server (which is running in a docker container), but I'm not sure what that would involve.
I experienced that the Pry introspection gem https://github.com/pry/pry for Ruby makes the program develompent easier a lot: one can stop the program at a given point with the statement "binding.pry", it gives a console, where I can introspect the values of the variables, which are existing that point. Would be so helpfil such a tool for JavaScript too, in the browser. To debug the programs, as it is so easy to make mistakes, which are then barely recognizable.
If you've been developing without such a tool thus far I commend you-- that sounds painful. In chrome, F12 or Menu > More Tools > Developer Tools will open the Chrome Dev Tools. There is a fully featured debugger in which you can set breakpoints, or you can simply put a debugger statement directly in your code to have it pause. These tools are robust, mature, and built into every modern browser (although note that different browsers will have different ways in which to access them). The Console tool acts as more of a REPL, if that's what you desire; plus, it gets the environment of the current scope in which the debugger is paused, so you can use it to inspect variables, etc. Good luck!
could any one tell me how to use the Developer Tools in IE 7?I am using the .Net programming language .Wanna to debug the javascript and jquery.
Add
debugger;
to the script where you want to debug. It will also prompt the Visual Studio to handle from there if it is installed
example
<script type="text/javascript">
debugger;
alert("Hello World");
</script>
For debugging script in IE8 developer tool bar
http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx#dbugjscript
For IE7 sepecif JavaScript debugging you can also refer to this answer
Debugging JavaScript in IE7
When debugging within the browser, it really doesn't matter what kind of server-side language or frameworks you are using (java, .net, php, whatever) all you are really debugging is the javascript on the pages, and javascript is javascript no matter where it came from.
IMO you are MUCH better off if you use chrome's developer mode (activate by right clicking and choosing inspect for instance) or the firefox-plugin called firebug for debugging javascript, but sometimes you get bugs which are only present on IE, in which case you need to check them out using tools for IE,
AFAIK there is no built-in tool for IE7, but here are some tools which work with IE7 to make debugging easier: http://www.ehow.com/list_7148039_developer-tools-ie7.html
If you want to debug your JS code using IE(x) native developer tools you first have to (as sreddhar said) put a "debugger" inside of it.
Then, you obv have to open the dev tools (F12), and under the tab "Script" just press "Start Debugging". It refreshes your page and whenever it finds "debugger" inside your code it stops in that particular point, then you can decide to put some breakpoints, view the call stack, watch and evaluate variables and so on...
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.
How can I debug JavaScript in Eclipse. I am using Eclipse 3.2.1. Everytime I click on the side it gives the option for adding bookmark but no break point.
Could anyone assist me on this?
In 2015, there are at least six choices for JavaScript debugging in Eclipse:
New since Eclipse 3.7: JavaScript Development Tools debugging support. The incubation part lists CrossFire support. That means, one can use Firefox + Firebug as page viewer without any Java code changes.
New since October 2012: VJET JavaScript IDE
Ajax Tools Framework
Aptana provides JavaScript debugging capabilities.
The commercial MyEclipse IDE also has JavaScript debugging support
From the same stable as MyEclipse, the Webclipse plug-in has the same JavaScript debugging technology.
Adding to the above, here are a couple of videos which focus on "debugging JavaScript using eclipse"
Debugging JavaScript using Eclipse and Chrome Tools
Debugging JavaScript using Eclipse and CrossFire (with FB)
Outdated
The Google Chrome Developer Tools for Java allow debugging using Chrome.
I don't believe Eclipse has a JavaScript debugger - those breakpoints are for Java code (I'm guessing you are editing a JSP file?)
Use Firebug to debug Javascript code, it's an excellent add-on that all web developers should have in their toolbox.
I'm not a 100% sure but I think Aptana let's you do that.
I tried to get aptana running on my ubuntu 10.4. Unfortunately I didn't succeed. Chrome on the other hand, has an eclipse plugin that lets you debug javascript that's running in a chrome instance. Works very well.
YOu'll have to install the eclipse plugin you'll find here:
http://code.google.com/p/chromedevtools/
Set Breakpoints in the javascript sources you edit in eclipse and browser your page in chrome. As soon as a javascript breakpoint is hit, the eclipse debugger halts and lets you step into, step over, browse the variables etc. Very nice!
JavaScript is executed in the browser, which is pretty far removed from Eclipse. Eclipse would have to somehow hook into the browser's JavaScript engine to debug it. Therefore there's no built-in debugging of JavaScript via Eclipse, since JS isn't really its main focus anyways.
However, there are plug-ins which you can install to do JavaScript debugging. I believe the main one is the AJAX Toolkit Framework (ATF). It embeds a Mozilla browser in Eclipse in order to do its debugging, so it won't be able to handle cross-browser complications that typically arise when writing JavaScript, but it will certainly help.
Use the debugging tools supported by the browser. As mentioned above
Firebug for Firefox
Chrome Developer Tools from Chrome
IE Developer for IE.
That way you can detect cross-browser issues. To help reduce the cross-browser issues, use a javascript framework ie jQuery, YUI, moo tools, etc.
Below is a screenshot (javascript-debug.png) of what it looks lime in Firebug.
1) hit 'F12'
2) click the 'Script' tab and 'enable it' (if you are already on your page - hit 'F5' to re-load)
3) next to the 'All' drop down, there will be another dropdown to the right. Select your javascript file from that dropdown.
In the screenshot, I've set a break-point at line 42 by 'left-mouse-click'. This will enable you to break, inspect, watch, etc.
It's possible to debug JavaScript by setting breakpoints in Eclipse using the AJAX Tools Framework.
MyEclipse (eclipse based, subscription required) and Webclipse (an eclipse plug-in, currently free), from my company, Genuitec, have newly engineered (as of 2015) JavaScript debugging built in:
You can debug both generic web applications and Node.js files.
For Node.js there is Nodeclipse 0.2 with some bug fixes for chromedevtools