如何找出某些 javascript 组件的工作原理？
我刚刚看到一个非常有趣的用户界面小部件。此小部件解释了 Twilio SMS Api 的工作原理。当用户单击一个数字时，图像会发生微小的变化。
我想了解这个小部件的工作原理。我应该使用什么工具来学习它？您将如何尝试找出这个小部件的工作机制？
I have just seen a very interesting user interface widget. This widget explains how Twilio SMS Api works. When the user clicks a number there occurs a small change in the image.
I would like to learn how this widget works. What tools should I use to learn it? How would you try to find out the working mechanism of this widget?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在 chrome 或 safari 中使用 webinspector（ctrl+shift+i 或 ctrl+alt+i）。或者使用 firebug，它是 firefox（我的工具）的插件。
从那里；使用检查器工具选择元素/小部件。您将看到 html 结构。玩一下这个小部件，看看 html 是如何变化的。查找 DOM 选项卡并查看那里发生了什么变化。查看脚本/资源标签，看看您是否可以识别执行此功能的脚本。如果没有，请尝试在您认为可以达到效果的部分代码中设置断点。
这个过程可能漫长而困难，有时也很容易。确实取决于小部件和网站的组合方式。
use the webinspector in chrome or safari (ctrl+shift+i or ctrl+alt+i). or use firebug, which is an addon for firefox (my tool).
from there; select the element/widget with the inspector tool. You'll see the html structure. Play arround with the widget and see how the html changes. Look for the DOM tab and see what changes there. Look at the scripts/ressources tag and see if you can identify the script that does this feature. If not, try setting breakpoints in portions of code, you think could be doing the effect..
this process can be long and hard or sometimes quite easy. Really depends on the widget and the way the website was put together..