TPvAC12.tmp

TIP#433: Jak v mobilním prohlížeči zobrazím zdrojový kód stránky?

Pokud používáte mobilní telefon nebo tablet a potřebujete zobrazit zdrojový kód (třeba chcete stáhnout fotku z Instagramu) tak je to poměrně komplikované. Mobilní prohlížeče přímo zobrazení zdrojového kódu někdo v menu nebo v kontextovém menu nemají a některé to vůbec neumí.

2016-03-06 09.35.35.pngV Chrome na Androidu je to „skoro“ jednoduché. Umí totiž klasické view-source: a můžete to ručně dopsat do adresního řádku (viz Jaké chrome:// adresy lze použít v políčku pro adresu? Kompletní přehled). A ano, pochopili jste správně, že na iOSu v Chrome tohle udělat nejde. Moc toho v zobrazení zdrojového kódu ale udělat nejde, ale je alespoň dobře, že kliknutí na určitý řádek ho zvětší.

Mobilní Safari (iOS) žádné zobrazení zdrojového kódu neumí. Jde to obejít tím, že si do oblíbených přidáte bookmarklet pro zobrazení zdrojového kódu, viz How to View Website Source Codes on iPad / iPhone [Quicktip]. Případně varianta v podobě Snoopy.

2016-03-06 09.35.45.pngFirefox na Androidu umí stejné view-source: jako Chrome na Androidu. Na iOSu ale view-source: neumí.

Opera na mobilních zařízeních by měla umožňovat použít server:source pro zobrazení zdrojového kódu. To „server:source“ napíšete do adresního řádku poté, co se vám natáhla stránka, jejíž HTML kód si chcete zobrazit. Ale neověřeno zda to funguje stejně na Androidu jako na iOSu.


Windows 10/8 na tabletu
jsou celkem bez problémů, je tam buď IE nebo Edge, v obou je dostupné zobrazení zdrojového kódu (a také pokročilejší nástroje pro vývojáře, viz Microsoft Edge má také ladicí nástroj pro webové vývojáře. Visí na F12).

Na pomoci přichází bookmarlet

Pokud jste kodéři, tak možná budete vědět, že jde použít

alert(document.getElementsByTagName(‚html‘)[0].innerHTML);

v adresním řádku. V Chrome by to mělo určitě zafungovat, ale nezobrazí vám to celý zdrojový kód. A pochopitelně nejsou zvýrazněné konstrukce ani nic jiného.

A když už jsme u bookmarkletů, tak si můžete vytvořit i bookmarklet z

javascript:document.location=’view-source:’+document.location;

bude to použitelné samozřejmě jenom tam, kde view-source: funguje.

Cesta přes aplikace

Protože na všechno na světě existují aplikace, tak pro Android si v Google Play můžete pořídit třeba View Web Source. To vám zobrazení zdrojového kódu přidá do menu pro sdílení. Ale pozor, vůbec netuším proč chce přístup k informacím o volání, takže tady bych byl hodně opatrný. Spíš to ale použijte pro nalezení „podobných“ aplikací, vpravo najdete seznam dalších na zobrazení zdrojového kódu. Lepší (a hlavně novější) bude VT View Source kde nemají ani žádná potřeštěná vyžadovaná práva.

Pro iOS pochopitelně existuje aplikace také, například View Source – HTML, JavaScript and CSS (ale stojí 0.99 USD). Zde se zobrazení zdrojového kódu také dostane do onoho extrémně zmateného „menu“ pro sdílení a aktivity (a možná si to budete muset v Nastavení zapnout jako viditelné).

Android a Android SDK

Pokud máte Chrome na Androidu a telefon připojený přes USB, tak je možné použít dostupné ladící nástroje (viz například Debugging JavaScript on Android and iOS kde najdete hodně dalších zajímavých informací), které jsou součástí Android SDK. Ale to už se dostáváme mimo běžné „zobrazení zdrojového kódu“. Pro úplnost ale bylo nutné to přidat.