javascript - 如何找到负责效果的 jquery/javascript/modernizer 代码

Question

我正在学习网页设计，没有比重做其他工作更好的方法了。所以我正在阅读其他页面代码，但很难找到 jQuery、Javascript 或现代化工具或...负责该效果的代码。

我正在使用 firebug，也使用了 firequery，但问题是他们给我事件而不是代码和 DOM 大树，我什至不知道在哪里查看它。

我真的不关心触发了哪个事件，但我关心代码是如何编写的。如果我找到代码，那么我就可以理解事件是单击还是聚焦...

或者假设一个网站有一些 javascript 文件，链接到一个网站。当我加载网页时，我得到一个由 DOM 和外部/内部脚本组成的网页。当我看到一个很酷的效果并想阅读代码时，我运行 firebug，inspect element 来找到元素。之后不知道怎么办？我无法在脚本中搜索选择器或事件，因为该网站的开发人员可能使用了我正在搜索的不同选择器。有时我找到代码，但它太卡了，不是人类可读的形式，我不知道如何将代码更改为缩进和整洁的代码

当网站使用 jQuery 以外的其他 java 框架时，问题会变得更加严重。

找了很多，用了很多工具，都没找到有用的东西，请指点一下我学习web开发的路

编辑:--我找到了一种方法，但我相信外面应该有更好的方法首先在 chrome 中我检查元素以找到相应的元素，然后我右键单击并检查它上面的所有断点(如果它不起作用我对父元素做同样的事情)

在那之后我玩那个元素来触发函数并且它中断了

通常调用方法的函数在调用栈中是down

也适合阅读同样为了阅读脚本，我使用了 chrome 的 pretty-print ，我使用了一些在线 prettyfier，但其中大多数都有字符数限制，对于长脚本，谷歌首页结果都不够好。所以目前唯一好的选择是 chrome，有人有其他方法吗？

Answer 1

很难仅通过检查来了解如何做事，因为许多效果可能完全用 JavaScript 实现，这些效果可能很深，隐藏在源文件中。

您提到代码不是人类可读的形式，美化它可能会有所帮助: https://stackoverflow.com/a/6318092/1061602

大多数“视觉”效果应该能够从 CSS 中看到，例如JQuery Mobile 的按钮，可以看到不同的类是如何组合的，ui-shadow, ui-btn, ui-disabled etc

否则，您几乎只能搜索选择器。就个人而言，如果我正在学习，一次看太多代码可能会让人不知所措。此外，许多 UI 效果可能难以追踪。

我的建议是，也许更好的方法是尝试描述您需要的一种效果，然后在 Google 或 Stack Overflow 上搜索有关如何创建该效果的指导。

通常的文档来源将很有用:

http://www.w3schools.com/css3/default.asp

http://api.jquery.com/

祝您学习愉快!