Back to Blog

Introducing Smartlook Devtools

January 14, 2020 | Nikola Kožuljević | | Smartlook

There are two distinct, and remarkably mind blowing moments that everyone experiences while they’re reviewing their initial user session replays. 

One is excitingly positive, other, rather not so. 

First one I’ll here note as the ‘wow this is great’ moment. This is an extremely positive moment.. Usually, it’s directly followed with great excitement and optimism as the viewers start to understand that finally they have a tool that allows them to understand why users behave the way they do. The universe of potential blows up in their minds and ideas start to flow like crazy. 

Until the second moment. The second moment is a grounding one. It’s the ‘ha, that’s funny, it shouldn’t do that’ moment. At this moment the viewer notices something unexpected, not intended, not programmed happening. Something that influenced their users to leave the website, churn and break their engagement.

Both moments eventually occur. Always. And both of them are full of actionable insights. 

In the first one the viewer is considering all the small tweaks they can make to achieve the full potential and friction-less UX. In the second the user is pushed to seek a solution for the obvious issues. 

We built Smartlook for these actionables – to provide our users a way to fully understand their users behavior and a direction in building the amazing digital experiences.  

And now, I’m pleased to announce that we’re releasing Smartlook’s Devtools.

For all those ‘it shouldn’t do that’ moments 

Smartlook Devtools are built for discovering, troubleshooting and discovering bugs and issues that happened on your website. 

They expand our existing Console that is used to present all the JavaScript errors that get recorded in the end user’s browser. 

Onward, Smartlook Devtools will incorporate both Console and Network Hooks in one. 

Accordingly, you’ll find the Devtools within the session replay player at the sample place where Console function was (between Notes and Hotkeys):

Smartlook-Devtools-location

Smartlook Devtools provide our users an ability to see all assets, requests, or logs that happened in their users sessions. And much more. 

They’re necessary for complete understanding of the users session from a more technical perspective. Smartlook Devtools are critical when troubleshooting, discovering and resolving bugs. 

In essence – the session replay is a visualization of user behavior with the website content. At the same time Smartlook Devtools replicate all the information users browser process as well, including errors, logs, warnings, media and scripts downloads, and more…  

Beyond bugs and issues – Smartlook Devtools also allows our users to see how specific assets (media or scripts) impact download speed on their end users browser. So, if you ever see a user leaving your website before all the assets are downloaded – double check the network hooks for clues on what is hampering the websites’ download speed. 

Console & Network Hooks combined in one

Smartlook Devtools are comprised of two distinct parts: Console and Network. 

Both of them include URLs, a Filter and Timestamp for easier discovery of the data and navigation between the elements. 

Smartlook-Devtools-Console

The Console part (as shown above) includes Logs, Errors, Warning, Info and Debug areas which you can use to review all the most important notifications from the JS console. Just like you’d see in the browsers. 

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 JavaScript default and custom errors here.

It is in the console part where these errors will be presented and accessible onward. 

Similarly, the Devtools’ Network part includes an overview of all assets that have been downloaded by the end user within their session. These are further grouped by Xhr transfers, JavaScript scripts, media and other assets downloads. 

Smartlook-Devtools-Network-hooks

As hinted above this Network part includes the downloaded assets duration timestamp with a neat graph bar visualization of those download times. This way, Smarltook users can if there’s a specific asset that failed to download or discover anomalies in their respective download times. 

Available today for all Power users  

Smartlook Devtools were built so our users can have a deeper, albeit slightly technical, insight to their user’s sessions. They’re perfect for delivering bug-free and flawless digital experiences.  

The Devtools have been released to our production environment today. But, they will be accessible only to Smartlook users with Power package, on demand. 

The demand aspect is only temporary as Network Hooks are in beta at the moment. We’d use this time and your feedback to fully optimize the tool and discover further improvements before releasing it to all projects by default. 

If you want to enable Smartlook Devtools for your projects, and you have an active Power subscription, please reach out to the team via email or intercom.

Discussion