Ext.js - Debugging Ext JS code

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

Alert Box

Place an alert box in the code where you want to check the flow or any variable value. For example, alert( message to show + variable);

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, hence it can be easily debugged using developer tools provided by or specific to different browsers. All the major browsers have their developer tools available to test and debug JavaScript code.

Popular debuggers are IE development tool for IE, firebug for firefox, and chrome development tool for Chrome browser.

Chrome debugger comes with Chrome browser, however, firebug has to be installed specifically as it doesn’t come as a package with firefox.

Here is a pnk to install firebug for firefox browser http://getfirebug.com

The shortcut to open the development tool in Windows OS is F12 keyboard key.

Debugging JS Code in Debugger

There are two ways to debug JavaScript code.

The first way, is to place console.log() in the code and see the value of the log, which will be printed in the console of the development tool.

The second way is by using breakpoints in the development tool. Following is the process.

Open the file in all the available scripts under script tag.

Now place a breakpoint to the pne you want to debug.

Run the apppcation in the browser.

Now, whenever the code flow will reach this pne, it will break the code and stay there until the user runs the code by keys F6 (go to the next pne of the 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 the flow you want to debug.

You can select the variable or the function you want to see the value of.

You can use the console to check the value or to check some changes in the browser itself.