Как да използвате функцията "Explore Element" в Mozilla Firefox

Функцията "Explore Element" в Firefox ще ви позволи да видите кода на уеб страницата на HTML. Чрез активиране на тази функция можете да промените HTML и CSS. Експеримент, правене на промени и след това просто актуализирайте страницата, за да се върнете към първоначалната му форма.

Стъпка

Част 1 от 2:

Изследвани елементи

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

В Firefox 9 и по-ранните версии на функцията "изследване на елемента" изобщо.

Изображение, озаглавено Използвайте инспектора в Mozilla Firefox Стъпка 2

2. Кликнете с десния бутон върху всяка точка на уеб страница, например чрез изображение, текст, фон или друг елемент. Ако нямате мишка с две бутона, натиснете контрола и кликнете върху левия бутон на мишката.

Изображение, озаглавено Използвайте инспектора в Mozilla Firefox стъпка 3

3. В менюто, което се отваря, изберете "Explore Element". В долната част на прозореца лентата с инструменти ще се появи и под него - долната част с кода на HTML страницата.

Изображение, озаглавено Използване на инспектора в Mozilla Firefox Стъпка 4

4. Спазвайте лентите с инструменти и дъното. Изборът на "изследване на елемента", няколко отдолу се отварят в долната част на прозореца. Ето тяхното описание:

Топ низ е лентата с инструменти. Тя включва няколко раздела, но ние се интересуваме от първия (ляв) таб "инспектор" (боядисан в синьо). Не преминавайте към други раздели.

Под лентата с инструменти има низ с оператори на грешки.

По-долу е дадено дъното с HTML кода на страницата. HTML код на избрания от вас елемент ще бъде маркиран (в син маркер) и се намира в центъра на това подраздел.

В средата на дясно ще намерите CSS на тази страница.

Изображение, озаглавено Използвайте инспектора в Mozilla Firefox Стъпка 5

пет. Изберете друг артикул. След като отворите функциите "Explore item", можете лесно да изберете друг артикул по три начина:

Преместете мишката в HTML кодовата линия, за да маркирате съответния елемент (в Firefox 34+). Щракнете върху HTML код, за да изберете този елемент.

Кликнете върху иконата "Избор на елемент от страницата". Тази икона се намира в лентата с инструменти отляво и има квадрат с курсор. Мишка до желания елемент (в долната с HTML код) и след това кликнете върху елемента, за да го изберете.

Изображение, озаглавено Използвайте инспектора в Mozilla Firefox Стъпка 6

6. HTML навигационен код. Кликнете върху всяка област в долната част с HTML код. Използвайте клавишите със стрелки (на клавиатурата), за да навигирате в кода (в Firefox 39+). Това е полезно, ако елементът е доста малък.

HTML код, представен със сив шрифт, се отнася до елементи, които не се показват на страницата. Например, коментари, възли (като например ) и елементи, скрити с CSS.

Кликнете върху стрелката вляво от контейнера, за да разположите или скриете съдържанието му. За да разширите всички контейнери, кликнете върху ALT или OPTION, когато кликнете върху.

Изображение е озаглавено Използвайте инспектора в Mozilla Firefox Step 7

7. Намерете елемент. Наред с операторите на отстраняване на грешки намерете иконата под формата на лупа (вдясно). Кликнете върху тази икона, за да отворите низ за търсене и въведете HTML кода в него, който търсите. Тъй като се отваря изскачащият прозорец със съответните елементи. Кликнете върху желания елемент и превъртете през HTML кода, за да намерите кода на този елемент.

Част 2 от 2:

Редактиране на HTML код

един. Актуализирайте страницата, за да отмените всички въведени промени. Не забравяйте, че направените промени ще бъдат показани само на екрана, т.е. те не са постоянни. Затваряне или актуализиране на страницата, тя ще се върне в оригиналната форма. Така че не се страхувайте да експериментирате, дори ако не си представите какво ще доведе до това, което ще доведе до това.

Изображение, озаглавено Използвайте инспектора в Mozilla Firefox стъпка 9

2. Кликнете два пъти върху HTML кода, за да го редактирате. Въведете новия код и натиснете ENTER, за да запазите промените.

Изображение, озаглавено Използвайте инспектора в Mozilla Firefox стъпка 10

3. Натиснете и задръжте низ с оператори на грешки за достъп до допълнителни опции. Този низ се намира между лентата с инструменти и земята с HTML код. Ето един непълен списък с допълнителни опции:

"Редактиране като HTML". Позволява ви да редактирате цял възел и цялото му съдържание, а не индивидуални линии.

"Копиране на вътрешен HTML". Копира цялото съдържание на възела и копия и възел "Копиране на външни HTML" и възел (например,

или Чест.

"Вмъкване". Опциите вложките ще бъдат отворени, например, пред възела или след възела.

": Hover", ": активен", ": фокус". Промяна на външния вид на елемента. Точният ефект се определя от CSS (редактиран в дясната страна).

Изображение, озаглавено Използвайте инспектора в Mozilla Firefox Step 11

4. Плъзгане. За да пренаредите елементите, натиснете и задръжте HTML кода, докато се появи пунктираната линия. Преместете го нагоре или надолу и пуснете, когато линията достигне желаното положение.

Той работи само в Firefox 39+.

Изображение, озаглавено Използвайте инспектора в Mozilla Firefox стъпка 12

пет. Затворете долната част на функциите "Изследване на елементи". За да направите това, просто кликнете върху иконата "x" (в десния ъгъл на лентата с инструменти).

Съвети

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

Windows. Кликнете върху "Firefox" - "Разработчик" - "Toolbar".
Mac OS или Linux. Кликнете върху "Инструменти" - "Разработчик" - "Toolbar".

В Firefox 40 можете да скриете дъното с CSS код, за да разширите долната част с HTML код. За да направите това, на линия с оператори на грешки, намерете иконата под формата на стрелка, насочена къмдясно (до лупата). Кликнете върху тази икона, за да скриете дъното с CSS код - отново кликнете върху иконата, за да го разгърнете.

Можете също да редактирате CSS код, но той надхвърля тази статия. Така четете тази статия.