Вижте HTML и CSS на всяка уеб страница
Сайтът е изграден с линии с код , но резултатът е конкретни страници с изображения, видео, шрифтове и др. За да промените някой от тези елементи или да видите от какво се състои, трябва да намерите конкретния ред код, който го контролира. Можете да направите това с инструмент за проверка на елементите.
Повечето уеб браузъри не ви карат да изтеглите инструмент за проверка или да инсталирате добавка. Вместо това те ви позволяват да кликнете с десния бутон върху елемента на страницата и да изберете Инспекция или проверка на елемента . Въпреки това процесът може да е малко по-различен в браузъра ви.
Проверете елементите в Chrome
Най-новите версии на Google Chrome ви позволяват да прегледате страницата по няколко начина, като всички използват вградените си Dev Devices:
- Щракнете с десния бутон на мишката върху страницата (или празно място) и изберете Inspect
- Въведете клавишната комбинация Ctrl + Shift + I
- Използвайте менюто на Chrome, за да отворите опцията Още инструменти> Инструменти за програмисти
Chrome DevTools ви позволяват да правите неща като лесно копиране или редактиране на HTML линии или скриване или изтриване на елементи като цяло (докато страницата се презарежда).
След като DevTools се отвори отстрани на страницата, можете да промените мястото, където е поставена, да я извадите от страницата, да търсите всички файлове на страницата, да изберете елементи от страницата за конкретно изследване, да копирате файлове и URL адреси и дори да персонализирате куп от настройките.
Проверете елементите във Firefox
Подобно на Chrome, Firefox има няколко различни начина да отвори инструмента си Инспектор:
- Щракнете с десния бутон върху празен участък на страницата или изберете елемент и изберете Inspect Element
- Въведете Ctrl + Shift + T или Ctrl + Shift + I с клавиатурата
- От менюто на Firefox кликнете върху Developer > Inspector
- От менюто " Инструменти " кликнете върху Уеб програмист> Инспектор
Когато премествате мишката върху различни елементи в Firefox, инструментът Инспектор автоматично намира информацията за изходния код на елемента. Кликнете върху елемент и търсенето "в движение" ще спре и можете да прегледате елемента от прозореца на инспектора.
Щракнете с десен бутон върху елемент, за да намерите всички поддържани контроли. Можете да направите неща като редактиране на страницата като HTML, копиране или поставяне на вътрешен или външен HTML код, показване на свойства на DOM, екранна снимка или изтриване на възела, лесно прилагане на нови атрибути, преглед на CSS на цялата страница и др.
Проверете елементите в Opera
Opera може да провери и елементи, с инструмента DOM Inspector, който е идентичен с този на Chrome. Ето как да стигнете до него:
- Използвайте клавишната комбинация Ctrl + Shift + I
- Отворете менюто> Още инструменти> Показване на менюто за програмисти и след това отворете менюто > Меню> Разработчик> Инструменти за програмисти
- От менюто с десния бутон върху който и да е елемент на страницата, изберете Елемент за проверка
Проверете елементите в Internet Explorer
Подобен инструмент за инспектиране на елементи, наречен Инструменти за програмисти, е налице в Internet Explorer:
- Натиснете F12 на клавиатурата
- Използвайте опцията Инструменти> F12 за програмисти (натиснете Alt + X, ако не виждате менюто Инструменти )
- Кликнете с десния бутон върху страницата и кликнете върху Inspect Element
IE има инструмент Избор на елемент в това ново меню, което ви позволява да кликнете върху всеки елемент от страницата, за да видите неговите HTML и CSS подробности. Можете също така лесно да деактивирате / активирате открояването на елементите, докато сърфирате в раздела Домейн Explorer .
Подобно на инструментите за инспектор на други елементи в горните браузъри, Internet Explorer ви позволява да изрежете, копирате и поставите елементи, както и да редактирате HTML, да добавяте атрибути, копирате елементи със стилове, прикачени и др.