Ext.js - Debugging Ext JS code
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);
Debugger is the most important tool for any developer to check the issue and error in the code while developing.
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 link 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
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 line you want to debug.
Run the application in the browser.
Now, whenever the code flow will reach this line, it will break the code and stay there until the user runs the code by keys F6 (go to the next line 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.