Search code examples
google-tag-manager

How to debug JS code with breakpoints if the code is inserted via GTM

In GTM I have added a custom html:

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();

    ///////////////
    // Chat started
    function notifyFacebookAboutAboutChatStarted(content_category){
        fbq('track', 'Contact', {how: "chat_started", content_category: content_category}); // Breakpoint
    }

    function notifyAllSystemsAboutChatStarted(content_category){
        notifyFacebookAboutAboutChatStarted(content_category);
    }

    //////////////
    // Chat form submit
    function notifyFacebookAboutChatFormSubmit($element, content_category){
        fbq('track', 'Lead', {content_category: content_category});
    }

    function notifyAllSystemsAboutChatFormSubmit(content_category){
        notifyFacebookAboutChatFormSubmit($element=$element, content_category=content_category);
    }    


    // Event listeners

    Tawk_API.onChatStarted = function(data){notifyAllSystemsAboutChatStarted(content_category=content_category);};
    Tawk_API.onOfflineSubmit = function(data){notifyAllSystemsAboutChatFormSubmit(content_category=content_category);};
  
  
  
  
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/6131ae1fd6e7610a49b36846/1fel10b81';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

Please, don't pay much attention to this code because the question is not about it. It is just a piece of code to show what I usually put into GTM containers rather than to be analysed.

And I want to debug this JavaScript in Chrome. In other words I'd like to be able to stop at the breakpoint (marked in the code as // Breakpoint).

I mean in Chrome DevTools panel. Like this: enter image description here

But this is some code inserted without GTM. I open Sources tab and try to find my JavaScript addeb via GTM there.

enter image description here

Tawk is an online chat I have added via GTM. And it is definitely there as the icon of Tawk has appeared on the site.

So, I'd like to debug my JavaScript code by stopping at breakpoints. But I fail to find where to put those breakpoints. Whether it is possible at all? Or should I debug the code first outside GTM and then insert it inside GTM? But this is clumsy: if users report an error, I'd like to first analyse the problem without changing anything.

So, the question: how to debug JS code with breakpoints if the code is inserted via GTM?

Solution

  • If you put this in a Custom HTML tag it will be inserted as string and run through eval at runtime, so I doubt the debugger will even notice this is JavaScript.

    Basically your alternatives are

    • put it in an external file, which kind of defeats the purpose of GTM
    • rewrite the code as a custom template (which will require a lot of effort, but means that at least you can write tests inside GTM to make sure your code runs. However custom template code is transpiled, so it might be hard to identify in the debugger)

    I think your best choice is actually to test outside GTM first (which I admit is not a real test, since this means you do not test the configuration that will run in the end).