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

问题描述

我从里面知道：

1 ）我有一个表单，人们通过点击这个橙色的图像按钮来注册：

.stack.imgur.com / U2BoA.pngalt =在这里输入图片描述>

2 ）我检查它，全部是：
< img class =formSendsrc =images / botoninscribirse2.png>

3 ）在源代码的顶部，有大量的脚本源代码。
当然，我知道按钮调用哪一个，我编码它：< script src =js / jquery2.jstype =text / javascript >< / script>

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

我们如何找出元素调用的位置？

$ h
$ b

听众选项卡不适用于我

所以然后我试着寻找点击事件侦听器，这对我来说似乎是一个安全的赌注，但是......在那里没有 jquery2.js （并且我真的不知道哪个文件的代码是这样，我会浪费时间检查所有这些...）：

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

1. 打开Chrome开发者工具（ F12 或⌘ + ⌥ + i ）并转到设置（右上方或 F1 / li>
   
2. 就在那里，您会在左侧找到一个标签，名为 Blackboxing


3. 这就是您要避免通过的文件的 RegEx 模式的位置。例如： jquery \ .. * \.js （ human translation： jquery。*。js code>）


4. 如果您要跳过多个模式的文件，可以使用管道字符添加它们，如下所示： jquery\ .. * \.js | include\.postload\.js 。或者直接使用添加按钮添加它们。


5. 现在将下面描述的解决方案3 应用到
   
   

   
   

   更多相关信息： https://developer.chrome.com/devtools/docs/blackboxing

   
   
   

   奖金提示：我使用 Regex101 快速测试我的生锈的正则表达式模式，并找出我的错误与正则表达式分步调试器。当然还有
   。
   

   
   
   

   ---

   
   
   

   解决方案2很容易，但您需要安装扩展程序）

   
   
   

   Visual Event ：

   
   
   

   
   

   个人喜爱。它的功能非常好，但它是一个扩展，它不使用Chrome的开发工具。仅供参考。
   
   

   ---

   
   
   

   解决方案3（一种痛苦但容易的）

   
   
   
   
   

   1. 打开开发工具 - > Sources选项卡，并在右侧找到 Event
Listener Breakpoints ：

      
      
      

   
   

   2. 展开鼠标并点击...以及点击。

      现在点击元素（执行应该暂停），然后开始游戏：开始按 F11 （这是 Step >）遍历所有代码。请稍等，可能会出现跳跃。
   
   
   3. 可能会有许多脚本不需要/不需要拖动自己，所以将其合并与上面描述的方法1相同。
      
      
      $ hr
      $ b

      解决方案4（生存模式）

      
      
      

      我总是在 Ctr + Shift + F （所有来源的文字搜索）并搜索 #envio 或任何您认为启动聚会的标签/标识，阅读所有发现以尝试找出可以运行的代码，感觉一个失败者，并觉得有一个安全的方式，真正知道什么是由按钮触发。

      
      
      

      但请注意有时不仅有一个 img ，但是很多 divs 重叠，你甚至不知道是什么触发了代码。你可能不应该使用这种方法。

      
      

      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. Of course, I know which one the button calls, 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 we 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 down in his answer:

      "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."

      EDIT: I've collected all the methods this question arose in one answer down below as suggested by some of you.

      解决方案

      Here are some solutions:

      ---

      Solution 1 (works great, just a bit of set up but no third parties)

      Framework blackboxing:

      1. Pop open Chrome Developer Tools (F12 or ⌘+⌥+i) and go to settings (upper right, or F1)
      2. Right there you'll find a tab on the left called "Blackboxing"
      3. And this is where you put the RegEx pattern of the files you want to avoid passing through. For example: jquery\..*\.js (human translation: jquery.*.js)
      4. If you want to skip files with multiple patterns you can add them using the pipe character like so: jquery\..*\.js|include\.postload\.js. Or just keep adding them with the "Add" button.
      5. Now apply Solution 3 described down bellow.

      More about this: https://developer.chrome.com/devtools/docs/blackboxing

      Bonus tip: I use Regex101 to quickly test my rusty regex patterns and find out where I'm wrong with the regex step-by-step debugger. There are others of course.

      ---

      Solution 2 (works great and easy but you need to install an extension)

      Visual Event:

      Personal favourite. It works wonderfully, but it's an extension, it's not using Chrome's Developer Tools. Just FYI.

      ---

      Solution 3 (kind of painful but easy)

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

      2. Expand Mouse and click on... well, click.

      3. Now click the element (execution should pause) and here starts the game: just start pressing F11 (which is Step in) to go through all code. Sit tight, there can be a ton of jumps.
      4. There will probably be lots of scripts you don't want/need to drag yourself through so combine this with Method 1 described above.

      ---

      Solution 4 (survival mode)

      I'm always left with Ctr + Shift + F (text search across all sources) and searching #envio or whatever the tag/id you think starts the party, reading all findings to try figure out what code could be running, feeling a loser and feeling that there's got to be a safe way of really knowing WHAT is triggered by the button.

      But be aware sometimes there's not only an img but tons of divs overlapping, and you can't even know what triggers the code. You probably shouldn't have to use this method.

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