Remember when I wrote an Ode to Charles & Map Local?
At the time, I wasn’t using DTM a lot. Map Local was the top feature I needed, allowing me to test changes I made to an
s_code.js file on a live site without causing any harm to innocent bystanders.
These days, I use DTM a lot, and the testing is built-in, using the Switch plugin.
But Charles hasn’t outlived its usefulness, oh no! It has one more amazing trick up its sleeve, which Andreas Kaufmann pointed out to me a couple of days ago — “Replace”
When do I need it?
Recently, I have worked with a lot of clients in the financial services industry in Switzerland. They have some pretty stringent expectations and rules on what data can go outside the country, to put it mildly. If you have never discussed privacy laws with a client, don’t start in Switzerland!
They also are very strict with the security of their sites.
assets.adobedtm.com host in the header of your pages.
Consequently, the usual setup includes some process to download the JS (DTM calls that “Library Download”), have someone sign it off, then put it live.
Now that puts me in an awkward position.
When I change something in DTM, it might take time to actually end up on the site, meaning there is no way I can test it!
Charles’ “Replace” feature is exactly what I need!
How do I do it?
That means you could build a test page referencing the hosted DTM library and test your modifications there.
Good, but we can do better.
Charles comes with a mechanism that allows you to replace stuff. Any kind of stuff.
Here is how I use that.
Let’s say we have a page that loads DTM from a local copy of the library, like so:
The only thing I would have to change to be able to use the library directly from DTM, would be to change that to:
I want to do that while the page zips through the Interwebs, or at least before it arrives in the browser. Charles, being a proxy, sounds like a good place to do the substitution.
So, launch Charles, then hit CTRL-SHIFT-E (or whatever you weird Apple people have to press).
You’ll see the “Rewrite Settings” dialog, in which you can setup rewrite rules.
What those rules can do is to replace any part of the HTTP traffic with anything you want.
I use it to replace the line in the HTML page that loads DTM from the customer’s server with the code that loads it straight from
And here’s your step-by-step guide on how to make such a rule.
Step 1 — CTRL-SHIFT-E
Step 2 — tick the “Enable Rewrite” box
Step 3 — hit the “Add” button on the left to create a new Rewrite Set
Step 4 — give your set a name (preferably a better one than mine)
Step 5 — add a location (click the “Add” button underneath the upper empty box)
Step 6 — specify your location. Host and path are the minimum, wildcards are ok.
Step 7 — add a rule (click the “Add” button underneath the lower empty box)
Now this screen can probably be a bit intimidating at first. Or even at the 10th or 1000th time, so let me walk you through it.
Step 8 — select the “Type”.
We want to replace some stuff inside the HTML, so we choose “Body”.
Step 9 — untick “Request” and tick “Response” in the “Where” box.
We want to modify the HTML that is sent back to the browser, so that must be the response.
Step 10 — find the line of code in your page that loads DTM from the local server, copy it.
Step 11 — copy that line into the “Value” field in the “Match” box
Step 12 — in DTM, copy the “header code” (the code that you would usually put into your page)
Step 13 — paste that into the “Value” field in the “Replace” box
Step 14 — hit “Ok” to get back to your set
Step 15 — hit “Ok” again to dismiss the dialog
And you’re done!
From now on, the pages on our location will come back into our browser with the line loading DTM pointing to the live and direct version of DTM’s code.
You can temporarily switch sets off, they have tick boxes.
You can use this feature for all sorts of other things, too. Modify URLs, parameters, header values, cookies, … anything you can think of, really.
And the absolute kicker: you can export sets, hand them to colleagues or clients, and they can import them into their version of Charles and immediately start using them!
How’s that for a consultants tool?
10 thoughts on “Charles’ “Replace” is a Winner!”
Quick useful tip: If you want to do this on a HTTPS website, you need to go to “Proxy > SSL Proxying Settings” and add the domain with 443 port into the list. And then visit the site and allow the exception to use the invalid certificate.
Another caveat is when the SSL site also uses HSTS (https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security) – this will block the Charles’ attempt to substitute the SSL certificate if you were on the site previously and already had a valid one. If you want to bypass that, you need to go to chrome://net-internals/#hsts in your Google Chrome and delete the domain you want to play with.
Simply awesome 😉
Alternatively, you could also use the “Requestly” Chrome add-on, to replace the local path to the Akamai one in the DTM request. Very handy!
As always, you’re an absolute legend.
Thanks Josh, you’re very kind!
LikeLiked by 1 person