Broncode websites bekijken op iPhone, iPad en Mac

Zo bekijk je de broncode van websites op iPhone, iPad en Mac

Wil je de broncode (HTML, CSS of JavaScript) van een webpagina bekijken? Dat kan met speciale apps, maar het lukt ook met deze handige truc voor iOS. Daarnaast leggen we uit hoe je de broncode van een webpagina bekijkt op de Mac.

Broncode van webpagina’s bekijken

Zie je een interessant effect op een website en wil je weten hoe het is gemaakt? Dan kun je de HTML-broncode van een webpagina bekijken. Op de Mac is dat heel eenvoudig, maar op iPhone en iPad zul je een app of een speciaal trucje ervoor moeten gebruiken.

Broncode bekijken op de Mac

Als je in Safari op de Mac de broncode van een webpagina wilt bekijken, dan is dat heel eenvoudig:

  1. Open de gewenste website in Safari.
  2. Klik met de rechtermuisknop op een willekeurige plek.
  3. Kies Toon paginabron.

Is deze optie zichtbaar? Dan zul je eerst het ontwikkelmenu moeten activeren:

  1. Ga naar Safari > Voorkeuren.
  2. Ga naar het tabblad Geavanceerd.
  3. Zet een vinkje bij Toon Ontwikkel-menu in menubalk.

Broncode van websites bekijken op de Mac

In je menubalk zul je nu de optie Ontwikkel zien. Vanaf nu kun je op elke webpagina naar Ontwikkel > Toon paginabron gaan om te zien hoe de HTML-code eruit ziet. Je kunt ook de toetscombinatie Option+Command+U gebruiken. De broncode verschijnt nu in een apart venster onderin het scherm. Je kunt ook de eerder genoemde methode met de rechtermuisklik gebruiken en Toon paginabron kiezen (of Inspecteer element) als je de code van een specifiek onderdeel wilt bekijken.

Broncode bekijken op iPhone en iPad

Op de iPhone en iPad werkt het iets anders, omdat je daar geen uitgebreide menu-opties hebt. Zo werkt het voor Safari en Chrome op iOS:

  1. Open een willekeurige webpagina in Safari op iPhone of iPad.
  2. Tik op de deelknop en kies Bladwijzer.
  3. Geef de bladwijzer de naam ‘Toon paginabron’.
  4. Tik op Bewaar.
  5. Ga terug naar de website in Safari.
  6. Tik op het bladwijzer-icoon en vervolgens op Wijzig.
  7. Open de ‘Toon broncode’-bladwijzer die je zojuist hebt gemaakt.
  8. Plak in het tweede veld de JavaScript-code die je hieronder ziet. Of kopieer het uit dit tekstbestand.

javascript:(function(){var a=window.open('about:blank').document;a.write('< !DOCTYPE html>Source of '+location.href+'');a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

Je kunt nu naar elke webpagina gaan en de broncode ervan bekijken in Safari en Chrome, zowel op iPhone als iPad. Telkens wanneer je op Bladwijzers > Toon paginabron tikt krijg je de broncode te zien.

Broncode bekijken met apps

Er zijn ook apps waarmee het kan, zoals View Source en Source for Webpage. Met deze apps kun je HTML, CSS en JavaScript bekijken. Soms zit er ook een Safari-extensie voor iOS in zodat je bepaalde termen kunt laten markeren. Met dergelijke apps gaat het nog makkelijker: je vult een URL in en ziet meteen de broncode.

Via: Appletoolbox, met dank aan iCulture-lezer Daniel

Suggestie hoe we dit artikel kunnen verbeteren? Laat het ons weten!

Informatie

Laatst bijgewerkt december 2018
Categorie Internet
Onderwerpen html, webbrowser