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

Question

我剛剛看到一個非常有趣的user interface widget。這個小部件解釋了Twilio SMS Api如何工作。當用戶點擊一個數字時，圖像會發生一些小的變化。

我想了解這個小部件是如何工作的。我應該使用什麼工具來學習它？你將如何試圖找出這個小部件的工作機制？

Answer 1

在Chrome或Safari瀏覽器中使用webinspector（ctrl + shift + i或ctrl + alt + i）。或使用firebug，這是Firefox的插件（我的工具）。

從那裏;使用檢查器工具選擇元素/小部件。你會看到html結構。和小部件一起玩，看看html如何改變。查找DOM選項卡並查看其中的更改。查看腳本/資源標籤並查看是否可以識別執行此功能的腳本。如果不是，請嘗試在代碼的各個部分設置斷點，您認爲可能會造成這種影響。

此過程可能很長且很難或有時很容易。真的取決於小部件和網站放在一起的方式。