Инструментът CSS Inspector е мощен инструмент за разработчици, който ви позволява да виждате всички CSS свойства на всеки елемент, само като задържите курсора на мишката върху него. Кликнете, за да заключите стиловете, редактирайте ги директно и вижте как промените се прилагат незабавно към страницата.
Независимо дали отстранявате проблем с оформлението, обратно проектирате дизайн, който харесвате, или просто искате бързо да проверите стойности за отстъпи и типография, CSS Inspector ви дава всичко необходимо в чист плаващ панел. За разлика от DevTools на браузъра, той не ви пречи — няма закачени панели, няма преоразмерен изглед на страницата. Просто задържате курсора, кликвате и инспектирате. Инструментът показва изчислените стилове (computed styles) — тоест това, което браузърът реално рендира, а не само авторски зададения CSS. Това означава, че виждате истинските стойности след разрешаване на наследяването, специфичността и каскадата — същите стойности, които влияят на това, което потребителите виждат на екрана.
Инспектирането на елемент никога не предизвиква reflow или repaint на самата страница, така че можете да разглеждате свободно, без да се притеснявате, че ще нарушите позицията на скролването, анимациите или състоянието на JavaScript. Поддържат се и псевдо-елементи като ::before и ::after — задръжте курсора върху родителския елемент и панелът показва стиловете на генерираното съдържание отделно от собствените стилове на елемента. CSS персонализираните свойства (променливи) се разрешават до крайната си изчислена стойност, но панелът показва и името на променливата, от която произлиза тя, така че можете да проследите цвят или разстояние обратно до неговия дизайн токен, вместо да виждате само сурово число в пиксели.
В ежедневната работа повечето разработчици посягат към CSS Inspector десетки пъти на сесия — за да проверят защо е колапснал margin, да потвърдят hex код, преди да го копират в стилов лист, или да се уверят, че определена точка на пробив (breakpoint) в media query наистина е приложила предвидените стилове. Тъй като е плаващ панел, а не режим за целия браузър, можете да го оставите отворен, докато превключвате към редактора си на код или файл с дизайн, и после да се върнете точно към същия елемент, без да губите мястото си.
Вижте шрифтове, размери, цветове, разстояния и други незабавно, когато задържите курсора на мишката върху всеки елемент.
Кликнете върху елемента, за да заключите панела от изчезване, което позволява подробна инспекция.
Кликнете два пъти върху стойностите, за да ги промените директно. Вашите редакции ще се отразят незабавно на страницата.
Копирайте отделни свойства или целия блок със стилове в клипборда си с едно кликване.
Вижте стойностите за margin, border и padding визуално.
Показва ширината, височината и позицията на елемента на страницата.
CSS Inspector показва над 40 свойства:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorИнспектирайте неправилно подравнени елементи с прецизност.
Изучавайте стиловете на любимите си уебсайтове.
Тествайте промените, преди да пишете код.
Показвате промени на живо по време на срещи.
Лесно вземете CSS кода за нови елементи.
Кликнете върху иконата CSS Inspector в лентата с инструменти на DevSuite Pro.
Преместете курсора върху всеки елемент, за да видите свойствата му.
Кликнете върху елемента, за да закрепите информационния панел.
Кликнете два пъти върху стойностите, за да ги коригирате.
Копирайте актуализирания код и го използвайте във вашия проект.
Инсталирайте DevSuite Pro безплатно и отключете 64+ инструмента за разработчици за вашия браузър.