Latest Ext JS 7.8 is now available. Learn more

Sencha Inspector Is Now Generally Available

October 1, 2015 161 Views

We’re excited to announce that Sencha Inspector is now generally available as part of Ext JS Premium. Inspector is designed to provide application insights and intelligent debugging capabilities for any Sencha application developed with Ext JS 4.2.0, 5.x, 6.x or Touch 2.1.0 and above – regardless of the browser you’re using.

  • Download it for free today* and give us your feedback in the forum.
    *Note: when you receive the Ext JS free trial confirmation email, you can choose to download Inspector only.
  • Ext JS Premium customers: Download Inspector from the Support portal.
  • To learn more about Inspector, join us for our upcoming webinar.

Webinar: Sencha Inspector – Accelerating Web Application Debugging and Theming

Tuesday, October 6, 2015
10am EDT | 1pm EDT | 6pm BST
Register Now

Using Sencha Inspector

Developer tools native to today’s browsers (Chrome, Firefox, Safari, and Internet Explorer) expose DOM elements, CSS rules, JavaScript code and more in order to assist developers with debugging their applications. None of these tools understands (let alone displays) the component tree, application architecture, inheritance, events, etc. for applications built using Sencha frameworks (Ext JS & Touch). Inspector provides direct access to components, classes, objects, etc. for Ext JS and Touch apps, and helps to improve developer productivity around common debugging tasks.

Inspecting Ext JS Apps

Inspector is a desktop application with a multi-tabbed view, and each tab provides comprehensive insights into your Ext JS application structure. The Component tab view shows a component tree that you can use to look at the component hierarchy. It shows Id, xtype, layout configuration, and whether a component uses data binding, viewmodels, or viewcontrollers. After selecting a component, you can inspect the component’s properties, methods, layout, data binding, viewmodel, and viewcontroller.

  • Store tab view – inspect store config, store model, store proxy, records, and details of each store record.
  • Layout Runs tab view – watch application layout runs that will help you with optimizing your application.
  • Events tab view – record interactions with the Ext JS application and inspect those UI events.
  • App Details tab – a snapshot view of application information including Ext JS toolkit, version, Cmd version, and theme which you can use when creating support tickets.

Debugging an App Running on Multiple Browsers and Mobile Devices

Inspector is a desktop tool that allows multiple simultaneous debugging sessions. You can debug an application running on multiple browsers simultaneously including Chrome, Firefox, Safari, and IE. You can also debug applications running on mobile devices including iOS and Android mobile devices, and also in Sencha Web Application Manager. Inspector is a great tool for debugging Ext JS application code and performance.

  • Layout Runs tab – information about layout rendering order.
  • Components tab – information about component nesting that will help you uncover over-nesting issues; also any data binding errors within your application.

Theming an Application

Inspector is a comprehensive tool for viewing and debugging all your Ext JS Sass variables. You have access to view and modify thousands of Sass variables from the Inspector theming tab. Using Ext JS 6 and Fashion, you can theme your application by modifying the Sass in near real-time. Check out our new Live Theming guide for instructions on how to debug your Sass, create new themes, and give your application a great new look.

Get Started Quickly

With the General Availability release, we’re providing you with a hosted Ext JS application – Feed Viewer – that is preconfigured to connect to your instance of Inspector. Just access the feed viewer application from your browser, and immediately start inspecting the app. Check out the Inspector guide for detailed instructions.

To learn more and get all of your questions answered, register now for our upcoming webinar.

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More