Don't have one? Create one ↗
Debugging & QA

Lesson 4 of 7

Console, Elements & Application

Three more DevTools panels earn their place in a tagger's toolkit.

Console

  • Type dataLayer to dump every push on the page.
  • Read errors your tags or the site throw.
  • Test a selector: document.querySelector('.x').

Elements

  • Inspect an element to find a stable selector or attribute.
  • Right-click → Copy → Copy selector (then simplify it).
  • Confirm the id/data-attribute your trigger relies on exists.
// In the Console:
dataLayer                       // the whole array of pushes
JSON.stringify(dataLayer, null, 2)
document.querySelectorAll('.add-to-cart').length  // does my selector match?

Application → Storage

The Application tab shows cookies and local/session storage. Use it to confirm a first-party cookie was written (and its expiry), to inspect _ga, or to verify a value you stashed in localStorage persists across pages.

Key takeaway

Console dumps the dataLayer and tests selectors; Elements finds reliable hooks; Application verifies cookies and storage. Together they cover the "is the data even there?" questions.