☰

如何为 JavaScript 文件设置断点

tag-icon • tag-icon javascript developer-tools
如何为 JavaScript 文件设置断点

我试图了解带有一些 JavaScript 代码的网页是如何工作的，但即使我在开发工具中添加了断点，我也看不到会发生什么。

在 html 部分，我看到脚本的声明类似于type="text/htmlpreview"和不像type="text/javascript"

    <!-- javascript
         (Placed at the bottom so the DOM loads faster) -->
    <script type="text/htmlpreview" src="assets/js/jquery.min.js"></script>
    <script type="text/htmlpreview" src="assets/js/bootstrap.min.js"></script>
    <script type="text/htmlpreview" src="../sjme.js"></script>
    <script type="text/htmlpreview" src="assets/js/mmp.js"></script>

在 Sources（在 Dev Tools 内）中，我看到一个名为htmlpreview.js但不包含任何上述声明的脚本的文件夹（例如 sjme.js 或 mmp.js）。

如何在句子内声明的 javascript 文件中设置断点<script>..</script>？以便能够看到每次触发了哪些函数。

更新

这是地点我想看看当点击标签“简单”、“中等”、“困难”等时，或者当点击按钮“解决”、“候选人”时，会触发哪些功能

答案1

您所看到的是一种“代理”，仅以纯 JavaScript 实现。您正在访问https://htmlpreview.github.io/?https://github.com/robatron/sudoku.js/blob/master/demo/index.html。显示的页面来自robatron/sudoku.js存储库，但代理应用程序由 提供服务https://htmlpreview.github.io。如果您尝试assets/js/jquery.min.js从此站点加载，则会失败。

代理应用程序会像这样转换 HTML，以阻止浏览器实际处理脚本。相反，它会从正确的 URL 加载脚本本身，并将其内联添加到标签中<script>。这也是为什么你不会看到单独的脚本文件，它们都是（实际上）内联的。不幸的是，至少在 Firefox 中，内联脚本不会显示在开发人员工具的调试器部分中。在 Chrome 中，它们会显示，给予适当的注释. 代理脚本不会生成该内容。

你最好的选择就是不是使用https://htmlpreview.github.io/。相反，您应该下载它指向的内容（https://github.com/robatron/sudoku.js/blob/master/demo/index.html）或者它指向的整个存储库。

相关内容