7 Things About Debugging Tools You Have to Experience Yourself

Tidio Live Chat Software - Add Tidio live chat software to your website in minutes. Contact visitors and turn them into happy customers. Enhance their experience and boost your sales. Get it for Free

WP Rocket - WordPress Caching Plugin

Must Read

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.

Also Read

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. 

Elegant Themes - The most popular WordPress theme in the world and the ultimate WordPress Page Builder. Get a 30-day money-back guarantee. Get it for Free

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

#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:

  1. Component ID is generated automatically if the programmer does not explicitly define it.
  2. Xtype defines the type of component it is.
  3. The Layout Config column is present for components that support different layouts.
  4. 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 with 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” 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 datastores.

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:

URaiCHAM60t677xK7BUTyhnHNWz40WrvwsAmkaV269HLYQRgKenjZLHwPeupQy5qOuNpt2WpUx 7CnE woZSAYs0XvnOpxf4GipC41ZHpLtp4P7m iqyJh8jpK0GujrpaZOVlH 7

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 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.

NvbQQsQiJZkd2AVgTp5QwsbotpbqalZtYn9n5GwbDpBF3FVWdZql70MCeFg0lij409iY sj19iPuT2wg QJ1jQ m1MCRLKWAVMDM5n7upP4bez ezUu4v3er20 y10tIVIH2wT72

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.

nb pr 25D2tYjem6pdbgHpaVM5 L4reoboC8nBBLZEKEDbudAxtKcU5TAhw1mcjAY1fXY0hcvobFMryT4bVskH Lzr1ZrXw8PvJqzqhBN2B8jBVbH 1so FfTbDqW7FK3aNQ9e9A
Based on the image above, the classes are organized in folders. This is identical to how they would appear in the file system.

Search helps simplify finding files while simultaneously giving you access to your components and events. You won’t have to scour to and fro to figure it out. It’s all right there in the inspector.

#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. 

iThemes WordPress Hosting

Stay updated

Subscribe to our newsletter and never miss an update on the latest tech, gaming, startup, how to guide, deals and more.



- Advertisement -
- Advertisement -


Grow Your Business

Place your brand in front of tech-savvy audience. Partner with us to build brand awareness, increase website traffic, generate qualified leads, and grow your business.

- Advertisement -

Grow Your Business

Get these business solutions, tools and services to help your business grow.

Elementor -Join 5,000,000+ Professionals Who Build Better Sites With Elementor. Build your website with 100% visual design that loads faster and speeds up the process of building them.

WP Rocket

WP Rocket - Speed up your website with the most powerful caching plugin in the world. The website speed increase means better SEO ranking, user experience, and conversation. It’s a fact that Google loves a fast site.


Kinsta - If you are looking for WordPress managed hosting, Kinsta is in the leading front. Kinsta provides WordPress hosting for a small or large business that helps take care of all your needs regarding your website with cutting-edge technology.


OptinMonster - Instantly boost leads and grow revenue with the #1 most powerful conversion optimization toolkit in the world. 700,000+ websites are using OptinMonster to turn their traffic into leads, subscribers, and sales.


- Advertisement -
- Advertisement -
ChatGPT Reaches 100 Million Users in Two Months Microsoft’s Teams Get OpenAI-Based Features WhatsApp New Feature that Allows Users to Create Calling Shortcuts Instagram Working On Twitter-like Paid Verification Feature OnePlus Ace 2 Specs Exposed Online Realme GT Neo 5 Full Specs Revealed  Samsung Galaxy S23 Ultra: The New Android King Twitter To End Free API February 9 MLS Season Pass Now Available On Apple TV App Tesla To Increase Giga Shanghai EV Production to 20,000 Weekly 
OpenAI Releases Tool To Detect AI-generated Text Tesla Records Double Net Profit in 2022 India to Produce Upcoming iPhones: Trade Minister Japanese Professor Developed A Power Semiconductor made of Diamond Google Releases New Product for India’s Merchants Indian EV Startup Unveil Two AutoBalancing Electric Scooters OPPO Find X6 Pro Images Render via Weibo Sony Develops New Tech to Reduce Noise of Image Sensors