Ext.js Debugging Ext JS code - Ext JS

What is the use of Debugging Ext JS code?

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

1. Alert box:

An alert box should be placed in the code when the user wants to check the flow or any variable value. e.g alert('message to show' + variable);

2. Development/debugging Tool:

Debugger is an important tool used for checking the issue or error in the code during development. Ext JS is a JavaScript framework and can be easily debugged by using developer tools provided by different browsers.

All the major browsers have their own developer tools for testing and debugging 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 be installed exclusively as it doesn’t come as a package with Firefox.

Shortcut key for opening development tool in windows OS is F12.

How to debug JS code in debugger:

There are 2 ways for debugging JavaScript code

  • Place console.log() in the code to see the value of the log which is printed in the development tool console.
  • Use breakpoints in development tool:
  • Open the file using all the available scripts under script tag
  • Now place a breakpoint to the line which has to be debugged
  • Run the application in a browser
  • Now each time the code flow reaches this line, it will break the code and remains until the user runs the code using keys F6 (to go to the next line of code), F7 (to go inside the function) or F8 (to go to the next breakpoint or run the code if there are no more breakpoints) based on flow to b debugged.
  • User can select the variable or the function for which they want to see the value.
  • User can use console for checking the value or for checking some changes in browser.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Ext JS Topics