时间戳

首页 > 解决方案 > 如果代码是通过 GTM 插入的，如何使用断点调试 JS 代码

google-tag-manager - 如果代码是通过 GTM 插入的，如何使用断点调试 JS 代码

问题描述

在 GTM 中，我添加了一个自定义 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-->

请不要太在意这段代码，因为问题不在于它。这只是一段代码，用于显示我通常放入 GTM 容器中的内容，而不是进行分析。

我想在 Chrome 中调试这个 JavaScript。换句话说，我希望能够在断点处停止（在代码中标记为 // Breakpoint）。

我的意思是在 Chrome DevTools 面板中。像这样： 在此处输入图像描述

但这是在没有 GTM 的情况下插入的一些代码。我打开 Sources 选项卡并尝试在那里通过 GTM 找到我的 JavaScript addeb。

在此处输入图像描述

Tawk 是我通过 GTM 添加的在线聊天。当 Tawk 的图标出现在网站上时，它肯定就在那里。

所以，我想通过在断点处停止来调试我的 JavaScript 代码。但是我找不到在哪里放置这些断点。是否有可能？或者我应该先在 GTM 之外调试代码，然后将其插入 GTM 中？但这很笨拙：如果用户报告错误，我想先分析问题而不更改任何内容。

那么，问题来了：如果代码是通过 GTM 插入的，如何使用断点调试 JS 代码？

标签： google-tag-manager

解决方案

如果你把它放在自定义 HTML 标记中，它将作为字符串插入并在运行时通过 eval 运行，所以我怀疑调试器甚至会注意到这是 JavaScript。

基本上你的选择是

  • 把它放在一个外部文件中，这违背了 GTM 的目的
  • 将代码重写为自定义模板（这将需要很多努力，但这意味着至少您可以在 GTM 中编写测试以确保您的代码运行。但是自定义模板代码被转译，因此在调试器）

我认为您最好的选择实际上是首先在 GTM 之外进行测试（我承认这不是真正的测试，因为这意味着您不测试最终将运行的配置）。

推荐阅读