Как отследить работу js скрипта?

Question

[Виталий Семьянчук]

Всем привет.

Ребята, существует ли какой-то екстеншин чтобы отследить работа js скрипта?

Для примера:
Есть сайт fbcover-designer.com/, в нем создается с помощью canvas объект, потом этот текст можно увеличивать, переворачивать, вот я хотел бы посмотреть, какие строки отвечают за эти действия?

Answer 1

[Юрий Лобанов]

В chrome есть по F12 справа вкладка Event Listeners, еще можно ставить breakpoints.
Вот статья еще, может поможет habrahabr.ru/post/76485
Она про отладку, но суть одна и та же.

Comments

[Виталий Семьянчук]

это я уже пробывал, ну к сожалению к обьектам canvas это не подходит, я могу поставить breakpoint на любые события и они срабатывают, а на canvas нет

[Юрий Лобанов]

@fix20152 там ведь используется библиотека fabric.js.
habrahabr.ru/post/162367
habrahabr.ru/post/167119
Библиотеку я не использовал, но не достаточно ли просто прочитать API? Или там куча еще своего понаписано?

[Виталий Семьянчук]

Та там они вообще чтото такое накрутили не понятное, что мне не кто не может ответить не на тостере не старк флов. По этому мне не обходимо отследить как они это сделали, потому что аналога в интернете не нашел

[Appp Zooo]

@fix20152 @iiil не знаю почему он не нашел, я в Chrome открыв Dev-Tools, перешел в Timeline, включил запись, подергал текст, выключил запись, и нашел все функции :D
вот кстати с скриншотом я делал ответ недавно Можно ли посмотреть подписанные события?

[Appp Zooo]

@fix20152 там где Records, разворачиваете Events, и там все Call'ы

[Appp Zooo]

@fix20152 fbcover-designer.com/js/fabric/fabric-custom.js это разве не тот скрипт что вы ищете? там же все их функции.

[Виталий Семьянчук]

@alasecond Спасибо, за ответ, ксожалению нет, я его тоже нашел ну решения задачи он не дает.

[Appp Zooo]

@fix20152 ну как нет, я щас код выдеру и вставлю в свой ответ)

Answer 2

[Appp Zooo]

В статье habrahabr.ru/post/167119 есть вот такой текст:

События — незаменимый инструмент для создания сложных приложений. Для удобства пользования, и более детальной настройки, Fabric имеет обширную систему событий; начиная от низкоуровневых событий мыши, и вплоть до высокоуровневых событий объектов.

И далее идет пример, вот так они это и сделали. Хотя @iiil правильно вам сказал прочесть API.
Список всех событий:

На уровне мышки, у нас есть "mouse:down", "mouse:move", и "mouse:up". Из общих, есть "after:render". Есть события касающиеся выбора объектов: "before:selection:cleared", "selection:created", "selection:cleared". Ну и конечно же, события объектов: "object:modified", "object:selected", "object:moving", "object:scaling", "object:rotating", и "object:added".

Скрипт с их фукнциями fbcover-designer.com/js/fabric/fabric-custom.js
Ну если переписали то тут хз, тогда надо по новой по апи делать всё.

Comments

[Виталий Семьянчук]

я тоже думал что здесь, ну когда перепробывал все их методы то понял что не здесь, по всей видемости они ядро fabric.js переписывали

[Виталий Семьянчук]

точно, проверил жуки переписали ядро

[Appp Zooo]

@fix20152 Тогда может есть другие примеры которые используют этот плагин? и оттуда взять то что вам надо.

[Виталий Семьянчук]

@alasecond та дело в том что не нашел, уже три дня ищу только у них увидел эту фишку

[Appp Zooo]

@fix20152 а в дэмо разделе? fabricjs.com/customization
ну и еще тут весь список демок fabricjs.com/demos

[Виталий Семьянчук]

да там тоже смотрел, и я так понял что если они ядро переписывали, то по всей видемости в интернете я такое не найду

[Appp Zooo]

@fix20152 а что если использовать их переписанный скрипт? и их код? хотя это воровство но... вроде бы ради добра :D

[Виталий Семьянчук]

@alasecond ну использовать, это может и действительно плохо, а разобраться можно, другое дело что он сжатый, и время на то чтобы разобраться может уйти больше чем самому переписать. А вообще ядро переписывать плохо, нужно в потдержу fabricjs написать может они когда то буду делат. Ну в любом случаи спасибо, вам!

[Юрий Лобанов]

@alasecond @fix20152 насчет воровства - посмотрите внимательно лицензии. Насколько понял я, вы можете смело скачивать и использовать данную измененную библиотеку. Ну и поищите авторов изменений, возможно у них есть выложенный в открытый доступ несжатый вариант.

Answer 3

[sasha]

spy js

Comments

[Виталий Семьянчук]

интерестно нужно будет попробывть, не когда не слышал