避免在 Chrome 开发者工具中单步执行 javascript 文件？

Avoid stepping through javascript file in Chrome Developer Tools?

提问by BumbleB2na

I am wondering, is there any way to omit a javascript file from Chrome Developer Tools debugger, so it will automatically skip over any function calls made to that script?

我想知道，有没有什么办法可以从 Chrome 开发者工具调试器中省略一个 javascript 文件，这样它就会自动跳过对该脚本进行的任何函数调用？

I ask because my projects often include large libraries such as jQuery. When I step through javascript in Chrome Developer Tools while debugging, I have to step through jQuery's lib every time I make a jQuery call in my script.

我问是因为我的项目通常包括大型库，例如 jQuery。当我在调试时在 Chrome 开发人员工具中单步执行 javascript 时，每次在我的脚本中进行 jQuery 调用时，我都必须单步执行 jQuery 的库。

I end up having to set breakpoints one line after every call to the jQuery object. It's the only way I have found to skip past and it's very annoying.

我最终不得不在每次调用 jQuery 对象后在一行设置断点。这是我发现跳过过去的唯一方法，这很烦人。

回答by IsmailS

UPDATE 2
There has been an improvement in user flow of this feature in latest versions of chrome. Please refer to https://developer.chrome.com/devtools/docs/blackboxing

更新 2
在最新版本的 chrome 中，此功能的用户流程有所改进。请参考https://developer.chrome.com/devtools/docs/blackboxing

UPDATE 1
Since Chrome version 38, you no longer have to enable Developer Tools experiments.

更新 1
自 Chrome 38 版起，您不再需要启用开发者工具实验。

Below details are only for history

以下详细信息仅供历史参考

This is possible now in chrome version 30+.

现在可以在 chrome 30+ 版本中做到这一点。

1. Enable "Enable Developer Tools experiments" from chrome://flags/#enable-devtools-experiments. (Yes, you need to type that where you type the URL)
2. Relaunch chrome
3. Click on settings icon in Chrome Developer Tools
4. Go to Experiments section. Notice the WARNING ;) and then tick Enable frameworks debugging support. (You also might want to try Show step-in candidates while debugging)
5. Now, close Chrome Dev Tools and again open it.
6. Click on settings icon in Chrome Developer Tools
7. In general section you will find "Skip stepping through sources with particular names". Tick that and provide regexfor the javascript file names which you want to skip stepping into.

1. 从chrome://flags/#enable-devtools-experiments. （是的，你需要在你输入 URL 的地方输入）
2. 重新启动 chrome
3. 单击 Chrome 开发者工具中的设置图标
4. 转到实验部分。注意 WARNING ;) 然后勾选Enable frameworks debugging support。（您可能也想尝试Show step-in candidates while debugging）
5. 现在，关闭 Chrome Dev Tools 并再次打开它。
6. 单击 Chrome 开发者工具中的设置图标
7. 在一般部分，您会找到“跳过具有特定名称的源”。勾选并为要跳过的 javascript 文件名提供正则表达式。

Source: Tips and Tricks: Ignoring library code while debugging in Chrome

来源：提示和技巧：在 Chrome 中调试时忽略库代码

回答by Buvy

iSid I would like to point out that as of Chrome 38 you no longer need to enable the devtools experiments. Instead if you go straight to the F12 developer tools -> settings -> general -> sources you will see the last item in there is manage framework blackboxing. The good part is you can setup each framework on it's own line or you can throw together a generic catch all pattern like (firebug|angular|knockout|jquery|bootstrap|modernizr|respond)

iSid 我想指出，从 Chrome 38 开始，您不再需要启用 devtools 实验。相反，如果您直接转到 F12 开发人员工具 -> 设置 -> 常规 -> 来源，您将看到其中的最后一项是管理框架黑盒。好的部分是您可以在自己的行上设置每个框架，或者您可以将通用的捕获所有模式放在一起，例如 (firebug|angular|knockout|jquery|bootstrap|modernizr|respond)

回答by FrenkyB

Things are a little bit different in the version 51.

版本 51 中的情况略有不同。

Press F12 then F1. Pick 'Blackboxing' from the menu on the left.

按 F12 然后按 F1。从左侧的菜单中选择“Blackboxing”。

回答by Roger

Under Chrome v68, while debugging on a .js file, use left click to blackbox script:

在 Chrome v68 下，调试 .js 文件时，使用左键单击黑盒脚本：

https://developer.chrome.com/devtools/docs/blackboxing

https://developer.chrome.com/devtools/docs/blackboxing

回答by Dmitry B.

The "Step Out" button can be used to quickly get you out of the JQuery code.

“Step Out”按钮可用于快速让您摆脱 JQuery 代码。