Easily Debug Javascript Ext JS Apps With This Powerful Tool

While developing any application is never “easy,” web applications in particular have their own set of issues and challenges. When it comes to web applications, problems can arise from a variety of sources. The user environment, internet speed, machine performance limitations, remote server availability, and even browsers with different behaviors are some of the most common factors that can impede your progress or the proper function of your app. In each of these cases, as well as many others, it is up to you, the developer, to solve the problem. However, even with the best tools and javascript libraries, locating a problem can be difficult – which is why we created the Sencha Inspector!

In this article, you’ll learn about what sencha inspector is and why it is the best Javascript Framework, as well as its features and why you should use it.

What is Sencha Inspector?

The Sencha Inspector is a complete tool that helps developers debug Ext JS applications. It allows you to inspect everything about your Ext JS application and its ecosystem. It will help you maintain your application’s best possible performance and quality.

What are the most interesting Sencha Inspector features?

This tool was designed specifically to inspect Ext JS applications. It  provides you with many options to monitor and inspect the performance of your application, like:

• Components: identifying a component’s id, xtype, layout, and other dynamic details, including properties, methods, layout, and the MVVM structure.
• Stores: checking what model was applied to id, proxy, and properties like URL, parameters and also monitor all records present in the store to easily debug the application behavior.
• Layout: verify what and how many times each layout is running for each component to see the performance or layout loopings are happening.
• Events: monitor any kind of events running and their parameters to understand who is calling or if there are there any unnecessary events executing that will affect the application performance.
• Architecture: you can see the whole project architecture in a single place (including the Ext JS framework structure).
• Theme: where you can change styles on the SASS variables that will apply dynamically to your app in real-time. After that, you can just copy your changes and apply them to your application!
• App Details: show all versions of Sencha products used and their license, so here you can monitor if you are using a compatible version of Ext JS with Sencha CMD for example, and also understand the theme hierarchy applied on your application.

These and many other options and you can use them all on the fly! You can see all details while your app is running. Some options, like Theme, you can also change live.

For more details, check out the Sencha Inspector documentation.  It is a complete guide that shows you everything you need to know to install and use it in detail. Check it here.

How to debug and Ext JS Application with Sencha Inspector?

Let’s see the Sencha Inspector in action!

How can I create the Application?

You can create a new application by running the commands below. To see more details on how to create an application using templates, check this previous post for more details.

sencha -sd /Users/fabio/sencha-sdks/ext-7.4.0/ generate app -s /Users/fabio/sencha-sdks/ext-7.4.0/templates/admin-dashboard AdminDashboard ./admin-dashboard-extjs

Now, to have the theme option enabled and working on the fly, we need to enable the fashion option on our app.json file.

On the sass section, add the save property:

{
    ...
    "sass": {
        "save": "sass/save.scss", //accepts .scss or .json file types
        ...
    }
}

After that, open the Sencha Inspector, and in the terminal navigate to your application folder, and then run the watch command with the inspector option enabled:

sencha app watch --inspect

Now open your application with this URL: http://localhost:1841/?platformTags=fashion:true

After that, you will see your application ready to inspect on your SenchaInspector:

Double click on it to see all details of your application:

You can do a simple test by going to the Theme tab, filter for the property $base_color, and change the value to #5535F6. Look to your app and you will see it changed the main color to purple, like this:

Debugging your Ext JS app just got easier! This is a simple test, but you can do so much more with it as described above in product features.

How can I get started debugging my Ext JS apps?

Dive into the Sencha Inspector documentation to explore all of your options, connect to your real application, and also connect to your online application to see it in production to verify the performance and structure or even changing the theme to give it a new face.

Not working with Ext JS yet? Get started!