On-line prohlížeč zdrojového kódu HTML stránek
autor Kryštof Laryš
| publikováno 11. května 2008
Jste vývojáři webových stránek nebo vás tato oblast alespoň zajímá? Chtěli jste si v Internet Exploreru otevřít zdrojový kód prohlížené stránky, ale bylo to příliš nepohodlné? Nechtěla se vám stále otevírat nová okna, složitě vyhledávat a v kódu se sotva orientovat, natož s ním pracovat? Pak mám pro vás jednoduché řešení.
Jednou jsem si řekl, že bych chtěl mít program, který prohlíží primárně zdrojový kód stránek a ne samotné stránky s tím, že nemusím stále někde přepínat a zavírat okna. Tak jsem si jej tedy napsal sám.
V záhlaví se nachází hlavní menu, pod ním, v levé části okna probíhá celá mini navigace po internetových stránkách a v pravé části se nachází velký richtextbox, který zobrazuje zdrojový kód aktuálně prohlížené stránky. Pod ním, v zápatí, máte tlačítko vyhledat a také radiobuttony pro nastavení kódování.
Hlavní okno programu
Hlavní menu
V hlavním menu najdete položky soubor, prohlížené stránky, nastavení, o programu a web autora. Po kliknutí na položku soubor se vám zobrazí nabídka pro základní práci s kódem a stránkou. Kód můžete uložit do souboru, zobrazit jeho náhled v prohlížeči Internet Explorer a otevřít jeho kód v programu Microsoft Word. Se stránkou můžete dělat základní operace, jako jsou tisk stránky, uložení stránky atd.
Druhá položka v menu jsou prohlížené stránky. Tato položka automaticky přidává do svého seznamu stránky, které jste navštívili, ale ne ty, na které jste se navigovali přes mini prohlížeč. Tyto adresy se automaticky ukládají do XML souboru, který se nachází v adresáři se spuštěným programem, takže pokud jej nesmažete, budete mít navštívené stránky uloženy i po novém spuštění programu.
Třetí a zároveň nejvýznamnější položka je nastavení. Nejen, že umožňuje základní úpravu programu v podobě vypnutí a zapnutí nápovědných bublin, stejně tak vypnutí a zapnutí doplňování url adres, a to všechno se samozřejmě hned ukládá do konfiguračního souboru, který se také nachází v adresáři s programem, takže po dalším spuštění programu už nemusíte vše nastavovat znovu, ale nastavení se načte automaticky ze souboru. Silná stránka tohoto programu jsou další dvě subpoložky, a ty slouží pro přidání a odebrání vlastního programu k editaci. Díky tomu tento program slouží jako prostředník mezi prohlížečem, zdrojovým kódem stránky a profesionálním editorem. Jednoduše kliknete na přidání programu k editaci a budete vyzváni k vybrání souboru, který se bude spouštět a názvu, jak jej chcete pojmenovat. Vyberete si například editor FrontPage a ten se automaticky přiřadí do submenu s kódem a uloží se do aktuální konfigurace. Kdykoliv příště vám tedy stačí, abyste klikli na zobrazení kódu v programu FrontPage, a můj program vám jej otevře s aktuálně prohlíženým zdrojovým kódem. Pokud budete chtít nějaký editor odstranit ze svého seznamu a tedy i z menu, není problém. K tomu slouží položka pro odebrání programu k editaci a práce s ní je velice intuitivní.
Mini prohlížeč
Vyskytuje se v levé části programu a slouží opravdu jen pro náhled webové stránky a jen základní práci s ní, jako je navigace, tlačítka vpřed a zpět, domů, tisk stránky atd. Důležité na tomto mini prohlížeči je akorát to, že vám automaticky zobrazuje zdrojový kód aktuálně prohlížené stránky, zatímco vy klikáte na různé odkazy.
Zobrazovač zdrojového kódu
Hlavní část programu, velký richtextbox, který zobrazuje zdrojový kód. Naimplementoval jsem základní zvýraznění syntaxe, tedy v kódu se automaticky při načítání obarvují určité tagy specifickými barvami. Slouží to primárně pro zlepšení orientace v kódu samotném a jeho viditelnosti a také jsem nepoužil příliš odlišné barvy, které používají známé editory HTML stránek, takže webový vývojář se snadno zorientuje. V kódu můžete dělat základní úpravy jako vpisování a smazávání textu, který si později zobrazíte v prohlížeči, nebo vyhledávat atd. Pokud by se stalo, že by se vám zobrazil kód se „špatnou češtinou“, tedy se špatným kódováním, můžete si jej přepnout, vyzkoušet kódování UTF8. Já jsem se setkal s problémy asi jen na stránce seznam.cz, kde používají právě kódování UTF8 a při použití defaultního kódování se ve zdrojovém kódu čeština nezobrazovala úplně korektně. Pokud se vám toto stane, stačí kódování přepnout.
Když kliknete v kódu pravým tlačítkem myši, zobrazí se kontextové menu, které prakticky kopíruje pro lepší přístup subpoložku kód z hlavního menu. Položka, která ještě stojí za zmínku je možnost vypnout zvýraznění syntaxe. To je jen takový bonus, pokud by chtěl někdo prohlížet kód jen v holém textu. Nutno ale dodat, že větší stránky (zdrojový kód samotné stránky větší než 70 KB), se načítají znatelně delší dobu se zapnutou syntaxí, než s vypnutou. To je ovšem pochopitelné, jelikož se na stránce prohledává asi 85 různých tagů a textů ke zvýraznění.
Závěr
K psaní by to bylo asi vše. Pro ty, kdo mají zájem, doporučuji program vyzkoušet a uvidíte sami, jestli vám sedí nebo ne. Klidně pište návrhy, nápady a případné chyby do komentářů.
Samotný program v jeho aktuální verzi naleznete zde.
O případné nové verzi budu informovat v komentářích.