Sometimes QA can be very challenging. For example, if a value isn’t populating, it can be difficult to figure out the reason. Having various tools at your disposal can help you get to the root of the matter more quickly. The Chrome developer tools console can be very helpful with this. Developers can send various data points to the console output to expose event details that may be helpful. They may send details about a successful query or an error generated by user input. Additionally, you can execute your own code directly in the console to interact with the page. This is the feature that we utilize for QA.

To access the Chrome developer tools console, you need to be using the Chrome browser. In the menu, go to More Tools > Developer Tools. The keyboard shortcut is Ctrl-Shift-I. Go to the Console tab. There are a few helpful things to note.

  • You can clear the console by clicking this icon: console-clear
  • You can filter console output using the filter.  console-filter
  • The console gear icon console-gear-settings opens settings that allow you to preserve the output from page to page or clear it with every page load. console-preserve-log  You may have to expand the console for the gear to appear. You may find it useful to have the output preserved and use the clear feature before performing another action that you want to observe the output for.

This script will allow you to inspect the contents of a specific data layer. Insert the name of your data layer object in place of dataLayer.

console.log(JSON.stringify(dataLayer,4,’ ‘))

If you are expecting a value to be passed from something on the page, you can use jQuery with CSS selectors to check which values are available. This jQuery will return the text of the CSS selector set in the CSS_Selector value.

$(‘CSS_Selector’).text()

This is a good way to get some initial observations on the behavior of your data. To get deeper insights from the console feature, you may find it beneficial to learn more about jQuery and Javascript with CSS selectors.