如何为type="text/htmlpreview"声明的JavaScript文件设置断点并追踪触发函数

嘿，我完全懂你遇到的困扰——这种非标准的type="text/htmlpreview"脚本标签，浏览器根本不会默认把它当作JavaScript执行，所以DevTools自然找不到这些脚本文件。页面里那个htmlpreview.js肯定是幕后推手，帮你悄悄加载并执行了这些脚本。下面给你几个实用的解决思路：

第一步：先找到加载脚本的核心逻辑 #

打开DevTools的Sources面板，找到那个htmlpreview.js文件，仔细捋一遍它的代码。它大概率是这么操作的：

• 遍历页面上所有type="text/htmlpreview"的script标签
• 读取这些标签的src属性，要么动态创建标准的type="text/javascript"脚本标签来加载，要么直接fetch脚本内容后用eval执行

方案一：追踪动态加载的脚本 #

如果htmlpreview.js是通过创建新script标签来加载的：

1. 在htmlpreview.js里找到创建新script标签的代码位置，给它加个断点
2. 刷新页面，当断点触发时，你能看到新创建的script标签的src地址
3. 等这个脚本加载完成后，就能在Sources面板的文件列表里找到它（比如sjme.js、mmp.js），这时候就可以正常设置断点了

另外，你也可以用DevTools的XHR/fetch断点：

• 在Sources面板的XHR/fetch断点区域，点击“添加断点”，输入脚本文件名的关键词（比如sjme.js）
• 刷新页面，当脚本被请求时断点会触发，之后就能在Sources里找到对应的文件

方案二：处理eval执行的脚本 #

如果htmlpreview.js是直接fetch内容然后用eval执行的，脚本不会出现在Sources的文件列表里，这时候可以这么做：

1. 打开DevTools调试器的“暂停在异常处”按钮（就是那个带感叹号的停止图标），勾选“捕获所有异常”
2. 刷新页面，当脚本执行到异常（或者你可以手动在代码里加个debugger语句）时，会进入调试状态，这时候就能看到eval里的代码，直接在里面设置断点
3. 或者，你可以直接在控制台手动重新加载这些脚本，把它们改成标准类型：

   document.querySelectorAll('script[type="text/htmlpreview"]').forEach(script => {
     const newScript = document.createElement('script');
     newScript.src = script.src;
     document.body.appendChild(newScript);
   });
   

   执行这段代码后，这些脚本就会以标准方式加载，出现在Sources面板里，就能正常断点了

针对按钮/标签的函数追踪（Easy/Medium/Hard、Solve/Candidates） #

除了上面的方法，还有更直接的方式追踪点击触发的函数：

• 打开元素面板，找到你要追踪的标签或按钮（比如“Easy”标签），右键选择“检查”
• 在元素上再次右键，选择Break on -> Click，这样点击这个元素时会直接触发断点
• 此时调试器的调用栈里会显示触发的函数，你顺着调用栈就能找到对应的脚本文件和函数位置，直接设置断点就行
• 你也可以用控制台的monitorEvents工具监听点击：

  // 比如监听Easy标签的点击事件
  monitorEvents(document.querySelector('label[for="easy"]'), 'click');
  

  点击后控制台会输出详细的事件信息，从中能找到对应的处理函数

备注：内容来源于stack exchange，提问作者Rasec Malkic