Aggiungi a Chrome
← Torna alle funzionalità
Free

Modalità contorno

La Modalità contorno aggiunge bordi contorno colorati a ogni elemento HTML, dandoti una vista a raggi X istantanea della struttura della pagina.

Aggiungi a Chrome Aggiungi a Edge Aggiungi a FireFox

Capire il layout di una pagina è spesso il primo passo nel debug dei problemi CSS. Lo spazio bianco extra è causato dal padding o dal margine? La Modalità contorno risponde a queste domande istantaneamente disegnando bordi colorati attorno a ogni elemento.

Anteprima dal vivo
example.com/landing-page Outline Mode: ON
Logo
Home
About
Contact
Welcome to Our Site
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna.
Get Started
Learn More
body header nav main h1 p button
Caratteristiche principali

Attivazione con un clic

Attiva i contorni su tutti gli elementi con un solo clic — nessuna configurazione necessaria.

Codifica colore per tipo di elemento

Diversi elementi HTML ricevono diversi colori di contorno. Header in blu, navigazione in giallo, contenuto principale in verde, titoli in viola, paragrafi in rosa, pulsanti in ciano.

Debug spaziatura e overflow

I contorni rendono visibili i problemi CSS invisibili. Individua margini inaspettati, padding eccessivo, overflow e elementi collassati.

Gerarchia di annidamento completa

I contorni annidati rivelano la struttura genitore-figlio del DOM.

Funziona su qualsiasi sito

Attivalo su qualsiasi pagina — progetti tuoi, siti clienti, pagine concorrenti. I contorni vengono applicati tramite iniezione CSS.

Zero impatto sul layout

I contorni vengono disegnati usando CSS outline (non border), quindi non aggiungono alle dimensioni del box model dell'elemento.

Cosa puoi ispezionare

Modalità contorno covers the following, organized by category:

Elementi strutturali

  • html
  • body
  • header
  • footer
  • main
  • section
  • article
  • aside
  • nav

Elementi di contenuto

  • h1–h6 headings
  • p paragraphs
  • span
  • a links
  • blockquote
  • pre
  • code

Elementi interattivi

  • button
  • input
  • textarea
  • select
  • form
  • label

Contenitori layout

  • div
  • ul / ol / li
  • table / tr / td
  • figure
  • details
Casi d'uso comuni

Debug spazi bianchi inaspettati

Quello spazio misterioso tra le sezioni? Attiva i contorni e vedrai subito se è causato da un margine, padding o un div vuoto.

Revisione layout responsive

Ridimensiona la finestra del browser con i contorni attivi per vedere come il layout si riorganizza ai breakpoint.

Audit struttura DOM

Troppi div annidati? La Modalità contorno rende l'annidamento eccessivo visivamente ovvio.

Confronto design tra pagine

Attiva i contorni sulla homepage, poi su una sottopagina. Condividono la stessa struttura?

Insegnamento concetti di layout

Mostra agli studenti come gli elementi HTML creano box e come funziona il box model.

Come usare
1

Attiva la Modalità contorno

Apri il dock di DevSuite Pro e clicca sull'icona Modalità contorno.

2

Leggi la codifica colore

Ogni tipo di elemento ha un colore distinto.

3

Identifica problemi di layout

Cerca gap inaspettati, elementi che si estendono oltre i contenitori, spaziatura asimmetrica.

4

Combina con altri strumenti

Usa la Modalità contorno come punto di partenza, poi passa all'Ispettore CSS per valori specifici.

5

Disattiva quando hai finito

Clicca di nuovo sull'icona per rimuovere tutti i contorni.

Pronto a provare? Modalità contorno?

Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.

Aggiungi a Chrome Aggiungi a Edge Aggiungi a FireFox