Отладка JS и CSS кода на MooTools с Monkey Patching Prototypes

Давайте, посмотрим правде в глаза. Разработка и модификация JavaScript/CSS кода может быть очень долгим и нудным процессом, особенно когда в проекте много JS кода.

Но есть одна очень полезная практика, решающая проблемы отладки — это monkey-patching JavaScript prototypes.

Она выводит в консоль необходимую отладочную информацию по стилям и элементам. Давайте посмотрим, как она работает.

Пример: Наблюдаемые Element.setStyle задания

Очень часто возникают проблемы при добавлении стилей элементам. Вы просто применяете Element.setStyle метод для элемента, чтобы отследить, какой стиль будет модифицировать данный элемент:

Как только стиль появится в DOM, вы увидите следующее:

Имея записи о модификации стилей, вы можете быстрее отлавливать и изменять CSS код. Но не будем на этом останавливаться. Как на счет отладки атрибутов и имен классов?

Дополнительно: Просмотр CSS классов, стилей элементов и их атрибутов

Создадим массив объектов с именами методов и строковыми шаблонами, чтобы вывести все это в консоль:

С таким объектом мы можем следить за каждым методом!

Теперь вы можете отслеживать CSS стили, классы и атрибуты! Работа с DOM элементами будет проще и отлавливать ошибки можно будет быстрее и эффективнее! А самое хорошее в том, что возвращаемые значения и функциональность не меняются, потому как все выводится в консоль.


Оставить комментарий