如果通过GTM插入代码，如何使用断点调试JS代码

Question

在 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代码？

Answer 1

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

基本上你的选择是

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

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

如果通过GTM插入代码，如何使用断点调试JS代码

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

google-tag-manager