I'm trying to debug some Javascript code inside a JSP page in a web app (Servlets, JSP and JavaScript) I'm working on. In order to be able to debug it I understand I need to check the Debug Web Application (Client side JavaScript) option under Debug section in the Project Properties window.
The problem is I don't have any Debug section in the Project Properties window. I also don't have the JavaScript Libraries section, but I'm not sure whether it's related or not.
What I'm looking for is what is shown here.
Just to be clear, what I need is to be able to debug JavaScript, so if there's a different solution for doing this I would be more than happy to here about it.
If its worth anything I can put breakpoints inside JavaScript, its just that I cannot see any values of variables.
Thanks,
Alon
[EDIT:] As ladar kindly pointed out, the JavaScript debugger was dropped from Netbeans in previous versions (It seems like in version 6.9). As an alternative I use Firebug now.
What version of NetBeans are you using? Javascript debugger was dropped in recent versions (as far as I know 7.0 and newer doesn't support it). So because there is no js debugger, this screenshot is not there because it will always debug server side code
Related
I am not experienced in developing web apps with NetBeans.
I created an HTML5 project with existing sources (some HTML, JS and CSS files), the import seems to be OK, but I didn't manage to debug JavaScript code, because the "Debug project", "Debug file" and "Debug test file" menu items are always disabled.
What have I missed?
PS.: I downloaded a fresh version in November 2013.
HTML5 project is always debugging and running at the same time if you run it in any browser with NetBeans connector (check the browser switcher in toolbar). So once you run project/file, if some breakpoint should be hit, it will be. Therefore debug action is not enabled for HTML5 project, because it is the same as Run action.
Basically it means you can debug JS in Chrome with NetBeans Connector, Embedded browser in IDE, Chrome on Android, Safari on iOS...
I also ran into issues when trying to debug JavaScript in a PHP project. I was using Chrome as my browser and had confirmed that the Netbeans Connector extension was installed and working in Chrome.
I could debug PHP without any issues. I could create a separate HTML5/JavaScript project and debug JavaScript without any problem. However, when I tried to set breakpoints on JavaScript code that was embedded in tags within the PHP file, I would get the little 'broken' breakpoints that everyone else references. When I selected the option to debug project, I could debug the PHP code, but the JavaScript breakpoints were never hit.
The change that I made that finally (for me) caused the JavaScript breakpoints to be hit so I could step through code using the Netbeans debugger was to remove the Javascript from the file containing the PHP/HTML code and place the JavaScript in a separate file that only contained JavaScript via a within the PHP file. Magically, I could debug both JavaScript and PHP within the same debugging session without any extra setup.
Of course, one alternative is to use the debugger within the browser, such as Chrome developer tools, but I really wanted to be able to debug everything from within the same Netbeans environment. Works like a charm now.
Never used the JavaScript debugger myself but you find here a tutorial if it has to be the Netbeans debugger. As an alternative I can recommend the JavaScript debugger from Firebug.
Use the Chrome debugger once the page is loaded in the browser.
When you end up solving cross browser compatibility you'll have to use particular browser console/debugger implementation (which may not be fancy). Before that enjoy in ChromeDevTools or FireBug :)
Ok, this is some question...well, I haven't seeing in any other place a question like this one...
I need to debug a javascript file through Eclipse (Helios)...but, that is not all, the javascript file is called by a third party application (C/C++) that runs (Mozilla) SpiderMonkey to execute the js file.
I need, someway to conect Eclipse to this application and get the debug symbols. Or, something like that...
Anyone see something like this before? Have an advice?
[EDITED]
Scenario:
The application (consoleApp.exe) runs the javascript engine SpiderMonkey embedded.
I need to, from Eclipse IDE, attach the application process and debug the current javascript source that SM is running.
Tks!
[THANKS!!!]
For anyone who gives a thought/comment/idea to answer this question. I figured out what i have to do, but, it will be difficult. I need to ask to modify the application core to expose the debug information coming from SpiderMonkey and JSD. And write an Eclipse plugin (or modify Pistol, maybe) to
comply with i want to do. Again, thanks to everyone.
You can try Firbug or Firefox web developer tools under Tools option.
In Eclipse:
JavaScript Development Tools (JSDT) - Eclipse.org
www.eclipse.org/webtools/jsdt/
I am not very sure about this but you can have a look into this
OR
The Google Chrome Developer Tools for Java allow debugging using Chrome.
It looks like Piston does exactly what you are asking for in your original question, although you cannot use it to debug your executable directly as in your clarification. Unfortunately, it also looks like it is hard to set up.
Doesnt Eclipse have something similar to .Net's 'Attach to process' under debug options? That way, you can easily debug your client side using your firebug, and whenever a server script is executed, your eclipse will debug it as if it were executed from there.
I am very new to ExtJS and still going through the Docs in Sencha site. I've seen a lot of examples in ExtJS4 using console.log() for debugging. However I couldn't figure out how to deal with console.log().
I am using Aptana Studio 3 for development, and I don't think Aptana can run console.log() (correct me if im wrong). So we need to debug it in Firebug? Then how to incorporate script files like ext-all.js, ext-debug.js into Firebug?
Right, the console.log() output from your scripts goes to the console window of the developer tools of whatever browser you're using (e.g. Firebug for Firefox). The browser developer tool picks up the script files from the same place the browser does; i.e. however you have them loaded into your web page.
I would recommend you to use Google chrome. It has a very good developer tool.
Apart from that for ExtJs, use ext-all-dev.js file instead of ext-all.js or ext-all-debug.js while doing any development. It will be really helpful.
Check this link for more details.
Also you can set breakpoints by simply using the command debugger; in your javascript file.
But to make this work make sure firebug/developer tool is running.
Hope this helps.
I'm pretty new to workign with Javascript.
In most languages you can run the code quickly locally on your machine. From what I've seen, in JS you generally only use it via the browser, and so I've been uploading my code an viewing its effects in the browser. This has proven very tiresome. Also, if I mak one error, it seems like my JS/JQuery will just do NOTHING, instead of giving me a useful error, message, which is making it painfully slow to code in.
IS there some way to run JS locally to see that it is working as I go? And then only upload it to the web when I'm mostly done? What ways are there for me to do this? What ways aer there for me to unit test the Javascript locally? Say I have some JAML that should render as <p>HI</p>, how do I run this locally in a unit test?
Thanks for the help,
Alex
EDIT:
Thanks for all the great suggestions. I'll have to take a bit of time and go through them to see which ones best help me in my situation.
Since you're using jQuery, I assume that you actually want to manipulate the various elements on your page. So depending on your specific development enviroment, uploading it each time is probably the way to go anyway. If you can set up a dev enviroment on your local machine (not always possible) then go with that.
As an actual answer to your question, I suggest using Chrome's developer tools, it doesn't just have the console, but an element inspector, and a resource tracker (resource tracker is invaluable when working with JSON and AJAX, since invalid json will fail silently)
As far as I know, the firebug plugin for firefox (dont use it myself) has a similar feature set, so if you're more comfortable with that go with it.
Just remember, as a developer, your development (and debuggin) enviroment is just as important as the code that you are writing.
EDIT: Noticed that you mentioned unit testing. There are several unit testing frameworks out there for JS including one that integrates with firebug called FireUnit. Do a quick google search to find more if you want.
You don't need to upload the JS file to a server to test it. Just write an html and declare the js binding
<script
src="js/yourJSFile.js"
type="text/javascript"></script>
Edit the JS file in your favorite editor and then refresh the page to test it.
For unit testing the best option is Selenium. It allows you to record an interaction with the browser and then play it back.
You can use Firebug with Firefox to debug JS, and Google Chrome has a debugger built-in (use the Tools -> Developer Tools menu).
You can run Javascript from the local file on your machine in your browser, so you can skip the uploading step.
Also, I'd recommend using Firefox/Firebug combo for developing Javascript as it will be very handy, especially for the part you mentioned about not seeing what's going wrong with your code.
Even if you upload your javascript it gets downloaded back to you as soon as you visit the webpage that invoques it. Its run client side always. So stick to local and use firebug as the others have said. Google`s developer tool is quite nice too.
In the browser if you open the developer tools, follow the following steps:
1) Navigate to sources
2) Under sources, click snippet and open run.js
3) You can use run.js to write as much code as you want and run it locally only to see if your code is working or not (it will give you output on the console)
4) Also you can get used to some keyboard shortcuts to make it faster for you.
5) For small javascript codes, you can navigate to console and run your code there
If you want to do unit testing with Javascript there are extension of Firebug that can help you with that. I haven't try any of them, so I can't really tell you which one are worth considering, but you can easily find them if you search for the keyword "Firebug unit testing" on Google.
What seems to be comming on top is FireUnit. You can find some information about how it works here.
Consider Spider Monkey, which is a javascript engine separate from a browser. If what you are developing does not involve rendering to a webpage or can be separated from the rendering code (good practice!), then this could be useful.
I prefer Chrome to Firefox and I just found Web Server for Chrome.
It's just a Google App that quickly sets up a web server for you and will be set up anywhere you are logged into Chrome. It only allows file access to your current devices, or if you specify, other devices only on the current LAN.
You just point it to the directory with your index.html file and type http://127.0.0.1:8887 in your browser.
Additionally to the answers given you can use Jasmine for automated testing.
A tutorial that seems to help get started with automated testing on Jasmine is provided by Evan Hahn.
I used it and for me it works like a charm. Especially if test driven development is what you are going for!
I am writing in javascript for windows (and also in wsf using javascript and vbscript) a desktop script not for internet and not using any explorer.
I need tool for debugging (free one).
Does someone can recommend on one ?
Thanks
I'm assuming you are creating WSH scripts based on your description. In order to debug WSH JavaScripts, start your script with wscript.exe /d path to WSH file after that, whenever an exception is going to occur, you are going to be presented with a choice to debug the script with Visual Studio or Microsoft Script Debugger (free). If you just want to step through the code start your script with wscript.exe /d /x path to WSH file this will cause an exception right at the begging of your script execution.
More information here
Aptana Studio is a great Eclipse extension and can also debug Javascript
I've heard Firebug Lite could do this? That's probably not what you're looking for still.
From the question, it sounds like you are trying to make an AJAX app that perhaps loads from local javascript + HTML.
That said, if it is OK to use Firefox as the web client, you might try Firebug. It is an excellent javascript debugger. It lets you do usual step / breakpoint things, inspect variables, and display the current page as a DOM model to help see what your jQuery (or Prototype, in my case) queries will find.