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?