Front-End Dev Shortcuts In IOS 15

Ich war ziemlich begeistert, als Chris eine Möglichkeit teilte, „Quellcode anzeigen“ auf Mobilgeräten. Sicher, es ist nicht dasselbe wie eine integrierte Funktion, aber sie ermöglicht iOS-Benutzern wie mir, den Code einer Website zu betrachten, ähnlich wie Android-Nutzer, indem sie view-source: vor eine URL setzen.

Ich war neugierig, welche Entwickler-Tools direkt in meinem iPhone eingebaut sein könnten, also habe ich mich umgesehen. Es ist tatsächlich ein guter Zeitpunkt dafür, da iOS 15 frisch auf den Markt gekommen ist.

Die iOS Shortcuts App ist vielleicht die am meisten unterschätzte App überhaupt. Sie ist ein wenig wie IFTTT oder Zapier für iOS, da Sie diese Hooks erhalten, mit denen Sie spielen können, um eine App auf eine andere reagieren zu lassen und Dinge zu tun. Zum Beispiel die Lichter in meinem Haus dimmen, wenn Marvin Gaye auf dem HomePod läuft. Nützliche Dinge wie diese.

Und wissen Sie was? Es gibt tatsächlich ein paar vorgefertigte Shortcut-Rezepte, die für Front-End-Entwickler nützlich sein können. Und Sie können sie direkt in der Galerie der Shortcuts App finden.

Quellcode anzeigen (wirklich!)

Natürlich gibt es einen vorgefertigten Shortcut, um den Quellcode jeder Webseite anzuzeigen.

Jetzt kann ich, wenn ich auf einer Webseite bin, Siri bitten, den Quellcode anzuzeigen, oder das Share Sheet öffnen, um den Shortcut auszulösen.

Die Option wird zum Share Sheet hinzugefügt.

Beachten Sie die Option zum Teilen des Quellcodes.

Das wäre perfekt, wenn wir Zeilennummern, Syntaxhervorhebung, eine Mono-Schriftart (ernsthaft!), Zoom und… OK, vielleicht ist es weit davon entfernt, perfekt zu sein.

Alle Bilder von einer Seite holen

Das ist ein weiteres Juwel unter den Shortcuts. Öffnen Sie eine Webseite und bitten Sie Siri, "Bilder von Seite holen". Nun, ich bin kein Fan davon, Assets von Webseiten zu scrapen, besonders in großen Mengen, aber nicht jede Bildersammlung muss zwielichtig sein.

Wayback Machine

Wie lustig ist das denn?! Jemand hatte die Idee, einen Shortcut zu erstellen, der die aktuelle Seite in der Wayback Machine öffnet, um frühere Versionen zu sehen.

So cool, diesen Namen in einer Optionsliste zu sehen.

Seit 2007 7.599 Mal gespeichert? Das ist mehr als einmal pro Tag!

Webseite bearbeiten

Ich denke tatsächlich, dass dieser nützlich ist. Sagen wir, Sie möchten Inhalte in einem Design testen und sehen, wie sie genau auf Mobilgeräten aussehen. Dieser Shortcut aktiviert im Grunde contenteditable für jedes Element auf der Seite.

Das war's! Noch einmal, all diese sind direkt in der iOS Shortcuts App im Reiter Galerie verfügbar. Vielleicht gibt es noch andere. Oder vielleicht hat jemand einen coolen Shortcut erstellt, den er mit uns anderen teilen kann. 😉

Michael

# 29. September 2021

Ich benutze das folgende Bookmarklet, das einen neuen Tab mit dem Quellcode der aktuellen Seite öffnet.

javascript:(function() {
    var a = window.open('about:blank').document;
    a.write('<!DOCTYPE html><html><head><title>Source of ' + location.href + '</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');
    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))
})();

Das Problem mit dem Shortcut ist, dass er nicht auf das DOM der aktuellen Seite zugreifen kann, sodass er eine weitere Anfrage stellt, die *anders* sein könnte als die tatsächliche Seite, die Sie debuggen.

Ich benutze auch Eruda, das eine Konsole, ein Netzwerk- und DOM-Browser hat. Es wurde mit der Veröffentlichung von iOS 15 auf eine Web-Erweiterung portiert, was es etwas bequemer macht.

Antworten

Bibin R

Wie bekomme ich diese Shortcuts?

Geoff Graham

Permalink zum Kommentar# 30. September 2021

Sie sind direkt in der Shortcuts App im Reiter Galerie verfügbar.

# 1. Oktober 2021

Probieren Sie Inspect Browser aus. Es kann all das und mehr.

Quellcode anzeigen (wirklich!)

Alle Bilder von einer Seite holen

Wayback Machine

Webseite bearbeiten

Kommentare

Schreibe einen Kommentar Antwort abbrechen