如何找出一些javascript组件的工作原理？

Question

我刚看到一个非常有趣的user interface widget。这个小部件解释了Twilio SMS Api的工作原理。当用户点击一个数字时，图像会发生微小的变化。

我想了解这个小部件是如何工作的。我应该用什么工具来学习它？您将如何尝试找出此小部件的工作机制？

Answer 1

在chrome或safari中使用webinspector（ctrl + shift + i或ctrl + alt + i）。或者使用firebug，它是firefox的插件（我的工具）。

从那里开始;使用检查器工具选择元素/小部件。你会看到html结构。与小部件一起玩，看看html是如何变化的。查找DOM选项卡，看看有哪些更改。查看scripts / ressources标记，看看是否可以识别执行此功能的脚本。如果没有，尝试在代码的某些部分设置断点，您认为可能会起作用..

这个过程可能很长很难或有时很容易。真的取决于小部件和网站的组合方式..