iOS 15 中的前端开发快捷方式 | CSS-Tricks

当 Chris 分享了在手机上“查看源代码”的方法时，我感到非常兴奋。当然，它不像内置功能那样，但它允许像我这样的 iOS 用户查看网站的代码，就像 Android 用户可以通过在 URL 前添加 view-source: 来查看一样。

我很好奇我的 iPhone 中是否内置了一些与开发相关的工具，所以我到处查找。事实上，现在 iOS 15 刚刚发布，正是进行这项工作的好时机。

iOS 快捷方式应用程序可能是所有应用程序中最被低估的应用程序。它有点像 iOS 的 IFTTT 或 Zapier，您可以使用这些钩子来让一个应用程序响应另一个应用程序并执行操作。比如，当 Marvin Gaye 在 HomePod 上播放时，让我的家里的灯变暗。这样有用的东西。

你猜怎么着？事实证明，有一些预制快捷方式配方对前端开发人员很有用。你可以在快捷方式应用程序的图库中直接获取它们。

查看源代码（真正地）

当然，有一个预制快捷方式可以查看任何网页的源代码。

现在，当我在网页上时，我可以让 Siri 查看源代码，或打开共享表来触发快捷方式。

如果我们有行号、语法高亮、等宽字体（说真的！）、缩放，等等... 那么这将是完美的。好吧，也许它离完美还很远。

获取页面上的所有图像

这是另一个快捷方式宝石。打开一个网页并让 Siri “从页面获取图像”。现在，我不喜欢从网页上抓取资产，尤其是批量抓取，但并非所有图像收集都是恶意的。

Wayback Machine

这有多有趣？！有人想到创建一个快捷方式，在 Wayback Machine 中打开当前页面以查看过去的版本。

编辑网页

我认为这个实际上很有用。假设你想在设计中测试内容，并想确切地看看它在手机上的样子。这个快捷方式基本上会在页面上的每个元素上添加 contenteditable。

就是这样！再次重申，所有这些都可以在 iOS 快捷方式应用程序的图库选项卡中找到。也许还有其他功能。或者也许有人创建了一个很酷的快捷方式，可以与我们所有人分享。 😉

迈克尔

# 2021 年 9 月 29 日

我使用以下书签，它会打开一个新的标签页并显示当前页面的源代码

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))
})();

快捷方式的问题是它无法访问当前页面的 DOM，因此它会发出另一个请求，该请求可能与您正在调试的实际页面不同。

我还使用 Eruda，它具有控制台、网络和 DOM 浏览器。它在 iOS 15 发布时被移植到 Web 扩展程序中，这使其更加方便

Bibin R

我怎样才能获取这些快捷方式？

Geoff Graham

评论永久链接# 2021 年 9 月 30 日

它们可以在快捷方式应用程序的图库选项卡中找到。

# 2021 年 10 月 1 日

尝试检查浏览器。它可以做所有这些以及更多。

查看源代码（真正地）

获取页面上的所有图像

Wayback Machine

编辑网页

评论

发表评论 取消回复

发表评论取消回复