- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
Next Experience Inspector
Table of Contents
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!
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
Home tab
About Cards
- 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)
- 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
Inspect element arrow
Properties
To Edit Values:
Double click to edit
code> is available. if so then double click on it, to reveal a modal pop up, and update the value for testing purposesState
Action Handlers
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
Events tab
- 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

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.
- Filter by Source: Server
- Filter by Source: Client
- Client Log Records containing Severity, Source, Timestamp, Message, Transaction Id, Component Name
Traces tab
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.
High
, Medium
, Low
.
- Timing of each Trace
- Drill down events
- More information about each span in detail, as seen below:
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.