6 Replies Latest reply on Oct 18, 2015 11:38 AM by VahanShamlian

    DEBUGGING in Edge_Animate

    Departure Level 1

      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 Level 4

          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 Level 4

            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 ?



            • 3. Re: DEBUGGING in Edge_Animate
              resdesign Adobe Community Professional & MVP

              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
                elainecc Adobe Employee

                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.





                • 5. Re: DEBUGGING in Edge_Animate

                  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.

                  • 6. Re: DEBUGGING in Edge_Animate

                    I found a quick and dirty method to find out where to start looking for the erroneous code. I use Chrome and I know that console.dir() can give me all the details of an object in an expandable tree view.


                    After you publish without using the Adobe CDN, find this in edge.6.0.0.min.js

                    window.console.log("Javascript error in event handler! Event Type = "+d)}var k=b


                    And edit like this

                    window.console.log("Javascript error in event handler! Event Type = "+d);console.dir(g)}var k=b


                    Now you have an Event object that you can explore to find out what happened. In my case, I found that CompositionReady in the Stage caused an error, so when I went back into Animate and looked there, I found only one line of code. I commented it out and no more errors!


                    I hope someone will find this useful