Это продолжение серии статей про Firebug.
Весь цикл: Console, Commands, Debugging ,Profiling
Firebug имеет приятную особенность — собственные функции.
Некоторые из них вам уже встречались, например в Prototype.
И чтобы вы не сомневались в том, что все честно, то мы продолжим мучать домашнюю страничку Firebug, т.к. на ней нет подключенных js файлов.
Чтобы получить один элемент с заданным id:
$(id) (не забываем, что id — элемент уникальный на странице)
Чтобы получить массив элементов, которые подходят под данный CSS селектор:
$$(selector) (а вот селектор может вернуть много элементов)
Выбирать элементы можно еще и по xpath:
узнать про xpath можно тут
$x(xpath) (xpath также возвращает массив элементов)
Чтобы получить массив, содержащий название всех свойств объекта:
Чтобы получить массив, содержащий значения всех свойств объекта:
Очисть консоль можно не дотрагиваясь до мышки:
Также можно и инспектировать html на странице:
(принимает два параметра: первый — объект, второй — вкладка Firebug)
Сейчас мы установим breakpoint(точку останова выполнения скрипта), проверим, что все работает и снимем ее, чтобы потом нам не мешала:
(debug() устанавливает breakpoint на первую строку указанной функции).
Сейчас мы установим logger(логирование вызова функции), проверим, что все работает и снимем его, чтобы потом нам не мешал, а заодно и вернем главную в первозданный вид:
(monitor() пишет в консоль при каждом вызове функции ее название и параметры).
А сейчас мы установим logger событий(логирование событий происходящих на странице), проверим, что все работает и по традиции снимем его:
(monitorEvents() пишет в консоль о каждом событии происходящем с объектом).
По дефолту отлавливаются все события, но можно отлавливать разные типы событий:
«mouse» и «key» — самые интересные для нас(я думаю не трудно догадаться об их предназначении)
но также можно привязаться к определенному событию:
«composition», «contextmenu», «drag», «focus», «form», «key», «load», «mouse», «mutation», «paint», «scroll», «text», «ui», и «xul».
Статья основана на Firebug Command Line и блоге Michael Sync.
* This source code was highlighted with Source Code Highlighter.
Весь цикл: 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.