I am looking for a JavaScript JavaScript debugger.
The situation is as follows: I am making a JS game engine. The AI scripts as well as various other actions are implemented in JS. It is possible, from the engine's developer mode, to edit this code from the browser itself (using Ace).
Now I want to add debugging capabilities. Mostly I am looking for breakpoints with step into/step over support.
I couldn't find any such library. The best I could find is the outdated debug-js project.
Note that this debugger is intended for developers who are building games using my engine. This happens from inside the browser. The engine is in JS. The debugger should be in JS as well. I want full control over these debugging features, so I can't just use the browser's debugger.
For example if you type the ID of a character in an AI script, I highlight this character. This is the kind of things I can't provide if I edit the scripts in the browser's debugger, but that I can do from Ace running in the page.
Esprima looks like an interesting starting point. It makes it possible to instrument JavaScript code. This JavaScript execution visualization looks particularly promising.
Related
I looking for python/JavaScript IDE where I can put breakpoints. Currently I'm using coderunner but I can not put break points. I'll really appreciate you recommendations
I'm not an expert on Python, but I do work as a web developer and use JavaScript regularly. For that side of things, probably the easiest way is to use Chrome/Firefox debugger tools. You can do this manually by finding the line of code in the console and clicking (F12->Sources tab->Content scripts->desired script), or using the 'debugger' statement to toggle debug mode (F12->Console tab->type 'debugger' then return) and step through to what you need.
Additionally, if you're looking for an actual IDE, the only thing I've found online is the following. Here's the relevant part of that article. I've never used it (and probably never will), but there it is all the same.
Webstorm by IDEA supports setting breakpoints in the IDE. This requires launching the JavaScript debugger from IDEA. It must be configured in advance so it understands how to map JavaScript on the development server to JavaScript files in your environment. IDEA will automatically install a Chrome or Firefox plug-in to facilitate. This is pretty new technology and can be touchy.
I use PyCharm. It's a heavyweight IDE, so expect more features than you probably want if you're just getting started. It has a very good integrated debugger. You'll be able to break into both your Python and Javascript. Further, you'll see a pretty nice productivity jump with all the editing support like auto complete and intellisense. My advice is to stick with print() and logging as long as you can. For me getting a firm grasp of packages, python environments, virtualenv, command line tricks and git all before committing to the PyCharm IDE helped me adopt it with more confidence I was getting the value of all the integration.
It is documented that GWT converts java code ( a few extensions not supported ) to javascript which gets rendered. When does this conversion happen? I want to know the steps and the agents involved at each step.
Why do we need GWT plugins for each browser? What part of the conversion is handled by the library and what part is handled by the plugin?
I have read a lot of tutorials but this point is still vague.
It is important to understand about GWT that there's a big difference between production mode and development mode. You write Java code and for deployment, the GWT compiler compiles it to JavaScript which is then interpreted by the browser. So, in production, the conversion happens only one time, before you deploy your web app to a server. And in this case, no browser plugin is needed because modern browsers can interpret JavaScript without any help.
In development mode however, things are different. The Java code is interpreted by the GWT browser plugin directly, without an explicit compilation from Java into JavaScript. So you only need a browser plugin in development mode.
And then there's super dev mode, which is different from the scenarios above.
This page explains it all.
I would like to see what the JavaScript interpreter is doing in real-time, which line it is reading and which function it is running, because I would like to make a full debug on every little piece of the JavaScript to make it faster. For this I need some tool to tell me what the interpreter is doing exactly, if it is defining a variable, if it's running a function, if it's in a loop, check the current intervals (defined in setInterval).
As far as I know Firebug can't do that.
Check out the javascript tab in Firebug, it's a full debugger. Set a break point and when your code hits that line you will have full debugging access to variables etc. Chrome has similar functionality in the developer tools which are included in a standard install.
If you're looking to do automated monitoring/analysis of your program, check out Chrome's Debugger Protocol. It provides a programatic API. I believe (but could be wrong) that this is what tools like Web Inspector and node-inspector are built on.
If you want something more than what the standard Firebug/Web Inspector interfaces are built on, you're going to have to either use something like this or start hacking on the internals of the V8 and Gecko JS interpreters.
As the other answer says,if you want to go step by step, setting a debug point is the way to go.
But since you seem interested in improving performance you might want to consider optimizing only the true bottlenecks in your application. To see which functions take the most to run, and other statistics you might want to take a look at console.profile() (available both in firebug and chrome).
Here is an example:
console.profile('myProfile');
//some code you want to know more about
console.profileEnd();
You can also start it manually by clicking the Profile button in the Console panel(in firebug)/ Profile panel (chrome)
In Chrome you might want to also take a look at Heap Snapshots (they tell you about memory usage).
I am seeking your stories on how you have streamlined your client side development with Visual Studio. In particular, it seems that I need to build my site too often in order for changes to pushed down to IE effectively. What shortcuts or tools like FireBug, etc. do you use for your client side development? Do you avoid Visual Studio for debugging your client side apps all together?
We are developing the application which is building almost everything on javascript side, all the controls, webservice call (thru Ajax enabled javascript), grids and all kind of stuff.
We have created framework which includes ExtJs, and JQuery. It makes life easy to initialize and define all the controls in jQuery and make get data using webservice. We can use only ExtJs, however Jquery reduce the number of lines we need to define and set the controls. And of course its very light weight as javascript files are like <25-20 kb which needs to use this frameworks.
I've used the steps outlined by ScottGu here to get a better JS intellisense for VS 2008.
(As it is pointed out here, this patch is intended for all JavaScript files, not just jQuery.)
I use the vsdoc files to get intellisense working for jQuery.
lately, I had to work in a VS2005 + IE6 only environment. I've quickly got used to having Firefox for debugging with the tools I subjectively deemed essential: Firebug, PageSpeed, FireQuery.
I tried Aptana. (As of yet however, I didn't invest much time in getting to know it - you may find it familiar if you are equipped with some Eclipse knowledge, though...)
After all is well and done, I check pages in IE and use the built-in profiler in IE8 if there is some IE specific perf issue.
I use the "empty vsdoc" workaround when VS intellisense gives up.
At home, I use VS 2010 RC - and at all places I keep the API references of JS frameworks bookmarked and within reach, just in case.
Place Javascript code in separate JS files.
You might want to consider turning your related sets of functionality into a ScriptControl.
When you work on some JS file and want to avoid the time of rebuilding the whole project, do not make it an embedded scriptresource from the start. Package it in the assembly when it is stable enough.
If you are in doubt whether you get the latest version of your JS file, disable the browser cache. (It can be done from FireBug, or in the IE dev tools.)
Disclaimer: this list is really subjective and probably not complete at all.
I think that Visual Studio's biggest let down is the Javascript editor. I have been told to use Aptana as an editor for my javascript files, but I would prefer to stick with visual studio if possible.
I have read other similar plugin posts, but none focus specifically on Javascript.
VS2010 may offer some improvements, but will they be up to Apatana standards? I have briefly tested the beta, but I'm not overly impressed.
Is there anything out there that will bring Javascript closer to c# development? Considering the wide spread use of Javascript I think there must be something....... I hope! :)
Many thanks in advance... this is something that has always bugged me!
There's a couple recent plugins that may be helpful :
From Microsoft :
JScript Editor Extensions
Brace Matching
Outlining / Cold-folding
Current Word Highlighting
IntelliSense Doc-Comments Support
JSEnhancements
Outlining and matching braces highlighting
(I wouldn't think installing both of these is a good idea - and the Microsoft plugin has more features so try that one first)
VS is a pretty good IDE (especially when coupled with Resharper) but not so hot with Javascript. The debugger is good and there's the JSLint plugin but other than that I'm not sure. Aptana (based on Eclipse) is an excellent javascript IDE but it doesn't like it much when the javascript is embedded in aspx files (unless they updated the support recently). So far I'm not sure there's an ideal .net platform IDE for both client and server side stuff just yet.
Update: Resharper 6 added pretty good JavaScript support - so now I'd recommend that combination if you're doing a lot of debugging across client and server at the same time. If you're focussing on pure client code then I find WebStorm to be an excellent JavaScript/HTML IDE - even better than Aptana.
I'd really like to recommend Webstorm. It does not! treat your JS as text files.
Its a full blown JS editor and has become my favourite JS editor working in parallel with VS to handle my server side stuff.
WS has actual object intellisense across JS files. That means when I press . (dot) it shows me the functions on that objects, even if its located physically in another file.
It will recognize my objects (or their type if you will) created in other JS files referred to in the file I'm working on.
I have 'Find usages' on JS functions
I have 'find all references' on JS object / function / class / variable or whatever you want to search on. In the end its all objects but Webstorm knows this.
If I change the short/cut to F12, I can press F12 on my function call and it will jump to the implementation of that JS functon. Even if its located in another file.
Ofc. you have code folding and colouring, extract method and other neat code re factoring, overview creating tools.
Oh. And by the way.
I'd like to kill off a rumour going around in the cloud on forums I come across from time to time, looking for better ways to handle JS.
reSharper DO NOT SUPPORT JAVASCRIPT! A little piece of me dies every time I read some guy repeating what he saw on the reSharper site. It may have a some poor intellisense and some low level syntax check, but that has nothing to do with support.
Notepad++ supports JS better than VS in my opinion.
Münster
Don't forget to grab Chirpy to handle minifying your scripts in VS.
If you use Visual Studio, add the
/// <reference path="myOtherJsFile.js" />
directive at top of your js files and install Web Essentials you get pretty decent (but not perfect) intellisense, go to definition by using F12 and find all references (sort of..) by using SHIFT+F12