Изследователски и редактиране на HTML - Developer Tools Firefox, MDN

Навигация в HTML-кодът

На горния панел е HTML лента с инструменти, която се състои от верига навигация и поле за търсене.

Галета за HTML-кодът

Това показва пълната йерархията на покупки, които съдържат избрани клонове документ елемент:

Изследователски и редактиране на HTML - Developer Tools Firefox, MDN
Натиснете и задръжте левия бутон на мишката върху един от елементите на лентата за навигация се показва меню, което ви позволява да изберете някой от братята и сестрите на елемента. бутоните със стрелки на левия и десния край на веригата верига на лентата за превъртане, ако тя е по-дълъг от наличното пространство.

С пускането на Firefox 34, когато мишката остава върху даден елемент от съответния елемент за навигация верига, е посочено на страницата.

поле за търсене

Кликнете в полето за търсене, за да го разкрие, след което въведете това, което търсите. Вие ще видите подкана с резултатите от търсенето.

Изследователски и редактиране на HTML - Developer Tools Firefox, MDN
Натиснете «Влез». първият елемент от този тип на страницата, и го натиснете отново, за да «Влез» ще намерите ще бъде избран следващия.

Можете да търсите за маркер или въведете друг низ от CSS селектори. така че можем да се намери елемент с ID myId. Въведете низ #myId.

Започвайки с Firefox 40, можете да търсите по атрибути клас или лична селектори с изключение на CSS формат, така че търсенето на съответния елемент е достатъчно да въведете само myId.

HTML дърво

Останалата част от панел показва HTML-кода на страницата, като дърво. Директно от лявата страна на всеки възел има стрела, като кликнете върху който се отваря възел. Ако кликнете върху стрелката, за да задържите Alt ключ, открито и възел и всички негови потомци.

Изследователски и редактиране на HTML - Developer Tools Firefox, MDN
Задържите курсора на мишката в дървото подчертава съответния елемент на страницата.

Възли, които са скрити с помощта на дисплея: няма. се появи по-бели (и не се показва възли, например ).

:: преди и. след

Тъй Firefox 35, може да се разгледа псевдо-елементи добавят чрез. преди и. след:

Договорената контекстното меню

Някои общи операции единица може да се извърши с помощта на контекстното меню. За достъп до това меню, щракнете с десния бутон върху желаната опция:

Изследователски и редактиране на HTML - Developer Tools Firefox, MDN
Менюто съдържа следните елементи:

Edit като HTML

Можете да редактирате HTML - тагове, атрибути и съдържание - директно в HTML панел: два пъти върху текста, който искате да промените, да го промените, натиснете Enter, - и ще бъдат приложени незабавно промените.

За да редактирате outerHTML елемент, отворете елемента от контекстното меню и изберете "Редактиране като HTML». Вие ще видите в HTML панел на областта за редактиране на текст:

Изследователски и редактиране на HTML - Developer Tools Firefox, MDN
Можете да добавите тук всеки HTML: промяна на елемент маркер, да редактирате съществуващи елементи, добавяне на нови такива. Веднага след като кликнете извън областта на редактирането, промените ще бъдат приложени към страницата.

Използване на контекстното меню. Можете да копирате възли в HTML дървото и след това да ги поставите.

плъзгане

Ново в Firefox 39.

С пускането на Firefox 39, можете да редактирате HTML влачите и пускате възли в HTML дървото. Просто натиснете и задръжте бутона на мишката върху всеки елемент и да го плъзнете нагоре или надолу по дървото. Когато освободите бутона, елементът ще бъде въведена в съответното място: