如何使用开发人员工具查找Chrome中的按钮或元素运行的代码 [英] How to find what code is run by a button or element in Chrome using Developer Tools

问题描述

我正在使用Chrome和我自己的网站。

我从内部了解到的信息：

1 ）我有一个表单，人们可以通过单击此橙色图像按钮进行注册：

2 ），我对此进行了检查就是这样：
< img class = formSend src = images / botoninscribirse2.png>

3 ）在源代码顶部，有大量脚本源。我知道按钮调用了哪个按钮，因为我对其进行了编码：< script src = js / jquery2.js type = text / javascript>< / script>

4 ）在该文件中，您可以找到： $（。formSend）。click（function （）{...}）; ，这是由按钮（进行相当复杂的表单验证和提交）触发的，而我想要的是能够找到在任何网站上使用chrome开发工具。

如何找出元素在哪里调用？

听众选项卡不适用于我。因此，然后我尝试查找单击事件侦听器，这对我来说似乎是一个安全的选择，但是...那里没有 jquery2.js （我真的不知道代码是哪个文件，因此我会浪费时间检查所有这些...）：

我的 $（。formSend）。click（function（）{ ...}）; 文件中的 jquery2.js 函数不存在。

定期（但还有许多其他功能：）来快速测试我生锈的regex模式，并找出逐步regex调试器存在的问题。
如果您还没有流利的正则表达式，建议您开始使用可帮助您编写和可视化它们的网站，例如

解决方案2：视觉事件

并搜索 #envio 或任何您认为可以参加聚会的标签/类/ id，您可能会比以前更快

请注意，有时不仅有 img ，而且还堆积了很多元素，您可能不知道哪一个

如果您不了解这一点，请使用查看 Chrome的调试教程。

I'm using Chrome and my own website.

What I know from the inside:

1) I have a form where people sign up by clicking this orange image-button:

2) I inspect it, and this is all it is: <img class="formSend" src="images/botoninscribirse2.png">

3) At the top of the source code, there are tons of script sources. I know which one the button calls because I coded it: <script src="js/jquery2.js" type="text/javascript"></script>

4) Within that file, you could find: $(".formSend").click(function() { ... }); which is what is triggered by the button (to do a fairly complex form validation and submit) and what I want is to be able to find that using chrome dev tools on any website.

How can I find out where does the element call?

Listeners tab didn't work for me. So then I tried looking the click event listeners, which seemed like a safe bet to me but... there's no jquery2.js in there (and I wouldn't really know which file the code is so I'd waste time checking all these...):

My $(".formSend").click(function() { ... }); function within jquery2.js file is not there.

Jesse explains why:

"Finally, the reason why your function is not directly bound to the click event handler is because jQuery returns a function that gets bound. jQuery's function, in turn, goes through some abstraction layers and checks, and somewhere in there, it executes your function."

---

As suggested by some of you I've collected the methods that worked in one answer down below.

解决方案

Solution 1: Framework blackboxing

Works great, minimal setup and no third parties.

According to Chrome's documentation:

What happens when you blackbox a script?

Exceptions thrown from library code will not pause (if Pause on exceptions is enabled), Stepping into/out/over bypasses the library code, Event listener breakpoints don't break in library code, The debugger will not pause on any breakpoints set in library code. The end result is you are debugging your application code instead of third party resources.

Here's the updated workflow:

1. Pop open Chrome Developer Tools (F12 or ⌘+⌥+i), go to settings (upper right, or F1). Find a tab on the left called "Blackboxing"

2. This is where you put the RegEx pattern of the files you want Chrome to ignore while debugging. For example: jquery\..*\.js (glob pattern/human translation: jquery.*.js)
3. If you want to skip files with multiple patterns you can add them using the pipe character, |, like so: jquery\..*\.js|include\.postload\.js (which acts like an "or this pattern", so to speak. Or keep adding them with the "Add" button.
4. Now continue to Solution 3 described down below.

Bonus tip! I use Regex101 regularly (but there are many others: ) to quickly test my rusty regex patterns and find out where I'm wrong with the step-by-step regex debugger. If you are not yet "fluent" in Regular Expressions I recommend you start using sites that help you write and visualize them such as http://buildregex.com/ and https://www.debuggex.com/

You can also use the context menu when working in the Sources panel. When viewing a file, you can right-click in the editor and choose Blackbox Script. This will add the file to the list in the Settings panel:

Solution 2: Visual Event

It's an excellent tool to have:

Visual Event is an open-source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows:

• Which elements have events attached to them
• The type of events attached to an element
• The code that will be run with the event is triggered
• The source file and line number for where the attached function was defined (Webkit browsers and Opera only)

Solution 3: Debugging

You can pause the code when you click somewhere in the page, or when the DOM is modified... and other kinds of JS breakpoints that will be useful to know. You should apply blackboxing here to avoid a nightmare.

In this instance, I want to know what exactly goes on when I click the button.

1. Open Dev Tools -> Sources tab, and on the right find Event Listener Breakpoints:

2. Expand Mouse and select click

3. Now click the element (execution should pause), and you are now debugging the code. You can go through all code pressing F11 (which is Step in). Or go back a few jumps in the stack. There can be a ton of jumps

Solution 4: Fishing keywords

With Dev Tools activated, you can search the whole codebase (all code in all files) with ⌘+⌥+F or:

and searching #envio or whatever the tag/class/id you think starts the party and you may get somewhere faster than anticipated.

Be aware sometimes there's not only an img but lots of elements stacked, and you may not know which one triggers the code.

If this is a bit out of your knowledge, take a look at Chrome's tutorial on debugging.

这篇关于如何使用开发人员工具查找Chrome中的按钮或元素运行的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！