Debugging 2017.07

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.

7 thoughts on “Debugging 2017.07

  1. Rahul

    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

  2. aioun

    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

    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

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s