source code

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.

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?