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