Smartlook DevTools
Smartlook DevTools gives you and your team the technical data to see what’s happening in the browser of the visitors on your website. It gives you direct data from your users’ browser, allowing for a deeper analysis of the user experience to confirm:
- Network activity
- Console logs
- JavaScript errors
- Latency issues experienced by visitors
You can extend your data further into the headers and bodies of user browser requests and responses by setting up Advanced network recording.
How to enable DevTools
You can enable DevTools in the Projects settings by enabling:
- Capture console logs—Capture everything your app logs in the console to gain better insights on what's going on
- Capture network traffic—Inspect network communication that occured during the recording
When DevTools are enabled, you can view them in the Smartlook player.
DevTools components
Console tab
The Console tab includes Logs, Errors, Warnings, Info, and Debug areas. You can use these to review all the most important notifications from the JS console.
Our users can already use an API method to send their own custom JavaScript errors and messages to Smartlook. For more information on how Smartlook handles default and custom JavaScript errors, see Error detection.
Network tab
The Network tab displays an overview of all assets downloaded by the user’s browser during their session. The data can be sub-divided into Fetch/XHR, Assest/media, JavaScript, WebSocket, or other assets. You can edit what data you see in the table by clicking the more icon.
Performance tab
The performance tab displays web-related metrics for your user's browser during their session. Available metrics include:
Metric | Description |
---|---|
First Paint | The time between navigation and when the browser first renders pixels to the screen. |
First Contentful Paint | The time from when the page starts loading to when any part of the page's content is rendered on the screen. |
First Input Delay | The time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction. |
Largest Contentful Paint | The render time of the largest image or text block visible within the viewport, relative to when the page first started loading. |
Cumulative Layout Shift | A measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. |
DevTools FAQ
Are DevTools only for developers?
Devtools can be used by any Smartlook user to quickly help identify a problem. For example, a visitor clicks a button and nothing happens. You can open DevTools to check for issues and notice an Uncaught TypeError: Cannot read property of undefined message
. You can then share the session with members of your development team.
Why is browser information important for analyzing your website?
For every UX designer, developer, marketer, store owner, and product manager, there is a simple goal of making their website as logical, effective, and functional as possible. However, as devices, software, and location can vary for every user, it’s often difficult for web designers to put themselves into the shoes of every visitor.
DevTools give your developers the technical information they need to experience their website’s functionality using the customer's browser as a data source. Now you can view how the website works technically for all recorded browsers, devices, and (perhaps most importantly) from anywhere in the world. DevTools takes the guess work out of the equation. Just as Smartlook sessions provide analysts with the luxury of experiencing their website through their customers’ eyes, Smartlook DevTools provides analysts the possibility to experience the technical loading of the website through the eyes of the browser.
Updated about 1 year ago