Grid/Flex Visualizer открива всеки CSS Grid и Flexbox контейнер на уебстраница и рендира структурата на тяхното оформление като цветни слоеве директно върху страницата. Вижте мрежовите линии, размерите на пистите (tracks), стойностите на празнините (gaps), посоките на flex, осите на подравняване и оразмеряването на дъщерните елементи — всичко това визуализирано без отваряне на DevTools.
CSS Grid и Flexbox са основите на модерното уеб оформление, но те са невидими по подразбиране. Не можете да видите мрежовите линии, осите на flex или стойностите на празнините само чрез гледане на страницата. Браузърните DevTools предлагат някои функции за наслагване на мрежата, но те изискват първо да откриете контейнера в панела Elements, да активирате наслагването ръчно и показват само по един контейнер в даден момент. Grid/Flex Visualizer автоматизира това напълно — той сканира страницата, открива всеки Grid и Flex контейнер и рендира тяхната структура като визуални слоеве. Grid контейнерите показват линии за колоните и редовете с обозначени размери на пистите. Flex контейнерите показват посоката на основната ос, подравняването на напречната ос и как се разпределя пространството. Празнините са подчертани с цветни ленти, показващи техните пикселни стойности. Щракнете върху който и да е контейнер, за да видите детайлен панел със свойства за всяко свойство на оформлението.
Grid контейнерите показват цветни линии за всяка писта (track) на ред и колона. Размерите на пистите (1fr, auto, 200px) са обозначени на всяка линия. Областите на празнините (gap) са подчертани с полупрозрачни ленти, показващи стойността на празнината в пиксели. Скритите и явните писти се различават чрез плътни срещу прекъснати линии.
Flex контейнерите показват основната ос като стрелка (row, row-reverse, column, column-reverse) и напречната ос перпендикулярно на нея. justify-content и align-items са визуализирани с обозначени индикатори за подравняване, показващи как е разпределено пространството между дъщерните елементи.
Инструментът автоматично сканира цялата страница и открива всеки елемент с display: grid или display: flex (включително техните инлайн варианти). Броячът на значката показва общия брой открити елементи. Няма нужда ръчно да избирате елементи — всички те са намерени и изброени автоматично.
Щракнете върху който и да е контейнер, за да видите пълните му свойства за оформление: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap и всички свойства за оразмеряване на дъщерните елементи (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Всеки дъщерен елемент в рамките на Grid или Flex контейнер показва действителния си рендиран размер, стойностите на flex-grow/shrink и позиционирането в grid областта. Вижте точно колко място заема всяко дете и защо.
Открива Grid и Flex контейнери, вложени в други Grid/Flex контейнери. Слоят рендира всяко ниво на влагане с различни цветове, така че да можете да видите пълната йерархия на оформлението.
Дадена grid колона е по-широка или по-тясна от очакваното? Слоят показва действителните размери на пистата (1fr, изчислен на 342px, auto изчислен на 156px), така че да можете да видите точно как браузърът е изчислил размерите.
Защо един flex наследник е по-широк от друг? Визуализаторът показва стойностите на flex-grow, flex-shrink и flex-basis за всяко дете, правейки логиката за разпределение на пространството видима.
Преоразмерете браузъра и наблюдавайте как се актуализира grid слоят в реално време. Вижте как се променя grid-template-columns от „1fr 1fr 1fr“ на десктоп към „1fr“ на мобилно устройство и проверете прехода при всяка контролна точка.
Посетете добре изградени уебсайтове и вижте как те използват Grid и Flex оформления в реална среда. Визуалните слоеве правят абстрактните концепции (fr единици, auto-fit, justify-content) осезаеми и интерактивни.
Проверете дали всички мрежи от карти на страницата използват един и същ брой колони и стойности на празнини. Слоят прави несъответствията видими веднага — една секция, използваща празнина от 20px, докато друга използва 24px, е очевидна от пръв поглед.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Grid/Flex Visualizer. Инструментът сканира страницата и открива всички Grid и Flex контейнери.
Всеки Grid и Flex контейнер получава цветен слой за границите. Панел изброява всички открити контейнери с техния тип (Grid или Flex) и селектор на елемента.
Щракнете върху който и да е контейнер, за да видите пълните му свойства за оформление. Grid контейнерите показват линиите и размерите на пистите; Flex контейнерите показват посоките на осите и подравняването.
Всеки дъщерен елемент показва своя изчислен размер и свойства, специфични за оформлението (flex-grow, grid-area). Разберете как се разпределя пространството между дъщерните елементи.
Щракнете отново върху иконата на инструмента, за да премахнете всички слоеве и да се върнете към нормалния изглед на страницата.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
