Глядзіце HTML і CSS любой вэб-старонкі
Сайт пабудаваны з лініямі кода , але вынік канкрэтных старонак з выявамі, відэа, шрыфтамі і многімі іншымі. Для таго, каб змяніць адзін з гэтых элементаў ці ўбачыць, што ён складаецца з, вы павінны знайсці канкрэтную радок кода, які кантралюе яго. Вы можаце зрабіць гэта з дапамогай інструмента праверкі элемента.
Большасць вэб-браўзэраў не робяць загрузкі інструмент інспекцыі або ўсталяваць надбудову. Замест гэтага, яны дазваляюць правай кнопкай мышы на элемент старонкі і выберыце Праверыць або Агледзіце элемент. Тым не менш, гэты працэс можа трохі адрознівацца ў вашым браўзэры.
Праверце элементы ў Chrome
Самыя апошнія версіі Google Chrome дазваляюць праверыць старонку некалькімі спосабамі, усе з якіх выкарыстоўваюць убудаваны ў Chrome DevTools:
- Пстрыкніце правай кнопкай мышы што - то на старонцы (або пусты вобласць) і абярыце Праверыць
- Калі ласка, увядзіце Ctrl + Shift + I спалучэнне клавіш
- Выкарыстоўвайце меню Chrome , каб атрымаць доступ да Дадатковыя інструменты> Інструменты распрацоўніка варыянт
У DevTools Chrome дазваляе рабіць такія рэчы, як лёгка капіяваць або рэдагаваць HTML радкі або схаваць або выдаліць элементы ў цэлым (да абнаўлення старонкі).
Пасля таго, як DevTools адкрываецца на баку старонкі, вы можаце змяніць, дзе яна размешчана, выпхнуць яго старонку, пошук усіх файлаў На старонцы, абярыце элементы старонкі для канкрэтнай экспертызы, капіяваць файлы і URL, і нават наладзіць кучу налад.
Праверце элементы ў Firefox
Як Chrome, Firefox мае некалькі розных спосабаў, каб адкрыць свой інструмент пад назвай Інспектар:
- Пстрыкніце правай кнопкай мышы пустую вобласць на старонцы або абярыце элемент і абярыце элемент Праверыць
- Калі ласка, увядзіце Ctrl + Shift + T ці Ctrl + Shift + I з клавіятурай
- У меню Firefox абярыце Developer> Інспектар
- У меню Сэрвіс выберыце Web Developer> Інспектар
Пры перамяшчэнні мышы над рознымі элементамі ў Firefox, інструмент інспектар аўтаматычна знаходзіць інфармацыю зыходнага кода элемента. Пстрыкніце элемент і "на ляту пошуку» спыніцца, і вы можаце праверыць элемент з акна інспектара.
Пстрыкніце правай кнопкай мышы элемент, каб знайсці ўсе падтрымоўваныя сродкі кіравання. Вы можаце рабіць рэчы, як правіць старонкі, як HTML, скапіяваць ці ўставіць ўнутраны або знешні HTML-код, ўласцівасці паказаць DOM, скрыншот або выдаліць вузел, лёгка прымяніць новыя атрыбуты, убачыць усё CSS старонкі, і многае іншае.
Праверце элементы ў Opera
Opera можа праверыць элементы таксама, з яго DOM Inspector інструмент, які ідэнтычны Chrome. Вось як дабрацца да яго:
- Выкарыстоўвайце спалучэнне клавіш Ctrl + Shift + I
- Перайдзіце ў Меню> Дадатковыя інструменты> Паказаць меню распрацоўніка, а затым адкрыйце меню праз меню> Developer> Інструменты распрацоўніка
- У меню правай кнопкі мышы на любым элеменце на старонцы, абярыце адпаведны элемент
Праверце элементы ў Internet Explorer
Аналагічны інспектаваць інструмент элемент, званы Developer Tools, даступная ў Internet Explorer:
- Націсніце F12 на клавіятуры
- Выкарыстоўвайце інструменты> опцыю меню F12 Developer (націснуць Alt + X , калі вы не бачыце ў меню Tools)
- Пстрыкніце правай кнопкай мышы на старонцы і націсніце кнопку Праверыць элемент
IE мае інструмент Выбраць элемент у гэтым меню , якое дазваляе націснуць на любы элемент старонкі , каб убачыць яго HTML і CSS дэталі. Вы таксама можаце лёгка адключыць / ўключыць элемент падсвятлення ў той час як вы праглядаеце праз ўкладку DOM Explorer.
Як і іншыя інструменты элемент інспектара ў названых браўзэрах, Internet Explorer дазваляе выразаць, элементы капіявання і ўстаўкі, а таксама рэдагаваць HTML-код, дадаваць атрыбуты, капіяваць элементы са стылямі прымацаванымі, і многае іншае.