Rendered Source aneb jak zobrazit generovaný kód
Jako
slepec na střelnici, který se marně snaží trefit růži. Tak si připadám
při ladění JavaScriptu, který generuje HTML výstup. Pokud se napoprvé
netrefím, hledání chyb bývá zdlouhavé a nervy drásající.
Nesmírně užitečnou pomocí je proto vypsání kódu, který prohlížeč
skutečně zobrazuje (rendered source). Tohle dokáže Internet Explorer díky
své proprietární vlastnosti outerHTML
. Stačí tedy nějakým
způsobem zobrazit následující:
document.documentElement.outerHTML
Na Choseho blogu je popsáno jednoduché řešení využívající značky XMP. Bohužel se tím přepíše původní obsah okna, podívejme se tedy po elegantnějším řešení. Aby umělo tyto vychytávky:
- aktivace přes kontextové menu
- zobrazení zdrojového kódu do nového okna
- při označení části stránky se zobrazí jen její kód
Jak na to?
Zobrazení zdroje bude mít na starosti skript v souboru
renderedsource.html
. Jeho volání přes kontextové menu Exploreru
se docílí úpravou registrů. Stačí přidat v místě
HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerMenuExt
nový
klíč, jehož název odpovídá vzniklé položce v menu, tedy například
View &Rendered Source. Tím ampersandem před „R“se označuje
hot-key. A výchozí hodnotou tohoto klíče bude právě cesta k souboru
renderedsource.html
. Pro kontrolu mrkněte ještě na screenshot.
A nyní k samotnému souboru renderedsource.html
. Podívejte
se na jeho zdrojový kód (ke stažení), kde
najdete i vysvětlující komentáře:
<script type="text/javascript">
var ext = external.menuArguments;
var doc = ext.document; // objekt document z okénka, odkud byl skript aktivován
var sel = doc.selection; // označená část stránky
// je něco označeno?
if (sel.type != 'None')
var source = sel.createRange().htmlText; // HTML kód označené oblasti
else
var source = doc.documentElement.outerHTML; // HTML kód celé stánky
// otevři okno
var popup = window.open("about:blank", "renderedsource", "toolbar=no,location=no,menubar=no,status=no,scrollbars=yes,resizable=yes");
var pDoc = popup.document;
// vypíšeme zdrojový kód
pDoc.open("text/plain");
pDoc.write(source);
pDoc.close();
pDoc.title = "Rendered Source (" + doc.title + ")";
</script>
Teď už stačí jen otevřít si nějakou stránku v exploreru, kliknout do ní pravým tlačíkem a v kontextovém menu zvolit „View Rendered Source“. A to je vše, přátelé ?
p.s. Nevíte o nějakém šikovném debuggeru pro JavaScript?
Komentáře
pixy #1
Dost komplexní javscriptový debugger se jmenuje Mozilla. Breakpointy, trasování, výpisy stavů proměnných a objektů atd. Vše, co člověk může potřebovat.
David Grudl https://davidgrudl.com #2
#1 pixy, aha, takže to jen pod svícnem byla tma nejtemnější ?
JohnyB http://www.alphanumeric.cz #3
Aha, diky, ja prozmenu nevedel, ze pridani polozky do kontextoveho menu IE je tak jednoduche. :)
Inu, IE zacina byt zajimavy nastroj pri ladeni ;), na nic jineho ani neni… Momentalne v nem mam asi 6 toolbaru, hlavicko-ctecku, hodne bookmarkletu a podobnych blbosti. Tohle se bude hodit.
Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.