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?
When you launch the extension, an extra window pops up and you find yourself on the “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.
If you’re interested in a particular tool, you can collapse the other blocks at any point, making the screen easier to read.
So far, so good. Let’s look at the gems hidden in the other screens.
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.
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.
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.
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!
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.
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.
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.
The Target screen shows Target data, plus Mbox traces.
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.
Marketing Cloud Visitor Service Screen
The Marketing Cloud Visitor Service screen shows requests made by the MCVID Service.
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.
15 thoughts on “Debugging 2017.07”
Does it work with Apps?
Don’t think so, no.
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 ?
I’m afraid I don’t know what the colleagues have on their roadmap. I would guess making the tool better for Adobe solutions would have priority.
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.
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.
Un- and reinstalling the extension works.
I’ll let you know if there’s an easier way.
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!
I presume “dig into these” implies “and write about them” 😉
It’s on my list.
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!
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.
I could see this add-on for Chrome but any idea if it is for Firefox and IE as well ?
Don’t think so, no.
Might be a fun project for someone? 🙂
Wish it filters all network traffic and not just traffic coming through the Chrome Browser. Great tool for Web Development.