When the browser loads the HTML source it retrieves from the site’s web server, it renders it into a dynamic tree model, accessible via JavaScript. The element inspector lets you analyze the DOM (Document Object Model) of the page. It’s possible the actual actions are (slightly) different in other browsers. Note! This section uses mainly Chrome’s developer tools in examples.
#NETWORK INSPECTOR TOOLS HOW TO#
In this section, we’ll walk through these different tools with more detail, so that you’ll have a better understanding of how to use them to unravel some of the more complicated debugging cases you run into. Instrumental for understanding why some trackers might not be able to persist data consistently. The application storage, which lets you investigate the browser storage (cookies, localStorage, etc.) utilized on the current page (or embedded frames). Great for identifying mismatches between what you expected the JavaScript file to contain vs. The sources browser, which lets you browse through the JavaScript resources loaded on the current page (or embedded frames). Vital for recognizing issues with the JavaScript implementations of your analytics scripts.
#NETWORK INSPECTOR TOOLS CODE#
The JavaScript console, which lets you run JavaScript code in the context of the current page (or embedded frame). This is one of the most important tools for you, as it will tell you the truth about what is actually sent from the user’s browser. The network debugger, which lets you inspect and analyze outgoing HTTP requests sent from the page (or embedded frames). This is particularly useful for inspecting injected tracking scripts and custom HTML elements added by tag management solutions. The element inspector, which lets you look at the dynamic representation of the web page ( Document Object Model).
The most useful tools we’ll focus on are: Note that on Safari, you’ll want to open Safari -> Preferences -> Advanced and check the button next to Show Develop menu in menu bar.Īll of the browsers above utilize a similar set of developer tools with just small differences in the UI and the chosen semantics.
The image above lists the keyboard shortcuts for opening the developer tools in various browsers and operating systems. Your best friend in debugging issues with your web analytics and tag management systems in the web browser are the browsers’ own developer tools.ĭeveloper tools are a suite of utilities that you can use to investigate various different aspects of the dynamic web page the user is inspecting. Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava into your email inbox! However, the guide’s topics can be extended to any web analytics tools and tag management solutions out there, because the use cases are universal. In the guide, we’ll use Google Analytics 4 and Google Tag Manager as examples. But most of all we’re going to use browsers’ own developer tools, as they are always the best source of truth for anything that happens within the browser window. There are plenty of excellent browser extensions for helping you debug, and we’ll discuss these in the guide, too. One of the key skills for anyone working with web analytics and tag management is understanding how to identify where things went wrong, why they went wrong, and ideally how to fix them.
0 kommentar(er)
