Wie kann ich die Struktur einer Webseite online sehen?

1

Wie kann ich die Struktur einer Webseite "inline" mit der visuellen Darstellung der aktuellen Seite auf einmal sehen?

Ich versuche, das HTML-Layout besser zu verstehen, aber es ist schwierig, ein Gefühl dafür zu bekommen, selbst wenn die Quelle auf einem separaten Monitor geöffnet ist, da es nur so viel expansiven und diversen Code gibt. Ich schätze, ich könnte es durchforsten, bereinigen und eine Art benutzerdefiniertes zusammenklappbares Baumsystem einrichten, aber das würde zu lange dauern für die Anzahl der Seiten, für die ich einen schnellen Überblick über das Layout / die Struktur von erhalten möchte.

Als Referenz verwende ich Firefox zum Surfen im Internet.

firefox browser html Coldblackice
quelle
Um ehrlich zu sein, ist es tatsächlich einfacher, Ihren eigenen Code zu schreiben, als die Spaghetti des Codes zu entschlüsseln, der die zufällige Internetseite ist. Auf diese Weise lernen Sie auch besser. Probieren Sie auch das 3D-Layout aus - gehen Sie in den Inspektor und klicken Sie auf die Würfel-Schaltfläche. Auf diese Weise erhalten Sie eine 3D-Visualisierung der Elemente / Strukturen.
Wk_of_Angmar

Antworten:

2

Ich glaube, dass ich weiß, was Sie versuchen zu tun.

Klicken Sie auf die Schaltfläche, während Sie sich auf der Website in Firefox befinden tools Tab oben im Browser.

Bewegen Sie den Mauszeiger zum Web Developer Untermenü und klicken Sie auf Inspector.

Im Inspektor können Sie mit der Maus über das Element fahren, für das Sie den Code anzeigen möchten, und ihn hier beobachten.

Es funktioniert sehr gut für mich, da ich den HTML-Code meiner Website ständig bearbeite.

Ich hoffe, das funktioniert für Sie (wenn ja, bestätigen Sie bitte meine Antwort). Vielen Dank.

HelpingHand
quelle
1

Wie bereits erwähnt, eignen sich Webentwickler-Tools gut für diese Art von Arbeit / Lernen. In allen modernen Browsern ist dies integriert. Da Sie Firefox verwenden, können Sie einfach mit der rechten Maustaste auf das Teil klicken, das Sie interessiert, und "Inspect Element" auswählen. Dadurch wird ein separater Bereich geladen, in dem die Quelle zum gewünschten Element verschoben wird.

Eine weitere Alternative ist das Firefox-Addon Firebug Hier haben sich die meisten dieser Entwicklertools inspirieren lassen. Es gibt viele Überschneidungen mit den in Firefox integrierten Entwicklertools, und dies hängt hauptsächlich von Ihren persönlichen Vorlieben ab. Ich benutze Firebug normalerweise, seit ich es von Anfang an benutzt habe, und ich kenne es am besten.

Das wirklich Schöne an diesen Tools ist, dass sie im Allgemeinen den Bereich der Webseite hervorheben, der ein Ergebnis des HTML-Codes ist. Sie zeigen Ihnen das berechnete CSS sowie, welches andere CSS möglicherweise übereinstimmt, aber nicht angewendet wurde, und visualisieren das DOM für dich etc etc etc

ernie
quelle
1
Klicken Inspect Element Laden Sie den Inspector, auf den ich in meiner Antwort verwiesen habe.
HelpingHand
0

Installieren Firebug Addon für Firefox und benutze inspect element, um zu sehen, was auf der Webseite los ist.

Nikolai
quelle