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 Release: Xanadu
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:
About Cards
Each card is made up of:
- Title
- Count
- More info (a button seen as a question mark inside of a circle)
- 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.
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!
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.
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 -
display the components element in the component tree, and display its details section, as seen below:
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
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
Tab Copy - which will copy the all state elements to your clipboard
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
- Filter: Event Filter and Search Bar
- Events Total: Grand Total Number of Events
- Net New Events: Events fired since opening NED tools
- Timestamp: Exact time of last fired event
- Dispatch: Dispatch a new event
- Event Log Record: Contains pertinent information
- Copy: Copies The Events Information
- 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.
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.
The Logs tab contains:
- Filter by Source: Server
- Filter by Source: Client
- 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.Quick Tip
Tracing is not available before the Xanadu Family Release - an Error message will display here if so.
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:
- Timing of each Trace
- Drill down events
- More information about each span in detail, as seen below:
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
