Developing an application is not easy, mainly talking about a web application, where you can expect any kind of problems depending on user environment, the internet speed, machine performance limitation, remote server availability, different browsers with different behavior and many other unexpected situations where the developer will have to fix the problem. But sometimes is very hard to identify a UI problem even using browser tools.

To help with that we have a powerful product: The Sencha Inspector!

What is Sencha Inspector?

This is a complete tool that helps developers to debug Ext JS applications giving options to inspect anything about an Ext JS application and its ecosystem. It will help you keep the best performance and quality to your application!

What are the most interesting Sencha Inspector features?

This tool was designed specifically to inspect Ext JS application with many options to monitor and inspect, like:

• Components: identifying its 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 if is 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 all on the fly! You can see all details while your app is running and sometimes also change, like on the Theme option.

On Sencha Inspector documentation has a complete guide with all steps to understand how to install and use it in detail. Check it here.

How to debug and Ext JS Application with Sencha Inspector?

Let’s see Sencha Inspector in action!

Creating the Application

You can create a new application 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 on 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:

This is a simple test but you can do much with it as described above on product features. Debugging an Ext JS will be much easier now!

How can I get started debugging my Ext JS apps?

Dive in the Sencha Inspector documentation to explore all 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 a theme to give a new face to it.

Not working with Ext JS yet? Get started!