Как да използваме инструментите за уеб разработчици на Firefox

Web Developer менюто на Firefox съдържа инструменти за инспектиране на страници, изпълнение на произволен JavaScript код и преглед на HTTP заявки и други съобщения. Firefox 10 добави изцяло нов инструмент за инспектори и актуализира Scratchpad.

Новите функции на уеб разработчиците на Firefox, в комбинация със страхотни уеб-разработчици като Firebug и Web Developer Toolbar, правят Firefox идеален браузър за уеб разработчици. Всички инструменти са достъпни под Web Developer в менюто на Firefox.

Инспектор на страницата

Проверете конкретен елемент, като го кликнете с десен бутон и изберете Огледайте (или натискане Q). Можете също да стартирате Инспектор от менюто на уеб програмиста.

Ще видите лента с инструменти в долната част на екрана, която можете да използвате, за да контролирате инспектора. Избраният ви елемент ще бъде маркиран и другите елементи на страницата ще бъдат затъмнени.

Ако искате да изберете нов елемент, кликнете върху Огледайте на лентата с инструменти, задръжте курсора на мишката върху страницата и кликнете върху елемента си. Firefox подчертава елемента под курсора.

Можете да навигирате между родителски и дъщерни елементи, като щракнете върху следите от лентата с инструменти.

HTML инспектор

Кликнете върху HTML за да видите HTML кода на избрания в момента елемент.

Инспекторът HTML ви позволява да разширите и сгънете HTML таговете, което го прави лесен за визуализиране с един поглед. Ако искате да видите HTML кода на страницата в плосък файл, можете да изберете Виж източника на страницата от менюто на уеб програмиста.

CSS инспектор

Кликнете върху стил за да видите правилата на CSS, приложени към избрания елемент.

Има също панел със свойства на CSS - превключвайте между двете, като щракнете върху правилник и Имоти бутони. За да ви помогне да намерите конкретни свойства, панелът със свойства включва поле за търсене.

Можете да редактирате CSS елемента в движение от панела Правила. Махнете отметката от някое от квадратчетата за отметка, за да деактивирате правило, щракнете върху текста, за да промените правило, или добавете свои собствени правила към елемента в горната част на прозореца. Тук добавих тегло на шрифта: удебелен; CSS правило, което прави текста на елемента получер.

Скрипт за JavaScript

Scratchpad видя и актуализация с Firefox 10 и сега съдържа подсветка на синтаксиса. Можете да въведете JavaScript код, който да се изпълнява на текущата страница.

След като го направите, кликнете върху Изпълни и изберете тичам. Кодът се изпълнява в текущия раздел.

Уеб конзола

Уеб конзолата заменя старата конзола за грешки, която е остаряла и ще бъде премахната в бъдеща версия на Firefox.

Конзолата показва четири различни типа съобщения, които можете да превключвате на видимостта - мрежови заявки, CSS съобщения за грешки, съобщения за грешки в JavaScript и съобщения за уеб програмисти..

Какво представлява съобщението за уеб разработчици? Това е съобщение, отпечатано в обекта window.console. Например можем да пуснем window.console.log (“Здравей свят”); JavaScript код в Scratchpad за отпечатване на съобщение за програмист в конзолата. Уеб разработчиците могат да интегрират тези съобщения в своя JavaScript код, за да помогнат при отстраняването на грешки.

Обновете страницата и ще видите генерираните мрежови заявки и други съобщения.

Използвайте полето за търсене, за да филтрирате съобщенията; кликнете върху заявка, ако искате да видите повече подробности.

От Firefox 10 уеб конзолата може да работи в тандем с Page Inspector. Променливата $ 0 представлява текущо избрания обект в инспектора. Така например, ако искате да скриете избрания в момента обект, можете да стартирате $ 0.style.display = "никой" в конзолата.

Ако искате да научите повече за използването на конзолата и нейните вградени функции, разгледайте страницата на уеб конзолата на уебсайта на уебсайта на разработчиците на Mozilla.

Получаване на още инструменти

Най- Получаване на още инструменти опцията ще ви отведе до колекцията от инструменти на кутията с инструменти на уеб разработчика в уебсайта за добавки на Mozilla. Той съдържа някои от най-добрите добавки за уеб разработчици, включително Firebug и Web Developer Toolbar.

Ако сте използвали Firefox за няколко години, може би си спомняте DOM инспектор. Интегрираните инструменти за разработчици на Firefox изминаха дълъг път оттогава.