Pull to refresh

Firebug: Part 2 — commands

Website development *
Это продолжение серии статей про Firebug.

Весь цикл: Console, Commands, Debugging ,Profiling

Firebug имеет приятную особенность — собственные функции.
Некоторые из них вам уже встречались, например в Prototype.
И чтобы вы не сомневались в том, что все честно, то мы продолжим мучать домашнюю страничку Firebug, т.к. на ней нет подключенных js файлов.



Чтобы получить один элемент с заданным id:
$(id) (не забываем, что id — элемент уникальный на странице)
$('main');
$('content');



Чтобы получить массив элементов, которые подходят под данный CSS селектор:
$$(selector) (а вот селектор может вернуть много элементов)
$$('p');
$$('div > div#content > div.fullColumn');



Выбирать элементы можно еще и по xpath:
узнать про xpath можно тут
$x(xpath) (xpath также возвращает массив элементов)
$x('/html/body/div/img');
$x('/html/body/div/img[3]');



А теперь в связи с необходимостью открывать для себя новое, мы пойдем на сайт, упомянутого выше Prototype.



Чтобы получить массив, содержащий название всех свойств объекта:
keys(Prototype);
keys(CodeHighlighter);



Чтобы получить массив, содержащий значения всех свойств объекта:
values(Prototype);
values(CodeHighlighter);



Очисть консоль можно не дотрагиваясь до мышки:
clear();


Также можно и инспектировать html на странице:
(принимает два параметра: первый — объект, второй — вкладка Firebug)
inspect($('content')); /* вернет то же самое, что и inspect($('content'), 'html'); */
inspect($('content'), "css");
inspect({a:'b'}, "script");
inspect($('content'), "dom");



Следующий набор функций понадобиться нам для следующей статьи, поэтому рассмотрим все попорядку.



Сейчас мы установим breakpoint(точку останова выполнения скрипта), проверим, что все работает и снимем ее, чтобы потом нам не мешала:
(debug() устанавливает breakpoint на первую строку указанной функции).
element = $('header');
element.hide();
debug(Element.Methods.hide);
element.hide();
undebug(Element.Methods.hide);
element.hide();



Сейчас мы установим logger(логирование вызова функции), проверим, что все работает и снимем его, чтобы потом нам не мешал, а заодно и вернем главную в первозданный вид:
(monitor() пишет в консоль при каждом вызове функции ее название и параметры).
element = $('header');
element.show();
monitor(Element.Methods.show);
element.show();
unmonitor(Element.Methods.show);
element.show();



А сейчас мы установим logger событий(логирование событий происходящих на странице), проверим, что все работает и по традиции снимем его:
(monitorEvents() пишет в консоль о каждом событии происходящем с объектом).
По дефолту отлавливаются все события, но можно отлавливать разные типы событий:
«mouse» и «key» — самые интересные для нас(я думаю не трудно догадаться об их предназначении)
но также можно привязаться к определенному событию:
«composition», «contextmenu», «drag», «focus», «form», «key», «load», «mouse», «mutation», «paint», «scroll», «text», «ui», и «xul».

/* проведите мышкой по странице */
monitorEvents(document.window);
/* проведите мышкой по странице, кликните и посмотрите, что происходит ;) */
unmonitorEvents(document.window);
/* проведите мышкой по странице */



Статья основана на Firebug Command Line и блоге Michael Sync.

* This source code was highlighted with Source Code Highlighter.
Tags:
Hubs:
Total votes 57: ↑55 and ↓2 +53
Views 1.5K
Comments Comments 11