Quellcode einer Website auf dem iPhone/iPad anzeigen

Posted on 6. März 2023 in Smartphones & iPhone, Tablet PCs & iPad, Tutorial // 0 Comments

Mit Safari auf dem Mac ist es ganz einfach den Quellcode einer Webseite zu sehen. Mit dem iPad oder dem iPhone ist dies jetzt auch möglich, es bedarf aber eines kleinen Tricks. Der Entwickler Ole Michelsen hat ein kleines Script entwickelt, wodurch man ganz einfach den Quellcode anzeigen lassen kann.

Anleitung:

1. Gehe mit deinem iOS Gerät auf eine beliebige Seite im Internet, setze ein neues Lesezeichen und nenne dieses Quellcode (oder so wie du willst).

2. Gehe in die Lesezeichen Leiste und klicke auf bearbeiten und wähle nun dein erstelltes Lesezeichen aus.

3. Die URL im unteren Feld ersetzt du durch diesen Code:

javascript:(() => {
  var e = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0',
  t = window.open('about:blank').document;
  t.write(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Source of ${location.href}</title>
        <link rel=stylesheet href=${e}/themes/prism.min.css>
      </head>
      <body bgcolor=#f5f2f0>
        <script src=${e}/components/prism-core.min.js></script>
        <script src=${e}/plugins/autoloader/prism-autoloader.min.js></script>
        <script src=${e}/plugins/autolinker/prism-autolinker.min.js></script>
      </body>
    </html>`),
  t.close();
  var r = t.body.appendChild(t.createElement('pre')).appendChild(t.createElement('code'));
  r.className = 'language-html',
  r.appendChild(t.createTextNode(document.documentElement.outerHTML))
})();

4. Jetzt nur noch Speichern und dann kannst du, durch einen klick auf das Lesezeichen, auf jeder beliebigen Webseite den Quellcode sehen.

Achtung: Abweichungen möglich

Die im Browser angezeigte Quellcodeansicht einer Webseite entspricht damit nicht immer genau dem ursprünglichen HTML-Code, der vom Server der Website gesendet wurde. Stattdessen wird der HTML-Code vom Browser in einen sogenannten DOM (Document Object Model) umgewandelt, der von JavaScript manipuliert werden kann, um dynamische Effekte auf der Webseite zu erzeugen. Wenn viel JavaScript auf der Seite verwendet wird, kann der generierte DOM von der ursprünglichen HTML-Version abweichen. Das kann dazu führen, dass die in der Quellcodeansicht des Browsers angezeigten Informationen nicht immer genau mit dem übereinstimmen, was tatsächlich an den Browser gesendet wurde.

Tags: