- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
Next Experience Developer Tools Overview
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
Family Release: Xanadu
How to Install Next Experience Developer Tools
- Navigate to the chrome web store: https://chromewebstore.google.com/
- Search for 'Next Experience Developer Tools'
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.
Next Experience Inspector
Home tab
Components tab
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
Logs tab
Traces tab:
Inspector Toolbar Buttons
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
- 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
- 2,044 Views
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.