Как узнать, как работает какой-то компонент JavaScript?

Question

Я только что видел очень интересный виджет интерфейса пользователя .Этот виджет объясняет, как работает Twilio SMS Api.Когда пользователь нажимает на число, происходит небольшое изменение изображения.

Я хотел бы узнать, как работает этот виджет.Какие инструменты я должен использовать, чтобы изучить это?Как бы вы попытались выяснить механизм работы этого виджета?

Answer 1

используйте webinspector в chrome или safari (ctrl + shift + i или ctrl + alt + i). или используйте firebug, который является аддоном для firefox (мой инструмент).

оттуда; выберите элемент / виджет с помощью инструмента инспектора. Вы увидите структуру HTML. Поиграйте с виджетом и посмотрите, как меняется HTML. Найдите вкладку DOM и посмотрите, что там меняется. Посмотрите на тег scripts / ressources и посмотрите, сможете ли вы определить скрипт, который выполняет эту функцию. Если нет, попробуйте установить точки останова в частях кода, которые, как вы думаете, могут дать эффект ..

этот процесс может быть долгим и сложным, а иногда и довольно легким. На самом деле зависит от виджета и того, как сайт был собран вместе.