Debugging dynamically added JavaScript

_eanilsen

16-12-2019

Hi.

 

Is there any way to add breakpoints so that I can step through the code in the dynamically loaded scripts coming from Adobe Launch? I have tried adding //# sourceURL=name_of_file.js, but it does not seem to be working.

 

Any help would be appreciated, thank you!

 

Kind regards,

Even A. Nilsen

 

View Entire Topic

thomas_amsler

17-12-2019

Not sure if I understand you correctly, but most browsers have some developer tools (F12), where you can select the loaded resources and add breakpoints to them. The ones from Chrome beeing the best and the ones from IE/Edge the worst. It is easier if you include the non minified launch script in your code for debugging purposes, which then also loads additional scripts in the non minified version if needed. But also the minified ones can be reformatted in most developer tools with some button like "{ }" to be able to set proper breakpoints. Just the variable names are "obfuscated".

I am sorry for the unclear question, let me clarify.

My problem is that when I try to access the scripts using the developers console (F12) they are not visible for debugging. It is a result of Adobe Launch loading the scripts/rules as dynamic resources, meaning they do not show up as files but rather only exist under runtime. So I am not able to place any breakpoints to the code.

 

Where can I include the non-minified version of the script and how can I place breakpoints in the rules even in the minified code with the obfuscated variables? I cannot seem to find the code I have written in any of the source files in the browser.

Still not sure I understand you correctly, sorry. If I open the developer console I can see all scripts from Adobe and can debug them. Your custom code can be found in a script called: launch-HASH.min.js whereas the HASH part is dependent on your company, property and environment and for development and staging the name is added after the hash, e.g. lanuch-HASH-development.min.js
But can you see the different rules in that code or just references to them? Let's say I want to debug one specific rule, how can I do that? I come from a Tealium iQ background where all the rules were compiled to a .js file that I could see in the sources tab, but in Launch I cannot seem to find the actual rule code that runs.

If you still can't find the source of your script, try another browser if possible. I sometimes also had a problem with a custom Firefox, whereas Chrome was fine. Then within the code, you should be able to find the rule by its name.

Each Rule is a JavaScript object starting with it's id and name, followed by events, conditions and actions arrays.

{
"id": "GENERATED_ID",
"name": "RULE_NAME",
"events": [],

"conditions": [],

"actions": []

}

Within the actions array, you can see the actions you added, but you can only really debug the ones having custom code sections. But to test if a rule get's actually called you can add some dummy code to set a breakpoint. But only to check if it gets called there are better tools, like OmniBug

I think what he's trying to ask is how can you set a breakpoint when the content is all slammed together under actions->settings->source? Or at least that's what I'm asking 😛

 

It looks like the answer to our question is at https://experienceleaguecommunities.adobe.com/t5/Adobe-Experience-Platform-Launch/Option-to-add-sour...