Debugging is a fundamental part of the software development process. No matter how perfect your code is, there is always a chance of something going wrong.
Things do go wrong. You get bugs that lurk, going unnoticed till it’s time to push to production. When it is time to demo, it shows up. We have all experienced it, and it is not a pleasant experience.
Therefore, we must have tools in our toolbox for tracking them down.
Pinpointing where the bugs are can save massive overhead and time. It is one thing to realize a bug has shown up; it is another to figure out what is causing the problem.
Rumor has it that bugs are the number-one cause of hair loss among software developers.
Debugging efficiently is not only the task of the developer. Instead, it becomes more effective when appropriate tools are suited for the task.
For static apps built with vanilla HTML, CS, and JS, Google, Firefox, and Safari WebKit all offer different iterations.
The browser developer tools enhance the developer’s experience (DX) to ensure accurate bug detection and swift solution proffering.
Sencha’s offering regarding bug inspection and tracking is the Sencha Inspector. The Sencha Inspector is the tool for troubleshooting ExtJS and Sencha touch applications.
The inspector is not limited to troubleshooting. It also aids in performance improvements.
There are certain features of debugging tools that you can only figure out by using them. Here we highlight seven things about the Sencha Inspector that you might not have known about. Exploring them is one thing, but they are worth trying out yourself.
They include:
1. Component inspection
2. Store analysis
3. Layout runs the review
4. Event inquiry
5. App architecture review
6. Theming detection
7. App details inspection
Table of Contents
#1 – Components Inspection
Components-based architectural design is the backbone of modern application development. It ensures proper code encapsulation and reusability. Sencha implements that.
The Sencha Inspector provides an interface to interact with components in your apps.
Above, we have a demo app that utilizes the components-based architectural design.
Two panes are visible.
On the left, a tree visualizes the structure of the components. The component information displayed by the inspector has the following properties:
- Component ID is generated automatically if the programmer does not explicitly define it.
- Xtype defines the type of component it is.
- The Layout Config column is present for components that support different layouts.
- The Details column represents additional details of the app. It informs you of whether a component utilizes ViewModels, ViewControllers, or Data binding.
A currently selected component is highlighted in yellow.
In the above image, the app-main-1009 component is selected. It has an X-type of app-main, and the layout of “Border” is applied.
Information about the selected components is also logged to the current browser JavaScript console. You can check it out there as well.
The component inspector also comes with a filter field. It aids you in filtering for the particular components you need without having to scroll down. This is particularly useful if you have nested components.
The right side provides more information about the currently selected components. The available section is dependent on what applies to the currently selected components.
Here, the Data Binding field and ViewController field are grayed out because they do not apply. The Properties, Methods, Layout, and ViewModel fields can be inspected. Inspecting the right pane gives us the following:
- Properties: The properties section lists all the available configurations of the component
- Methods: All methods the components support, including custom methods, get displayed here
- Layouts: The layout information is highlighted here. This is only applicable to components that support layouts.
- Data Binding, ViewModel, and ViewController: In this case, the ViewModel section is applicable, while the others are grayed out.
- N.B: The Databinding, ViewModel, and ViewController feature inspections are generally present in ExtJS 5+ apps in custom views.
When we explore the Properties tab, we see color-highlighted items. These items signify changes in the functionality of our app or lack thereof.
Orange indicates that the current class has overridden inherited functionality.
Green notifies us of a new functionality defined in the class. The nonhighlighted field indicates items that have been inherited but remain unchanged.
Errors in the Data Binding and ViewModel fields are highlighted in red. This indicates that a problem in the key-value pair has been detected. This is only applicable to the current components-based available option.
#2 – Store Analysis
Datastores are essential for managing the collection of data relevant to your app.
The Sencha Inspector provides a store tab for inspecting your application datastore at runtime.
The Store tab opened in the Chrome browser allows inspection of the current app data stores.
Here’s an explanation of what’s in the above Image:
The top left portion indicates all the stores active in your application.
The stores are classified based on three properties:
1. Store ID
2. Model
3. Count
A Filter tab aids in filtering by name, and the Refresh button is used if a state changes based on user input. It updates the latest state in the Inspector.
The upper right portion of the screen displays the configuration for the store and the data model and proxy. All these are relevant information based on the selected store.
The bottom half of the screen displays Records. These records belong to the selected store. In addition, you can inspect individual records present in each store.
#3 – Layout Runs Review
A powerful feature of ExtJS is the Layout system. This is similar to the JavaScript Resizer observer API but is better. It is better integrated into ExtJS architecture.
The layout runs also handle the sizing and positioning of components in your app.
Sencha Inspector provides features for watching how your Sencha application recalculates the sizes and positions of your components.
This calculation is done in real-time as users interact with the application. However, ExtJS directs the complexity away from you as a developer.
The alternative to watching layout resizing in VanillaJS would require multiple console.log calls. This has the side effect of polluting your code.
Also, consider the fact that some console.log calls could potentially be pushed to production.
A quick demo of that is the image below:
To see a layout run, we watch the layout by clicking the Watch button. Interaction with the application triggers ExtJS to update the layout accordingly.
You will interact with the update right there in the inspector. Layouts can be stopped by clicking the same button used to start them. The Clear button clears the current log.
In the demo above, specific components are visible to the inspector. They are listed as the layout manager recalculates them.
When you click on a selected component, the Reveal button helps you navigate to the component instance in the component tab. This aids in closer inspection.
#4 – Events Inquiry
The modern web application design is built with user interaction in mind. This is why applications are dynamic, as they detect user input and respond to said input.
The Sencha Inspector provides an Events tab for tracking all events generated within the current app.
To track events, click “Start watching.” The inspector watches the events and logs them in the order they occur. You can click the button again to stop caring; you can also clear the log.
In the image above, we can identify the event name, event source, xType, and the component for that particular event.
A filter bar aids in filtering different types of events. The image above illustrates a checked value for “Filter mouse events.”
#5 – App Architecture Scrutiny
Organization of architecture can be a hassle. The Sencha Inspector simplifies that by including an App Architecture tab. The tab lists all the classes of the app that are currently loaded.
#6 – Theming Detection
Some argue that the Visual UI is the most crucial part of a web application, as it’s what users see and interact with.
Therefore, measures must be put in place to track down bugs that might affect the UI.
This is the work of the Theming tab in Sencha Inspector.
Fashion provides the Theming tab functionality. Fashion is a new mechanism to compile SASS themes into CSS. The inspector, therefore, allows apps built with ExtJS 6 and Sencha CMD (the command-line tool) to change themes’ values.
Several criteria have to be met to enable this feature. The list can be found in the Live Theming Guide.
#7 – App Detail Inspection
The Last feature on our list is the App details tab. It provides information about the version of the Sencha framework. It also contains packages, browser, and tool kit details necessary to you as a developer.
These seven features are not exhaustive of what Sencha Inspector has to offer. There is also a tab for inspecting secure databases. More information can be found by visiting the Sencha Docs.
The highlighted features above provided by Sencha Inspector aim to ease the debugging experience. You can install the ExtJS framework and spin up a demo app to try it out.
The best way to utilize it is through a hands-on approach.
Debugging can be a better-optimized experience. Sencha’s offering provides that, giving developers adequate tooling to that effect.
