Debugging 2017.07

[screenshot]
~ Jan Exner

5 months ago I jokingly decided to put versions into the titles of articles about debugging. I seem to be wiser than I think I am…

This article is about the “Adobe Experience Cloud Debugger” Chrome extension, a replacement for a bunch of other debuggers and extensions, and for some, maybe even for Charles.

The extension is currently in beta, but it is at a point where you can use it in your daily work, so it is time for an article, right?

Summary Screen

When you launch the extension, an extra window pops up and you find yourself on the “Summary” screen.

[screenshot]
Adobe Experience Cloud Debugger Summary Screen
There is some navigation on top, and 6 blocks of content underneath.

If the page you just loaded contains any Adobe Experience Cloud tools, you’ll see data within those 6 blocks.

[screenshot]
Summary Screen with data
If you’re interested in a particular tool, you can collapse the other blocks at any point, making the screen easier to read.

[screenshot]
Summary Screen, partly collapsed
So far, so good. Let’s look at the gems hidden in the other screens.

Network Screen

This screen is probably the most useful. It shows you all requests that have been sent, and it does so across requests and pages. You can filter by solution, which allows you to only look at the cadence of — say — Analytics requests as they happen.

[screenshot]
Network Screen
My guess is that this screen will for some people make Charles obsolete.

If a value is too long to fit into the column, you can hover over it.

[screenshot]
Network Screen with popup

Tools Screen

The Tools screen brings useful stuff (sorry, I can’t find a better way of describing it), grouped by solution.

Currently, it contains tools for DTM and Target.

[screenshot]
Tools Screen
For DTM, it allows you to switch between debug on and off, staging or production code, and it can block DTM completely. It can also (and this is new) dynamically insert DTM into any page.

One more time, this goes straight into “need Charles for that” territory!

For Target, the tools allow you to toggle Mbox trace, Mbox debug, and Mbox disable. There is also a switch that will toggle Mbox highlight.

I am looking forward to seeing what other tools will be added over time!

Logs Screen

I’m not sure whether this is not ready, or if I’m just unable to use it, but for me, there is currently nothing on the logs screen.

Analytics Screen

The Analytics screen shows Analytics data that has been tracked. It allows me to download that data into Excel, and it has a “Link Account” feature.

[screenshot]
Analytics Screen
With an Analytics account linked, the Debugger is able to replace “prop5” with “Page Language” and so on, making it easier to read the data that is being sent.

Target Screen

The Target screen shows Target data, plus Mbox traces.

[screenshot]
Target Screen

Audience Manager Screen

I’ll have to update this post, since for now I have no data here.

Media Optimizer Screen

On the Media Optimizer screen, you’ll see what data Media Optimizer tracks.

[screenshot]
Media Optimizer Screen

Marketing Cloud Visitor Service Screen

The Marketing Cloud Visitor Service screen shows requests made by the MCVID Service.

[screenshot]
Marketing Cloud Visitor Service

Notes

The most important screen in the new debugger, in my opinion, is the Network screen, followed by the Tools screen for the very handy tools it offers.

For most of the Experience Cloud solutions, you see everything you need on the Network screen.

Being able to see the flow — in which orders things happen, is extremely useful. For me, this used to be one of the killer features in Charles.

Having written this on my work machine, a Surface Pro 4, I can only think that the debugger has been built to take advantage of huge screens, which I think is a big plus!

So go ahead, test the new debugger, and feel free to let me know what you think of it.

Published by Jan Exner

German expat living in Switzerland (formerly UK and France). Consultant and member of the Multi-Solutions Group at Adobe, working with the Digital Marketing Suite. Father of 4 girls.

15 thoughts on “Debugging 2017.07”

  2. Hi Jan, Thanks for heads up on this, this looks to be very useful.

    Any idea if we can see third party tags being fired on page ?

    Like

    Reply

  3. So….on the Tools screen I clicked to block DTM and I can’t figure out how to unblock it. My console is reading net::ERR_BLOCKED_BY_CLIENT for the satellite.js file adn the DTM option in the Tools area no longer opens. Does anyone have any ideas on how to unblock? I’ve since removed the extension and everything works fine now (satellite.js fires) but would love to use this feature within the extension.

    Like

    Reply

    1. Good question! I didn’t know what you meant until I reloaded a page this morning and now I have the same problem.

      There is an entry in the LocalStorage of the extension, but setting that to false or cleaning storage doesn’t seem to help.

      Stay tuned!

      Like

      Reply

  4. Jan, great overview! A ton of capabilities for mboxTrace were recently added that let you see why you aren’t qualifying for activities and how your profiles are changing. The toggle mechanism is a little different too. I suggest you dig into these features–you will like them!

    Like

    Reply

  5. Hi Jan,

    If your site is running Adobe Target – you’ll REALLY want to check out the mboxTrace tool. If you are logged in to the Experience Cloud in another Chrome Tab – and toggle the mboxTrace option, you can go back to the Target page and open the traces page. This will give you information about what tests you are in and what experience you are seeing, what tests you didn’t get in (and why not), and your before and after page view profile snaphshot – with all of the name/value pairs in the Target profile. Definitely worth investigating more!

    Like

    Reply

  6. Great tool, one thing I miss is the decode the s.products string as the defunct “adobe analytics debugger” extension used to.

    It makes difficult to debug when you have a big product list with event values and merchandised eVars.

    Like

    Reply

  8. Wish it filters all network traffic and not just traffic coming through the Chrome Browser. Great tool for Web Development.

    Like

    Reply
  9. Pingback: 2017 for Developers – Web Analytics for Developers

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.