MGOPW
ServiceNow Employee
ServiceNow Employee

Next Experience Inspector

Articles Hub

Want to see all of our other articles and blogs related to UI Builder and Workspaces?

You can copy the link above and share it!

We Value Your Feedback!

Have any suggestions or topics you'd like to see in the future? Let us know!

Overview

The Next Experience Inspector is a Chrome DevTools tab available from ServiceNow's Next Experience Developer Tools Chrome extension. It allows developers to easily inspect and debug Next Experience application pages in real time, helping you understand exactly how your UI components function behind the scenes. By displaying important details and visual health indicators all in one place, the Inspector simplifies identifying configuration issues in order to help debug stubborn application issues. 

 

Family ReleaseXanadu

UI Builder Release: 26.2.59
Roles Required: admin
 
Authored by: @michaelburney 

Home tab


The Home tab is like a dashboard of health indicators for your page. It gives you an overview of how many components and actions are on the page, and flags potential issues that might need attention. It displays several indicator cards with counts of issues that could be problematic:
 
MichaelB6948013_0-1743175549357.png

About Cards

 
MichaelB6948013_0-1745496944747.png

 

 

Each card is made up of:
  1. Title
  2. Count
  3. More info (a button seen as a question mark inside of a circle)
  4. Details (a button seen as the word 'Details' inside of a rectangle)
To understand each card, click the (?) icon on each component to reveal a pop up with a write up of what the card represents.
 
MichaelB6948013_2-1743175549358.png
 
Examples of other health indicator cards:
  • Broken selectable props
  • Components with same ID
  • State too big
  • DOM Depth
  • Undelivered events
  • Took too long to process
  • and many more!
:pushpin:

Quick Tip

The Total Components card and the Total Events card will always show on the Home tab. Other health indicator cards will only show if the related issues are present on the page.


Components tab


The Components tab displays a tree or list of all Next Experience components currently rendered on the page (essentially the component hierarchy, like a DOM tree). This is very useful for understanding the structure of the page as built by UI Builder. You can select any component in this list to see detailed information about it.
 
MichaelB6948013_3-1743175549359.png
 
Multiple panels of information will display after selecting a component from the components tab


Inspect element arrow


Once the Inspect Element Arrow is clicked, it allows you to select components on the next experience page which will first, highlight the component and show you the element then -
 
MichaelB6948013_4-1743175549360.png
 

display the components element in the component tree, and display its details section, as seen below:

MichaelB6948013_5-1743175549361.png
 

Properties


These are the configuration properties of the component – the same settings you would see in UI Builder’s Configuration side panel for that component.
Example: For a Button component, properties might include its label, style, icon, etc. The Inspector shows the current values of all these properties as the page is running.
Why this is useful: It lets you verify that the component received the configuration you expected.

To Edit Values:

Hover over a a value to check if Double click to editcode> is available. if so then double click on it, to reveal a modal pop up, and update the value for testing purposes
 
MichaelB6948013_6-1743175549361.png

State


This shows the component’s internal state (if any). State is different from Properties – state is usually runtime data that can change as the user interacts or as data is fetched.
Example: A list component might have state representing the currently selected item. The Inspector exposes these state values, which is incredibly helpful for debugging

There are multiple ways to copy the information you see on the page such as:
Content Copy - which will copy individual elements to your clipboard 
 
MichaelB6948013_7-1743175549362.png

Tab Copy - which will copy the all state elements to your clipboard
 
MichaelB6948013_8-1743175549362.png
 

Action Handlers


These are the event bindings on the component – essentially what actions the component will perform or emit in response to certain triggers.
Example: A save button might have an onClick handler that triggers a data save event. In UI Builder, you wire up events to components; the Inspector’s Action Handlers list lets you see all those connections for the selected component in one place.
 

Action


Shows all Dispatched Actions from the component.
 

Events tab


In the Events tab, you will see a chronological list of events that have been triggered on the page. This can include user-triggered events (like clicking a button, as well as framework or system events). For each event/action, the tool will typically show details such as the event name, the component that triggered it, and any payload data associated with it

MichaelB6948013_10-1743175589846.png
 
  1. Filter: Event Filter and Search Bar
  2. Events Total: Grand Total Number of Events
  3. Net New Events: Events fired since opening NED tools
  4. Timestamp: Exact time of last fired event
  5. Dispatch: Dispatch a new event
  6. Event Log Record: Contains pertinent information
  7. Copy: Copies The Events Information
  8. Dispatch: Contains Action Data
 

Logs tab


The Logs tab will collect and show logs in real-time; when off, it stops recording new logs.
This is useful if you want to focus on a specific period or prevent the lists from filling up with noise while you focus on something.
 
MichaelB6948013_11-1743175589847.png
:pushpin:

Quick Tip

Some client logs will require the environment to at least be on Family Release: Xanadu. Server logs will require you to have admin role, in order to show.


MichaelB6948013_12-1743175589847.png

The Logs tab contains:
  1. Filter by Source: Server
  2. Filter by Source: Client
  3. Client Log Records containing Severity, Source, Timestamp, Message, Transaction Id, Component Name
 

Traces tab


The Traces tab is a more advanced view that shows how events link together over time. Where the Events tab is like a simple list of events, the Traces tab attempts to group and sequence them into logical transactions based on the chain of events that occur as part of a transaction on the client side.
Example: When a page loads- the system might start a transaction that involves fetching data (e.g. HTTP request), then rendering components, maybe executing some client scripts, and so on. The Traces view will group these related events under a transaction entry. Each transaction shows the timeline of what happened as part of that unit of work, and in what order.
:pushpin:

Quick Tip

Tracing is not available before the Xanadu Family Release - an Error message will display here if so.


MichaelB6948013_13-1743175589848.png

From here you can filter by Backend (server) , Front End (client), or the Values: High, Medium, Low.

When clicking into a trace you will see a Waterfall view. This is an area where you can easily spot any potential failure. It contains a detailed timeline of transaction lengths in depth with information spanning from Network requests to component interaction time and more.

From the Traces tab, you can spot the key features:
 
MichaelB6948013_14-1743175589848.png

 

  1. Timing of each Trace
  2. Drill down events
  3. More information about each span in detail, as seen below:

 

MichaelB6948013_15-1743175589849.png

4. Filter
5. Plot Events


Conclusion

Congratulations! 🎉 You should now have a solid understanding of the Next Experience Inspector and how to utilize its features effectively.


This article has walked you through the various tabs and functionalities within the Inspector, including the Home Tab, Components Tab, Properties, State, Action Handlers, Events Tab, Logs Tab, and Traces Tab. By leveraging these tools, you can inspect and debug Next Experience application pages in real time, ensuring your UI components function as expected and identifying any configuration issues.


Stay tuned for part 3 of this series next week, where we'll dive deeper into the Next Experience Developer Tools. Until then—happy building and stay innovative!

Check out the Next Experience Center of Excellence for more resources