Firebug Това е основен инструмент за тези, които програмират или оптимизират уебсайтове, независимо дали са дизайнери или уебмастъри. Така можем да елиминираме грешки при програмиране или проектиране, да знаем как работят и каква е структурата на уеб страница, как всички елементи, които я съставят.
Инсталираме приставката Firebug
За да инсталираме приставката, отиваме на уеб сайта за изтегляне на firebug и там търсим най -новата версия на инструмента за изтегляне.
Раздел конзола
Конзола Firebug Тук ще се показват съобщенията за това, което прави мрежата и възникналите грешки. Можем да виждаме съобщения за извикванията на функции или страници, които уеб прави, докато си взаимодействаме, показвайки ни функции, извиквания за обратно повикване или уеб услуги и стойностите, които се обменят по време на изпълнение, докато контролираме потока на приложението.
Нека да видим някои примери, влизаме в уеб motores.com.ar, щракваме с десния бутон и активираме Firebug.
Можем също да видим как при добавяне на продукт в пазарската кошница той изпраща следните параметри: функция, количество продукт и идентификатор на продукта.
Извикана функция Ajax insertItem cant 1 Id 5850326Въпреки че можем да видим, че той ще бъде добавен само ако сме влезли като потребители, в противен случай той ще поиска да се регистрираме.
Така че можем да видим как работи приложението и какъв параметър изпраща или получава и какви отговори предоставя и какво е времето за отговор, например за добавяне на продукт, който отне 335 милисекунди.
HTML раздел
ви позволява да видите структурата на мрежата и да редактирате кода на уеб страницата в реално време. Можем например да променим кода HTML на уебсайта или css кода и да го преглеждате директно, без тези промени да са постоянни. Например, ако имаме достъп до уебсайта на Ebay, можем да използваме Firebug, за да променим цвета на основния или блока с уеб съдържание.
фон: червен няма повторно превъртане 0 0;Когато приключите с писането, централният блок ще стане червен, ако актуализираме страницата, промените ще бъдат загубени и той ще се върне към първоначалния си дизайн.
Можем също да опитаме да манипулираме html кода и css кода, за да променим логото на Ebay за Google, това става чрез промяна на url на изображението на логото на Ebay за друг url на изображение, което искаме.
Тази функционалност не работи за промяна на цялостния дизайн, а за извършване на малки тестове и визуализиране на промените, без да се налага достъп до редактор.
CSS раздел
Разделът на панела CSS Той показва всички класове и идентификатори на CSS, които създаваме или които мрежата, която анализираме, има. От този панел можем да променим нашите класове и css изречения, както направихме по -рано в раздела Стилове на HTML панела.
Раздел Скрипт
Този панел е за отстраняване на грешки в кода JavaScript или jQuery. Той ни показва всичко, което скриптът прави, неговите променливи, неговите функции, отстраняване на грешки чрез точки на прекъсване, поетапното изпълнение на скрипт, екран за управление на променливия стек и също така можем да видим поведението на функциите.
Раздел DOM
Панелът СЛЪНЦЕ или Режим на обект на документТой е този, който получава информация за всички различни свойства на DOM и техните методи. DOM е част от елементите на мрежата и позволява на програмистите да имат достъп и да манипулират XHTML уеб страници.
JQuery предоставя методи за ефективно манипулиране на DOM. Можем да получим достъп до всеки атрибут на всеки елемент или да извлечем HTML кода от параграф или блок. В допълнение към това той предлага методи като .attr (), .HTML (), Y .val () Те действат като получатели и извличане на информация от DOM елементи за по -късна употреба.
Нека да видим в този пример за jQuery и DOM как да контролираме div и да извлечем текст:
Jquery и DOMИзвличане на текст от блок:
Това е тестов текст на DOM
Етикетите HTML Достъпът до елемента се осъществява чрез css класа или id и след това свойството, което може да бъде текст или друго, което позволява jQuery и DOM.
Раздел „Мрежа“
Целта на панела „Мрежа“ е да наблюдава уеб трафика и натоварването и потреблението на всяка HTTP уеб заявка, този доклад се състои от списък със записи, където всеки от тях представлява заявка / отговор за връщане, направена от страницата.
Прозорецът на мрежовия панел представя списък на заявките, докато мрежата се зарежда и използва. Всеки елемент в списъка показва информация, получена от заявката, а графична времева линия показва консумираните байтове, времето, необходимо за отговор, което представлява фазите на зареждане във времето. Следва списък на информацията, която се показва за всяка заявка:
- Метод на HTTP заявка
- Код и описание на HTTP отговор (200,301,404 и т.н.)
- Име на файла, който се извиква
- Име на домейн, откъдето е отговорът
- Размер на отговора в байтове
- Време в милисекунди, необходимо за отговор.
