Google Chrome е не само бърз потребителски браузър - той скрива множество функции за програмисти под капака си. Можете да разкриете част от тази мощност с инструмента "Inspect". Докато първоначално е огромна, инструментът ви дава информация за начина, по който са изградени уебсайтовете и може да ви помогне да отстраните грешки в собствените си сайтове.

Достъп до инструмента Inspect

Инструментът Inspect може да бъде намерен в контекстното меню на Chrome.

Кликнете с десния бутон върху всеки елемент в браузъра си и кликнете върху "Inspect" в контекстното меню.

Ще се появи прозорец отстрани на браузъра Chrome, както е показано по-долу. Това се нарича панелът DevTools. Ако някога сте използвали Firebug в Firefox, може да разпознаете някои от тях.

Тук има много, така че нека разгледаме отделните парчета.

Проверка на инспектора

Контролният панел е разделен на няколко различни раздела, които са видими в горната част на прозореца. Ще се съсредоточим върху раздела "Елементи" по подразбиране.

Има два полезни бутона до тези раздели. Първият е инструмент Inspect Element.

Този инструмент ви позволява да преминете към мишката и да изберете различни DOM елементи, за да ги инспектирате.

Вторият бутон включва режима за визуализация на устройството. В този режим можете да видите как изглежда вашата уеб страница при различни резолюции и размери на екрана.

Ако кликнете върху този бутон, ще видите моята страница в нов изглед.

След това можете да използвате падащото меню над визуализацията на страниците или дръжките в страниците на визуализацията на страницата, за да преоразмерите прозореца за визуализация на устройството.

HTML View

По-голямата част от раздела DevTools се заема от панела HTML.

Този панел е като супер захранващ "изглед". Той е структуриран в съответствие с DOM, с елементи, вложени в техните родителски елементи.

Ще видите, че елементът, който сте "инспектирали" в началото, автоматично се откроява със сив или син фон. Тук проверих изображение, което се съдържа в връзка. Както се очакваше, виждам подчертан котварски етикет.

Но къде е моят образ? Мога да разкривам всички DOM елементи, вмъкнати в котвата за котва, като кликнете върху триъгълника за разкриване до. В този случай стрелката разкрива етикета, който очаквах да намеря.

Ще забележите и малка лента с менюта в долната част на панела HTML.

Това се нарича пътека за навигация и показва всички основни елементи на избрания елемент. За да се придвижите до един от тези елементи, просто кликнете върху него.

Стилове

Под HTML изгледа виждаме и прозорец, който показва всички правила на CSS, които се отнасят за нашия елемент. Това се нарича панел "Стилове" и в този случай виждаме всички правила, които се отнасят за котвения етикет, който инспектирах по-рано.

Можете да превключвате или изключвате правило, като задържите курсора на мишката върху него и кликнете върху квадратчето до него.

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

Можете също така да търсите конкретни правила, като използвате полето за филтриране.

Дизайнът на стиловете обаче е в състояние много повече от това. Разгледайте документацията на Google за пълно обяснение на многото функции на панела на стила.

Модел на кутията и изчистен стил

В непосредствена близост до изгледа на стил е моделът на кутията за моя избран елемент. Ако не сте запознати, моделът на кутията е абстрактно изображение на маржа, границата, подложката и размерът на съдържанието, приложени към конкретен елемент.

В този случай мога да видя, че моят елемент има основен размер от 461 х 209 пиксела. Той не съдържа марж, граница или правила за подложка, така че тези полета са празни.

Ако изберете елемент с някои правила за позиция, марж, граница или подложка, моделът на кутията ви може да изглежда по-скоро.

Можете също така да видите модел in situ кутия, ако сте натиснали мишката над DOM елементи с активиран инструмент Inspect Element.

Под формата на кутията е даден списък на всички правила за оформяне, които се отнасят за този конкретен елемент. Това е малко по-различно от екрана Стилове. Той не показва действителните редове на CSS - само ефектите от тези правила. Това се нарича "изчислен стил" на обекта и е комбиниран резултат от вашето CSS.

И накрая, можете да потърсите конкретни правила, като въведете в полето Филтър.

заключение

Ако работите често с уеб страници, инструментът на Inspect на Chrome си заслужава да бъде проучен. Другите раздели в DevTools, като Console и Network, могат да бъдат безценни за разработчиците. Има още нещо, което можем да покрием в момента, но собствената документация на Google е цялостна и полезна.