Webentwicklung, Browser, DebuggenQuelltext von dynamisch veränderten HTML-Seiten ansehen
Ändere ich eine schon geladene Seite mit JavaScript (per DOM oder innerHTML), habe ich keine direkte Möglichkeit mir die nun geänderten Struktur als Quelltext anzuzeigen. Zumindest nicht mit derzeit aktuellen Browsern ohne Erweiterungen.
Eine schnelle und einfache Möglichkeit bietet hier ein kleines Bookmarklet:
Dynamischen Quelltext anzeigen
javascript: void window.open().document.write( '<pre>' + document.getElementsByTagName('html')[0].innerHTML.replace( /\s{2,}/g, '').replace( /<(.+?)>/g, '\r\n<$1>') + '</pre>');
Das Bookmarklet fügt vor jedem Tag ein Leerzeichen ein, da gerade die Formatierung des generierten Codes oft völlig unbrauchbar ist.
Ist das unerwünscht lässt folgendes Bookmarklet die Formatierung unangetastet: Dynamischen Quelltext mit originaler Formatierung anzeigen.
Das Bookmarklet öffnet ein neues Fenster und zeigt in diesem den Quelltext der ursprünglichen Seite an.
Um das Bookmarklet einzurichten, fügen sie es einfach ihren Bookmarks (Favoriten) hinzu (z.B. Rechtklick) oder ziehen es auf eine Button-Leiste.