149 Давайте, посмотрим правде в глаза. Разработка и модификация JavaScript/CSS кода может быть очень долгим и нудным процессом, особенно когда в проекте много JS кода.
Но есть одна очень полезная практика, решающая проблемы отладки — это .
Она выводит в консоль необходимую отладочную информацию по стилям и элементам. Давайте посмотрим, как она работает.
Пример: Наблюдаемые Element.setStyle задания
Очень часто возникают проблемы при добавлении стилей элементам. Вы просто применяете Element.setStyle метод для элемента, чтобы отследить, какой стиль будет модифицировать данный элемент:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
(function() { /* SetStyle */ // "Save" the old setStyle prototype var oldSetStyle = Element.prototype.setStyle; // Create a new prototype method for setStyle Element.prototype.setStyle = function(property,value) { console.log("setStyle: Setting element ",this,"'s '",property,"' style to '",value,"'"); return oldSetStyle.apply(this,arguments); } /* Set */ // "Save" the old set prototype var oldSet = Element.prototype.set; // Create a new prototype method for set Element.prototype.set = function(property,value) { console.log("set: Setting element ",this,"'s '",property,"' attribute to '",value,"'"); return oldSet.apply(this,arguments); } })(); |
Как только стиль появится в DOM, вы увидите следующее:
Имея записи о модификации стилей, вы можете быстрее отлавливать и изменять CSS код. Но не будем на этом останавливаться. Как на счет отладки атрибутов и имен классов?
Дополнительно: Просмотр CSS классов, стилей элементов и их атрибутов
Создадим массив объектов с именами методов и строковыми шаблонами, чтобы вывести все это в консоль:
|
1 2 3 4 5 6 7 |
// Set up some templates and properties [ { method: "setStyle", description: "Setting '{arg1}' style to '{arg2}'" }, { method: "set", description: "Setting '{arg1}' attribute to '{arg2}'" }, { method: "addClass", description: "Adding class '{arg1}'" }, { method: "removeClass", description: "Removing class '{arg1}'" } ] |
С таким объектом мы можем следить за каждым методом!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Set up some templates and properties [ { method: "setStyle", description: "Setting '{arg1}' style to '{arg2}'" }, { method: "set", description: "Setting '{arg1}' attribute to '{arg2}'" }, { method: "addClass", description: "Adding class '{arg1}'" }, { method: "removeClass", description: "Removing class '{arg1}'" } ].each(function(method) { // Save the old prototype fn var oldProto = Element.prototype[method.method]; // Create a new prototype Element.prototype[method.method] = function(arg1,arg2) { // Console out the method for debugging console.log(method.method,": ",this,": ",method.description.substitute({ arg1:arg1, arg2:arg2, element:this })); // Return the value by calling the old prototype fn return oldProto.apply(this,arguments); }; }); |
Теперь вы можете отслеживать CSS стили, классы и атрибуты! Работа с DOM элементами будет проще и отлавливать ошибки можно будет быстрее и эффективнее! А самое хорошее в том, что возвращаемые значения и функциональность не меняются, потому как все выводится в консоль.
