Tirsdags-tip: Vis kildekode på iOS-enhederne

Er man webudvikler, er det guld værd, at kunne se en hjemmesides kildekode. I alle browsere til computere kan det nemt lade sig gøre, mens det på iOS-enhederne ikke er muligt som standard. Funktionen er ganske enkelt ikke bygget ind i Safari til iOS. I princippet forståeligt nok, da man jo heller ikke skriver hjemmesiderne direkte på eksempelvis iPaden.

Men man kan altså sagtens have behovet for at kunne se koden alligevel. Mange hjemmesider vises nemlig i en speciel udgave på iPhonen, og derfor kan man ikke bare finde kildekoden via computeren, hvor der vises en helt anden side. Af og til kan man forfalske browserens brugeragent, det vil sig fortælle hjemmesiden, at man kommer fra en iPhone, men det er ikke altid det virker.

Heldigvis findes der råd for dette. Flere endda. Fælles for dem er, at de baserer sig på javascript.

Den simple

Den løsning jeg selv bruger er, at lave et bogmærke i Safari på iPhonen. Bogmærket er dog ikke et rigtigt bogmærke, men et der afvikler noget javascriptkode, der åbner en given hjemmesides kildekode i en ny fane.

1) Besøg denne side på din iPhone/iPad

2) Kopier dette:

javascript:var%20sourceWindow%20%3D%20window.open%28%27about%3Ablank%27%29%3B%20%0Avar%20newDoc%20%3D%20sourceWindow.document%3B%20%0AnewDoc.open%28%29%3B%20%0AnewDoc.write%28%27%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20%27%20%2B%20document.location.href%20%2B%20%27%3C/title%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E%27%29%3B%20%0AnewDoc.close%28%29%3B%20%0Avar%20pre%20%3D%20newDoc.body.appendChild%28newDoc.createElement%28%22pre%22%29%29%3B%20%0Apre.appendChild%28newDoc.createTextNode%28document.documentElement.innerHTML%29%29%3B

3) Tilføj et bogmærke i Safari. Giv det en meningsfuld titel, såsom "Vis kode" etc. Lad selve adressefeltet være som det er i første omgang, og gem bogmærket.

4) Tryk på bogmærke-ikonet nederst i Safari og derefter på Rediger. Find bogmærket du lige har lavet og tryk på det. Slet indholdet i adressefeltet, og kopier koden fra punkt 2 ind. Tryk "OK".

Nu kan du fremover gå ind på en hjemmeside og ved at vælge bogmærket "Vis kode" få vist sidens kildekode.

Den mere anvancerede

Skal det være mere avanceret, så kan det også lade sig gøre. Princippet er det samme, men javascriptkoden, er en hel del mere avanceret. Faktisk så omfattende, at den ikke bare kan kopieres ind i et bogmærke. Den ligger i stedet på en server, så det alene er kaldet til denne, der kopieres ind i bogmærket.

Her er koden der skal kopieres til bogmærket:

javascript:(function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getElementById('snpy')%3Bif(typeof%20Snoopy!%3D'undefined')%7BSnoopy.toggle()%3Breturn%7Delse%20if(el)%7Bel.className%3D%2Fclosed%2F.test(el.className)%3Fel.className.replace('closed'%2C'')%3Ael.className%2B'%20closed'%3Breturn%7Ds%3Dd.createElement('link')%3Bs.setAttribute('href'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.css')%3Bs.setAttribute('rel'%2C'stylesheet')%3Bs.setAttribute('type'%2C'text%2Fcss')%3Bd.getElementsByTagName('head')%5B0%5D.appendChild(s)%3Be%3Dd.createElement('script')%3Be.setAttribute('src'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.js')%3Bd.getElementsByTagName('body')%5B0%5D.appendChild(e)%7D)()%3B

Som sagt ligger den "rigtige" kode på en server (snoopy-assets.allmarkedup.com/snoopy-min.js), hvilket måske er en ulempe i forhold til den simple metode, hvor det hele afvikles direkte på iPhonen. Man kan selvfølgelig være fræk og kopiere javascript-filen til sin egen server, så man i hvert fald har kontrol over det og ikke skal være afhængig af om det en dag forsvinder fra den originale side.

Andre løsninger

Der findes i hvert fald 3-4 lignende løsninger, bygget på samme ide med at lade et javascript løbe koden igennem. Nogle tilføjer markup af koden, mens andre ikke gør.

Nu er tippet i hvert fald givet videre, så enhver frit kan se kildekoden på iPhone-formaterede hjemmesider, og dermed aflure nogle af de tricks, der bruges.