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

How to enable DevTools

You can enable DevTools by going to your Projects settings and choosing the project you want to analyze with DevTools.

With DevTools 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, just as you'd see in the visitor’s browser.

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 logging.

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, or other assets. You can edit what data you see in the table by clicking the more icon.

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. Click share in Smartlook and send the session to 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.

Did this answer your question?