Jump to content
Search Community

Suggested IDE for HTML5 & GSAP JavaScript?

PawleyBoboli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Folks,

 

I am a long time ActionScript programmer and now making my way into JavaScript with GSAP.  I have been using the Greensock Tweening plugins for Flash for years.

 

As comfortable as I am with the Flash IDE, is there a similar IDE for programming HTML5 and JavaScript projects?  I have dug around and there seems to be many applications but I am not sure what would be best to use.   My projects will most likely include Canvas, JavaScript, JQuery, and video assets. I've got an Adobe account so I have access to the Edge products (Animate, Code, Inspect etc), but also have looked at using Eclipse, CodeKit, and TitaniumStudio.

 

What is the best environment for programming/testing/debugging these kinds of projects?  Thanks for any info.

 

Happy New year all.

--Kevin

Link to comment
Share on other sites

I am currently using Sublime 2, as it has many nice features and a strong community behind it.

Also Adobe Brackets seems nice and some of its features like inline editing of functions/css or preview of color or svg by tooltip are always nice to have.

 

Greensock products play nice with everything although I am not sure if any IDE has "code-hint" for GSAP. (That would be nice to have... )

Link to comment
Share on other sites

Hello welcome to the GreenSock Forums PawleyBoboli !

 

I write code in a mix of code editors.. like Dreamweaver, Sublime 2, and Notepad++.

 

Dreamweaver will show code hints depending on what JS libraries you have included in your page.

 

As far as debugging.. i debug in the browser using the browsers developer tools:

 

Firefox

When debugging in Firefox i use the Firebug addon and the Firefox native inspector and script debugger.

 

Google Chrome, Opera, & Safari:

For Google Chrome i use Chromes inspector/script debugger which has gotten better over the years. Opera now uses Chromium so the inspector and debugger should look the same on the surface.

 

Internet Explorer:

Internet Explorer's inspector for 7,8, 9, and 10 is pretty bad and takes more time to debug due to it having to constantly manually refresh the DOM. But IE11 has a new inspector and debugger and it's a big improvement.

 

Using the script debugger in the browser you can step into functions, and set break points to track down problematic code.

  • Continue - continues execution until the next breakpoint.

  • Step over - steps to the next line, without descending into any functions called on the current line.

  • Step into - steps to the next line, descending into any functions called on the current line first. If there are no function calls on the current line, this button behaves like the step over button.

  • Step out - steps to the preceding frame in the call stack

Firefox and Firebug script debugger tutorials:

 

http://www.developerfusion.com/article/139949/debugging-javascript-with-firebug/

https://getfirebug.com/wiki/index.php/Script_Panel

http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/

 

Google Chrome script debugger tutorial:

 

https://developers.google.com/chrome-developer-tools/docs/javascript-debugging?hl=es-

 

Hope this helps! :)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...