Smartlook Devtools is a feature that will give 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 turn on Devtools

You can turn Devtools on from the project settings and then bring them up in the recording UI by clicking on the DEVTOOLS button.

Devtools components

Console Tab

The Console tab (as shown below) includes Logs, Errors, Warnings, Info, and Debug areas. You can use these to review all the most important notifications from the JS console, just like 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. You can read more about how Smartlook handles default JavaScript errors as well as custom JavaScript errors in our documentation.

Network Tab

The Network tab displays an overview of all the assets that have been downloaded by the user’s browser within their session. The data can be sub-divided into XHR transfers, JavaScript scripts, media, or other miscellaneous assets.

Devtools FAQs

Who can use Devtools? Is it only for developers?

Devtools can be used by any Smartlook user to quickly help identify a problem. As an example, a visitor clicks on a button and nothing happens. You open Devtools to check for issues and notice an Uncaught TypeError: Cannot read property of undefined message. You click share in Smartlook and send the recording 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 as 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.

This is where Devtools gives 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 technically works for all recorded browsers, devices, and (perhaps most importantly) from anywhere in the world. Devtools takes the guessing out of the equation. Just as Smartlook session recordings 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?