„Inspect Element“е инструмент за разработчици в браузъра Firefox, който можете да използвате за проследяване на HTML код на всяка уеб страница. HTML и CSS стиловите таблици на уеб страница могат да се редактират с „Inspect Element“. Можете да опитате да редактирате страница, колкото искате, и да я върнете така, както е била, като просто презаредите редактираната уеб страница.
Стъпка
Част 1 от 2: Проверка на елементите
Стъпка 1. Актуализирайте Firefox (по избор)
Възможно е да нямате достъп до функциите, обсъдени в тази статия, ако използвате по -стара версия на Firefox. Актуализацията ще се инсталира автоматично, когато проверите коя версия на Firefox използвате.
Firefox 9 и по -ранните версии изобщо нямат инструмента "Inspect Element"
Стъпка 2. Щракнете с десния бутон върху всеки елемент на уеб страница
Можете да щракнете с десния бутон върху всяко изображение, текст, фон или елемент. Ако мишката ви има само един бутон, комбинацията от левия бутон на мишката и клавиша Control ще доведе до щракване с десния бутон.
Стъпка 3. Щракнете върху „Инспектиране на елемент“от падащото меню
В долната част на прозореца ще се появи лента с инструменти. Ще се появи и панел под лентата с инструменти, който ще показва HTML кода на активната страница.
Стъпка 4. Запознайте се със съществуващите ленти с инструменти и панели
Когато използвате „Inspect Element“, няколко прозореца ще се отворят под прозореца на браузъра. По -долу са описани имената и функциите на лентите с инструменти и панелите в „Проверка на елемента“:
- В горния ред е лентата с инструменти на Toolbox. Тук можете да намерите няколко инструмента, но ще се съсредоточим върху бутона Инспектор вляво. Уверете се, че този бутон е активен (обозначен с цвета на бутона, който става син, когато е активен) в цялото ръководство.
- Под това има ред от галета на HTML елементи, който показва местоположението на избрания в момента елемент.
- Панелът под подканите за навигация показва HTML дървото или "Изглед на маркиране" на уеб страницата. HTML в избрания елемент ще бъде маркиран и центриран в този панел.
- Прозорецът вдясно показва CSS стиловата таблица на текущата уеб страница.
Стъпка 5. Изберете друг елемент
Когато лентата с инструменти е отворена, можете лесно да изберете други елементи. Има три начина да направите това:
- Задръжте курсора на мишката върху ред HTML, за да маркирате избрания елемент (тази функция изисква Firefox 34+). Щракнете върху HTML, за да изберете този елемент.
- Щракнете върху инструмента „Избор на елемент“в левия ъгъл на лентата с инструменти: той има икона под формата на курсор над поле. Преместете курсора на уеб страницата, за да маркирате елемент и щракнете, за да го изберете.
Стъпка 6. Проследете HTML кода
Щракнете навсякъде в HTML прозореца. Използвайте левия и десния клавиши за насочване на клавиатурата, за да преминете от код към код (тази функция изисква Firefox 39+). Този метод е полезен за избор на елементи, които са твърде малки, за да бъдат избрани с курсора.
- Сивият HTML показва елементи, които не се показват на страницата. Елементите, включени в това, са коментари, като възли и други елементи, скрити от свойството за показване на CSS.
- Щракнете върху стрелката вляво от полето, за да покажете или скриете съдържанието. За да покажете цялото съдържание, задръжте alt="Изображение" или опция, докато щракнете върху стрелката.
Стъпка 7. Намерете елемента
Потърсете полето за търсене (икона под формата на бримка) в крайния десен ъгъл на реда за галета. Щракнете, за да разгънете полето за търсене и въведете HTML кода, който искате да търсите. Докато пишете, ще се покаже изскачащ прозорец, показващ съвпадащи резултати от търсенето. Щракнете върху елемент от резултатите от търсенето и превъртете HTML панела до кода, който търсите.
Част 2 от 2: Редактиране на HTML
Стъпка 1. Презаредете страницата, за да започнете отначало
Ако сте нови в инструментите за разработка на уебсайтове, имайте предвид, че не правите постоянни промени в страниците, които редактирате. Вашите редакции се показват само на екрана ви, докато не заредите или затворите страницата. Чувствайте се свободни да експериментирате, дори и да не знаете какво ще се случи.
Стъпка 2. Щракнете двукратно върху HTML, за да редактирате
Щракнете двукратно върху вградения HTML. Въведете новия текст и натиснете Enter, за да запазите промените.
Стъпка 3. Щракнете и задръжте инструмента в галерията, за да изведете повече опции
Обърнете внимание, че лентата с инструменти за галета се намира между HTML дървото и лентата с инструменти над него. Щракнете и задръжте инструмент в този ред, за да отворите повече менюта. По -долу е намек за наличните опции (не са изчерпателни):
- „Редактиране като HTML“ви позволява да редактирате цялото HTML съдържание от HTML дървото директно, вместо да редактирате всеки ред.
- „Copy Inner HTML“копира цялото съдържание вътре в възела, докато „Copy Outer HTML“копира съдържанието и възлите (като или
- "Paste →" извежда няколко опции къде да поставите копието, например преди възела или след първото дете на възела.
- : hover,: active и: focus променят външния вид на елемента, когато потребителят взаимодейства. Променените ефекти се определят от таблицата със стилове на CSS (Редактиране от панела вдясно).
Стъпка 4. Плъзнете и пуснете
За да пренаредите елементи в кода, щракнете и задръжте HTML, докато се появи пунктирана линия. Преместете линията нагоре и надолу по дървото и освободете бутона на мишката, когато линията е там, където искате.
Тази функция изисква Firefox 39 и по -нова версия
Стъпка 5. Затворете лентата с инструменти за програмисти
За да затворите целия прозорец Inspect Element, щракнете върху бутона X в горния десен ъгъл на лентата с инструменти, разположена над CSS панела.
Съвети
- Можете също да отворите лентата с инструменти от опциите на менюто в горната част на прозореца:
- Windows: Firefox → Уеб разработчик → Превключване на инструментите
- Mac или Linux: Инструменти → Уеб разработчик → Превключване на инструментите
- Firefox 40 има възможност да скрие CSS панела, така че да имате повече място за редактиране на HTML. Потърсете иконата със стрелка в крайния десен ъгъл на реда за галета и вдясно от полето за търсене. Щракнете върху тази икона, за да скриете CSS панела, и щракнете отново, за да го изведете.
- Можете също да редактирате CSS панели, но те не са изброени в тази статия. Можете да намерите инструкции за редактиране на CSS код в интернет.
