我正在使用Chrome浏览器和我自己的网站。
1)我有一个表格,人们通过点击这个橙色的图像按钮进行注册。
在此输入图片描述]1 !
2)我检查了一下,结果是这样的。
<img class="formSend" src="images/botoninscribirse2.png" >
3) 在源代码的顶部,有大量的脚本源。我知道这个按钮调用的是哪一个,因为是我编的。<script src="js/jquery2.js" type="text/javascript"></script>
4) 在该文件中,你可以找到。$(".formSend").click(function() { ...});
这是由按钮触发的(做一个相当复杂的表单验证和提交),我想要的是能够在任何网站上使用chrome开发工具找到这个。
Listeners标签对我不起作用。所以我试着寻找点击事件监听器,这对我来说似乎是一个安全的赌注,但是......那里没有jquery2.js
(而且我也不知道代码是哪个文件,所以我会浪费时间检查所有这些......)。
我的$(".formSend").click(function() { ...});
在jquery2.js
文件中的函数不存在。
Jesse 解释了***的原因。
*"最后,你的函数没有直接绑定到点击事件处理程序的原因是jQuery返回一个被绑定的函数。jQuery的函数,反过来,通过一些抽象层和检查,在那里的某个地方,它执行你的函数。
正如你们中的一些人所建议的,我已经收集了有效的方法在下面的一个答案中。
Alexander Pavlov'的回答得到最接近你想要的东西。
由于jQuery的抽象性和功能的广泛性,必须跳过很多的圈套才能进入到事件的实质。我已经设置了这个[jsFiddle](
)来演示工作。你在这个问题上很接近。
1.打开Chrome开发工具(F12),并进入 "来源 "选项卡。 2.向下钻到鼠标->点击 [][1) <小>(点击放大)</小>。
Chrome开发工具将暂停脚本的执行,并向你展示这个美丽的小型化代码的纠缠。
![Chrome Dev Tools暂停了脚本的执行][2] 。 <小>(点击放大)</小>。
现在,这里的诀窍是不要得意忘形地按键,并留意屏幕上的情况。
1.按F11键(步入),直到出现所需的源代码 2.源代码终于到达
[!期望的事件处理程序/功能][3]
我没有确切的答案,也没有解释为什么jQuery会有这么多的抽象层--我只能说,这是因为它的工作是把它的使用从执行代码的浏览器中抽象出来。
这里有一个[jsFiddle](http://jsfiddle.net/PEw7W/)的jQuery的调试版本(即,没有被最小化)。当你看第一个(非minified)断点上的代码,你可以看到代码正在处理许多事情。
// ...snip...
if ( !(eventHandle = elemData.handle) ) {
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply( elem, arguments ) : undefined;
};
}
// ...snip...
我认为你在尝试时错过了"执行暂停,我逐行跳转",原因是你可能使用了"Step Over"函数,而不是Step In。这里有一个StackOverflow答案解释了其中的区别。
最后,为什么你的函数不直接绑定到点击事件处理程序的原因是jQuery返回一个被绑定的函数。jQuery的函数又经过一些抽象层和检查,*在那里,它执行你的函数。
框架黑箱作业
很好用,设置最少,没有第三方。
根据Chrome'的文档。
当你对脚本进行黑盒处理时会发生什么? 当你使用黑盒脚本时会发生什么? *当你使用黑盒脚本时会发生什么? 从库代码中抛出的异常不会暂停(如果暂停在 >.异常启用),步入/步出/步过绕过库。 启用异常),步入/步出/步入库会绕过库 >.代码,事件监听器断点不在库代码中断裂。 代码,事件监听器断点在库代码中不会被破坏。 >.调试器不会在库代码中设置的断点上暂停。 调试器不会在库代码中设置的任何断点上暂停。 在库代码中设置的
最终的结果是你正在调试你的应用程序代码,而不是第三人。
方资源。
[![在此输入图片描述][2]][2] 。
jquery.\.*/.js
(glob pattern/human translation:
jquery.*.js
)如果你想跳过带有多个模式的文件,你可以使用管道字符|
来添加它们,像这样。
jquery\...*\.js|include\.postload\.js
(它的作用就像一个"或这个模式",可以说。
或者用"Add"继续添加它们。
按钮来添加。
现在继续下面描述的方案3。
附加提示!我经常使用[Regex101][3](但还有很多其他的。 )来快速测试我生疏的regex模式,并通过逐步的regex调试器找出我的错误所在。
如果你还没有"流利"。 的正则表达式,我建议你开始使用帮助你编写和可视化它们的网站,如http://buildregex.com/ 和 https://www.debuggex.com/。
在Sources面板中工作时,你也可以使用上下文菜单。 当查看文件时,你可以在编辑器中右击并选择黑盒脚本。 这将把文件添加到设置面板的列表中。
[![在此输入图像描述][4]][4]
视觉事件
![在此输入图片描述][5]
它'是一个很好的工具][6]。
Visual Event是一个开放源码的Javascript书签,它提供了以下功能
调试附加在DOM上的事件信息。
元素。 视觉事件显示。 视觉事件显示:>
哪些元素有事件附加到它们上面
附加在元素上的事件类型
将与事件一起运行的代码会被触发。
定义附加函数的源文件和行号(仅限Webkit浏览器和Opera)。
调试
当你在页面中某处点击时,或者DOM被修改时,可以暂停代码...... 以及[其他种类的JS断点][7],这些都会很有用。 你应该在这里应用黑盒,以避免一场噩梦。
在这个例子中,我想知道当我点击按钮时到底发生了什么。
Event 监听者断点
:![在此输入图像描述][8]
现在点击元素(执行应该暂停),你现在正在调试代码。 你可以按F11</kbd>来查看所有代码。 (这是步进)。 或者回到堆栈中的几个跳转。 可以有吨的跳转。
钓鱼关键词
激活Dev Tools后,可以用⌘+⌥+F</kbd>搜索整个代码库(所有文件中的所有代码)。 或。
[![在此输入图片描述][9]][9]。
并搜索#envio
或任何你认为开始聚会的标签/类/id,你可能会得到比预期更快的地方。
请注意,有时不仅有一个img
,还有很多元素堆叠,你可能不知道哪个元素会触发代码。
<br>。
如果这有点超出你的知识范围,可以看看【Chrome'的调试教程】[10]。
1:
[2]: https://i.stack.imgur.com/Oo3ZQ.png [3]: http://regex101.com/ [4]: https://i.stack.imgur.com/ETQLa.png [5]: [5]:http://i.stack.imgur.com/rIt2c.png [6]: https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim [7]: https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints [8]: http://i.stack.imgur.com/bSXK9.png [9]: https://i.stack.imgur.com/OMjCq.png [10]: https://developers.google.com/web/tools/chrome-devtools/javascript
你可以使用[findHandlersJS](https://github.com/ruidfigueiredo/findHandlersJS)
你可以通过在chrome控制台做找到处理程序。
findEventHandlers("click", "img.envio")
。
你会在chrome的控制台中得到以下信息。
本方案需要用到【jQuery'的数据方法】[1]。
运行$._data($(".example").get(0), "events")
。
钻研输出,找到需要的事件处理程序。
右键单击"handler" 并选择"显示函数定义"。
代码将显示在Sources标签中
$._data()
只是访问jQuery'的数据方法。
一个更可读的替代方案可能是jQuery._data()
。
由[这个SO回答][2],很有意思。
&gt.jQuery._data()。 从jQuery 1.8开始,事件数据不再是...。
可从"公共API"。 的数据。 阅读【本篇jQuery博文】[3]。 >.你现在应该用这个来代替:"公共API"来获取数据。 你现在应该用这个来代替。 你现在应该用这个来代替:>
jQuery._data( elem, "events" );
elem应该是一个HTML元素,而不是一个jQuery对象,或选择器。 jQuery对象,或选择器。 ,或选择器。 请注意,这是一个内部的,'private' 结构,并且
不应该被修改。 仅用于调试目的。 &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; &gt; 在旧版本的jQuery中,你可能需要使用旧的方法。 在旧版本的jQuery中,你可能不得不使用旧的方法。 这就是。
>.jQuery( elem ).data( "events";),即:>。
jQuery( elem ).data( "events" );
一个版本不可知的jQuery应该是
(jQuery._data || jQuery.data)(elem, 'events');
。
[1]: https://api.jquery.com/jquery.data/ [2]: https://stackoverflow.com/a/2518441/2495341 [3]: http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/