El mode només contorn afegeix contorns de vora codificats per colors a cada element HTML d'una pàgina web, oferint-te una vista instantània de raigs X de l'estructura de disseny de la pàgina. Mira exactament on es troba cada div, secció, capçalera, paràgraf i botó — incloent-hi les seves relacions de padding, marges i niuament.
Entendre el disseny d'una pàgina és sovint el primer pas per depurar problemes de CSS. Aquest espai en blanc addicional és causat pel padding o pel marge? Un element és més ample del que s'esperava a causa d'un fill sense restriccions? Hi ha dos elements que se superposen a causa de posicions conflictives? El mode només contorn respon a aquestes preguntes a l'instant dibuixant vores de colors al voltant de cada element de la pàgina. A diferència de les DevTools del navegador (que només ressalten un element alhora), aquesta eina contorneja tot simultàniament — oferint-te la imatge completa. Cada tipus d'element HTML rep un color diferent: les capçaleres són blaves, els elements de navegació són grocs, el contingut principal és verd, els paràgrafs són roses, els botons són cian, i així successivament. La codificació per colors facilita la detecció de patrons estructurals i la identificació d'elements d'un cop d'ull sense llegir el DOM.
Activa o desactiva els contorns en cada element amb un sol clic — sense configuració ni panell de configuració. Clica una vegada per veure totes les vores, clica de nou per eliminar-les. La manera més ràpida de visualitzar l'estructura del disseny en qualsevol pàgina web.
Diferents elements HTML reben diferents colors de contorn per a una identificació visual instantània. Capçaleres en blau, navegació en groc, contingut principal en verd, capçaleres en lila, paràgrafs en rosa, botons en cian, divs en gris. Pots identificar els tipus d'elements sense llegir el DOM.
Els contorns fan visibles els problemes invisibles de CSS. Detecta marges inesperats que creen espais en blanc, padding que fa que els elements siguin més amples del que s'esperava, desbordament que causa barres de desplaçament horitzontals o elements col·lapsats que tenen una alçada zero. Cada límit de caixa es torna visible.
Els contorns niuats revelen l'estructura pare-fill del DOM. Mira a quina profunditat estan niuats els elements, quin contenidor envolta cada contingut i on cauen els límits de cada nivell de niuament. Inestimable per entendre dissenys complexos de quadrícula (grid) i flex.
Activa-ho en qualsevol pàgina web — els teus propis projectes, llocs de clients, pàgines de la competència o referències de disseny. Els contorns s'apliquen mitjançant injecció de CSS i no modifiquen l'estructura del DOM ni afecten el comportament de JavaScript.
Els contorns es dibuixen utilitzant l'outline de CSS (no border), el que significa que no s'afegeixen a les dimensions del box model de l'element. El disseny de la pàgina es manté exactament com estava — els contorns són purament visuals i no provoquen cap reflux (reflow).
Mode només contorn covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsAquest buit misteriós entre seccions? Activa els contorns i veuràs immediatament si és causat per un marge a l'element inferior, un padding al contenidor pare o un div buit que no sabies que hi era. El que costa minuts a les DevTools costa segons amb el mode contorn.
Canvia la mida de la finestra del teu navegador amb els contorns activats per observar com el disseny es reajusta a través dels punts de ruptura (breakpoints). Mira quins elements s'apilen, quins es desborden i on canvia l'estructura de la quadrícula (grid) o flexbox — tot d'un cop d'ull.
Massa divs niuats? Elements contenidors innecessaris? El mode contorn fa que el niuament excessiu sigui visualment obvi — si veus més de 5 contorns concèntrics al voltant de contingut simple, el marcatge podria simplificar-se. Ideal per a la revisió de codi de les PR de frontend.
Activa els contorns a la teva pàgina d'inici i després en una subpàgina. Comparteixen la mateixa estructura de disseny? Els marges i les amplades de les seccions són coherents? Els contorns fan que la coherència estructural (o la manca d'ella) sigui immediatament visible.
Mostra als estudiants com els elements HTML creen caixes, com funciona el box model amb padding i marges, i com el niuament crea la jerarquia de la pàgina. El mode contorn converteix conceptes abstractes en demostracions visibles i interactives.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona Mode només contorn. A l'instant, cada element HTML de la pàgina obté una vora de contorn de color.
Cada tipus d'element té un color diferent. Blau per a elements estructurals (capçalera, peu de pàgina, secció), verd per a àrees de contingut principal, lila per a encapçalaments, rosa per a paràgrafs, cian per a botons i entrades, groc per a navegació i gris per a divs i spans genèrics.
Busca buits inesperats (causats per marges), elements que s'estenen més enllà dels seus contenidors (desbordament), espais asimètrics (padding inconsistent) o contenidors profundament niuats (niuament de divs innecessari). Tot es torna immediatament visible.
Utilitza el mode contorn com a punt de partida, després canvia al CSS Inspector per comprovar valors específics en els elements que hagis identificat, o a Mesura la distància per verificar l'espaiat exacte entre els elements contornejats.
Clica de nou la icona del mode contorn per eliminar tots els contorns i tornar a la vista normal de la pàgina. No cal neteja — és un simple interruptor.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.