Ext.js - Debugging Ext JS code

Any JavaScript code can be debug using alert() box or console.log() or with the debug pointer in a debugger.

1. Alert box:
   place an alert box in the code where you want to check the flow or any variable value. e.g alert('message to show' + variable);
   
2. Development/debugging Tool:
   Debugger is the most important tool for any developer to check the issue and error in the code while developing. Ext JS is a JavaScript framework so it can be easily debugged using developer tools provided by or specific to different browsers.
   All the major browser have their developer tools available to test and debug JavaScript code.
   Popular debuggers are IE development tool for IE, firebug for firefox, chrome development tool for Chrome browser.
   Chrome debugger comes with Chrome browser but firebug has to get installed specifically as it doesn’t come as a package with firefox.
   Here is a link to install firebug for firefox browser http://getfirebug.com
   Shortcut to open development tool in windows OS is F12 keyboard key.

How to debug JS code in debugger:

There are two ways to debug JavaScript code

• Placing console.log() in the code and see the value of the log which will be printed in the console of development tool.
• Using breakpoints in development tool:
• Open the file in among all the available scripts under script tag
• Now place a breakpoint to the line you want to debug
• Run the application in browser
• Now whenever the code flow will reach to this line it will break the code and stay there until user run the code by keys F6(go to next line of code), F7(go inside the function) or F8(go to the next breakpoint or run the code if there is no more breakpoints) based on flow you want to debug.
• You can select the variable or the function you want to see the value of.
• You can use console to check the value or to check some changes in browser itself.