Overview
Next Experience Developer Tools is a Google Chrome browser extension provided by ServiceNow that adds specialized debugging and profiling capabilities for the Next Experience UI framework (ServiceNow’s modern UI).
Once installed, in the Chrome Developer Tools, two new panels appear: Next UI Inspector and Next UI Profiler, which are purpose-built debugging tools for ServiceNow’s Next Experience applications.
The extension lets you peek into the components on that page (their properties, data, etc.), see events and actions triggered, view logs from those components, and profile the page’s load time and performance. It’s tailored specifically to ServiceNow’s Next Experience, so it understands the framework’s internals that generic browser dev tools don’t surface and it’s especially useful if you’re new to ServiceNow’s UI Builder/Next Experience because it bridges the gap between what you built in the UI and what’s happening in the browser.
Family Release: Xanadu
UI Builder Release: 26.2.59
Roles Required: admin
Authored by: @michaelburney
How to Install Next Experience Developer Tools
Chrome Web Browser:
- Navigate to the chrome web store: https://chromewebstore.google.com/
- Search for 'Next Experience Developer Tools'
3. Select the plugin titled 'Next Experience Developer Tools'
4. Scroll down the plugins page and verify the publisher is 'ServiceNow'
5. Once Verified, Click the 'Add to Chrome' button in the upper right corner of the plugins page.
6. You should see a pop up to confirm the installation of the extension, titled "Add 'Next Experience Developer Tools"?'
7. Select the 'Add extension' button
To use the Next Experience Developer Tools
1. On your ServiceNow instance, navigate to the Next Experience page you are looking to troubleshoot, such as Workspace.
2. For this example, let's navigate to the Asset Workspace.
5. Right click a blank space on the Workspace to open the context menu.
6. Select Inspect.
7. The browsers console will open
8. Select the 'Next Exp Inspector' tab to view the home page
Next Experience Inspector
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 things that should be brought to your attention.
To understand each card, click the (?) icon on the bottom right to reveal a pop up with a write up of what the component represents.
Components tab
The Components tab displays a tree or list of all Next Experience components currently rendered on the page 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
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.
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
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 action. In UI Builder, you wire up actions to components; the Inspector’s Action Handlers list lets you see all those connections for the selected component in one place.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.
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.
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.
Some things you can see/do in Traces tab: View transaction details, Check timing of transactions, filter, etc.
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.
Inspector Toolbar Buttons
At the top of the Inspector panel, you’ll notice a set of toolbar buttons or icons. These controls let you do things like pause the data flow, adjust settings, or export data. Let’s explain the common buttons you might see:
1. Pause/Resume: The pause button (usually a pause icon that turns into a play icon when toggled) will freeze the live updating of the Inspector’s data. Pressing pause means the tool will temporarily stop listening for new events/logs. The existing data stays on screen for you to examine. When you’re ready, pressing it again (resume) will catch up or continue listening. For instance, if a flurry of events is happening and you want to stop the screen from scrolling, pause to take a breath and look at what’s already captured.
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.
2. Data Toggle: This button (often looks like a database cylinder or a record icon) allows you to start or stop the collection of certain data. In the context of Logs or Events, toggling “Data” on might begin capturing events, and toggling it off would pause capturing. For example, logs recording can be toggled on/off using the Data button – when it’s on, the Logs tab will collect and show logs in real-time; when off, it stops recording new logs
3. Upload: Lets you import a previously saved profile file into the Profiler
4. Download: Download allows you to export a recorded performance profile to a file on your computer. The profile is usually saved as a JSON file containing all the timing data of a profiling session
5. Settings (Gear icon): The gear icon opens the settings popup for the Developer Tools. This is where you can configure the extension’s behavior. The settings apply across all tabs of the tool and persist between sessions.
6. Clear: In some tabs (like Logs or Events), you might see a trash can icon or “Clear” button. This simply clears the current list of entries. It’s helpful to reset the view. For example, you might clear the Logs tab, then perform a specific action, just to see only the new log entries related to that action (and not previous logs). The Logs tab header indeed has a clear button to clear out the displayed logs
Settings
- Current Build Version
- Number of properties displayed on Components: Controls how many properties to include in the component tree
- Optimize for application size: Tunes how frequently to update the data in the developer tools. Optimizing for large applications uses less frequent updates so that page performance is less impacted but results in more latency before changes show in the developer tools. Optimizing for small applications uses frequent updates so that changes show in the developer tools quickly at the cost of affecting page performance more. The default is to optimize for large applications and affect page performance the least.
- Compact the user interface: Used to optimize the UI by showing more information in the window
- Show Service Workers tab: - Shows or hides Render Performance tab
- Default tab: Select which tab to display upon first opening of the inspector panel
- Enable usage tracking: Allows ServiceNow to gather product usage data with the goal of enhancing the user experience
- Enable "ServiceNow Tools" right click menu: When enabled, Right Clicking a page element will give an extra menu selection, to the context menu, called 'ServiceNow Tools'. This new Menu Selection contains a submenu with UI Builder centric actions.
Next Experience Profiler
The Profiler records the timing of various events and operations in your Next Experience page and presents them in a visual way. It’s similar to Chrome’s built-in performance profiler but tailored to ServiceNow’s Next Experience framework. You can use it to profile the initial page load or any sequence of interactions you choose to record.
How to Use: When you open the Profiler tab, you’ll typically see controls to start recording. You have two main options: Start a manual recording or record a page load
- Manual recording means you press “Record", then perform a series of actions on the page (like click some buttons, navigate around), then stop the recording. The Profiler will capture the performance of just those actions.
- Page-load recording means the Profiler will capture the moment of a full page refresh/load. This mode specifically measures the page’s loading sequence from start to finish and then show you the results.
Conclusion
Congratulations! 🎉 You should now have a good understanding of what the Next Experience Developer Tools extension is and how to leverage it.
This article has guided you through the installation process, provided an overview of the various tabs and features within the Next Experience Inspector and Profiler, and explained how to use these tools to debug and profile your Next Experience applications effectively.
Keep an eye out for the next two articles in the coming weeks, where we'll explore even more of the NED Tool's features. Until then—happy building, stay innovative!
Check out the Next Experience Center of Excellence for more resources
1 Comment
