5 Replies Latest reply: Dec 18, 2013 7:07 AM by sosnewmedia RSS

    DEBUGGING in Edge_Animate

    Departure Community Member
    Departure Jul 20, 2013 3:40 PM

      Hi Forum...

       

      I am wondering how do you guys approach debugging in Edge Animate projects. Here are few survival habits i developed so far, I would appreciate if you share links or articles for more suffisticated approaches.

       

      a - I use console.log("message"), and developer tools window to sort of double check stuff. is there any other way t to see the values of different parameters in my code when it is running?

       

      b - The only place to check errors, is "ctrl+E" window (main code window), correct? it usually highlights the syntax error on bottom.

      c - Is there anyway to see the DOM STRUCTURE of the project? it would be really helpful, if we had a button on Code panel that could quickly reveal the DOM structure and elements ID, names, for faster access and kinda seeing whats going on. Currently i use naming methods to sort of figure things out looking at the symbol / elements panel.

       

      d - How do you make sense of the error, "Java event Handler error" which refers to the .js file and gives no hints to any code line, very frustrating when it happens.

        • 1. Re: DEBUGGING in Edge_Animate
          robboerman Community Member
          robboerman Jul 21, 2013 2:00 AM (in response to Departure)

          i use http://jsfiddle.net to create the javascript codes ( it hints when i make a mistake and where that mistake is made)

          and i use the chrome dev tools for debugging

          • 2. Re: DEBUGGING in Edge_Animate
            AMULI Community Member
            AMULI Jul 22, 2013 10:00 AM (in response to Departure)

            Hi Departure,

             

            Sadly, nearly nothing new to add to your practises which are also mine.

             

            I use Firebug to (a) inspect the values, (c) see the DOM.

             

            Syntax errors are also denoted by a red bullet on the offending line.

             

            Finally, I also find the "JavaScript event handler error" message frustrating and not helpful enough. What I understand is that something (variable, function) that I thought to be in the scope is in fact not. But maybe someone has a more precise answer ?

             

            I haven't already tested Edge Code. May be its features are more sophisticated than the internal Code window. Anyone to witness her/his experience ?

             

            Gil

            • 3. Re: DEBUGGING in Edge_Animate
              resdesign CommunityMVP
              resdesign Jul 22, 2013 10:13 AM (in response to AMULI)

              Same here! Firebug. you could use http://www.jslint.com/ for javascript too if you have a long code.

              • 4. Re: DEBUGGING in Edge_Animate
                elainefinnell Employee Hosts
                elainefinnell Jul 22, 2013 12:19 PM (in response to AMULI)

                Adobe Edge Code uses JSLint natively, so it'll probably give you some ideas of what is going on.  I personally use a lot of console logging to help me debug my code.

                 

                Thanks,

                 

                -Elaine

                • 5. Re: DEBUGGING in Edge_Animate
                  sosnewmedia Community Member
                  sosnewmedia Dec 18, 2013 7:07 AM (in response to Departure)

                  I just make a habit of putting a lot of try catch blocks in to get things before they get caught by those really unhelpful error messages. Also generally making things really modular so you can sequentially work throught the code.

                   

                  try {

                       bunch of code

                  } catch(e){

                       console.log("error thrown in whatever area "+e.message)

                  }

                   

                  Especially when loading reusable script libraries like this:

                   

                  AdobeEdge.getComposition("EDGE-#######").getStage().setState  = function(variable){

                       try {

                            bunch of code

                       } catch (e){

                            console.log("error thrown in setState function"+e.message)

                       }

                  }

                   

                  Hopefully Adobe sort out something better in future so that I don't have 100s of these to strip out at the end of a project.