在前端开发中，经常使用 jQuery 这个流行的 JavaScript 库。但有时候我们在调试代码时会遇到一些麻烦，特别是当使用 jQuery 的时候。因为 jQuery 是一个非常大的库，如果我们在调试代码时需要步进执行，它会极大地干扰我们的调试过程。那么我们该如何让浏览器脚本调试器忽略 jQuery 呢？
使用 Source Map
一种解决方法是使用 Source Map。Source Map 可以让我们在浏览器中调试 minified 或者 compiled 的代码，同时能够还原出原始的未压缩的代码。
假设我们有一个 index.html 文件，其中引入了一个压缩后的 jQuery.min.js 文件：
--------- -----
------
------
------------- ----- ------------
-------
------
------- -----------------------------
------- ----------------------
-------
-------当我们在浏览器中打开这个页面并使用 Chrome 开发者工具进行调试时，我们可以在 Sources 面板中看到 jQuery.min.js 的源代码。但是这些源代码显然是经过压缩的，很难直接阅读和调试。
使用 Source Map 可以解决这个问题。我们可以为 jQuery.min.js 文件生成一个对应的 Source Map 文件，将其与压缩后的文件一起交给浏览器。当浏览器加载 jQuery.min.js 时，会自动读取 Source Map 文件并还原出原始的未压缩的代码。
要为 jQuery.min.js 生成 Source Map 文件，我们需要使用 uglify-js 这个 JavaScript 压缩工具：
- -------- --------- ---------- -------- ------------ ----------------- -------- -------------
这个命令会把 jquery.js 压缩成 jquery.min.js，并同时生成一个对应的 Source Map 文件 jquery.min.js.map。
接下来我们需要在 index.html 中引入 Source Map 文件：
--------- -----
------
------
------------- ----- ------------
-------
------
------- -----------------------------
------- ----------------------
------- ---------------------------------
-------
-------现在我们再次打开页面并使用 Chrome 开发者工具进行调试时，我们可以在 Sources 面板中看到 jQuery.min.js 的源代码，这些源代码已经被还原成了未压缩的形式。
使用条件断点
另一种解决方法是使用条件断点。当我们想要在特定条件下暂停代码执行时，可以使用条件断点来达到这个目的。
假设我们有以下一段代码：
-------- ------------- - -- --- --------------------- -- --- - ---------------------------- - -- --- -------------- -- --- ---
当我们在浏览器中打开页面并使用 Chrome 开发者工具进行调试时，我们可以在 Sources 面板中看到所有可用的 JavaScript 文件，包括 jQuery.min.js 和 app.js。
如果我们想在执行 doSomething 函数时暂停代码执行，可以在该函数第一行设置一个条件断点：
在弹出的对话框中输入条件 doSomething.toString().indexOf("jQuery") !== -1，表示只有当 doSomething 函数的源代码中包
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/12690