如何在 iOS 应用程序 WkWebView 中调试 javascript？
Posted
技术标签:
【中文标题】如何在 iOS 应用程序 WkWebView 中调试 javascript？【英文标题】：How to debug javascript in an iOS app WkWebView? 【发布时间】：2017-03-07 22:09:58 【问题描述】：我有一个网站，第 3 方在 WkWebView 中将 iframe 嵌入到他们的 ios 应用程序中。我的网站上有一个错误，只有在这个应用程序中查看时才会出现；我无法通过浏览器或专门为检查错误而构建的单独 iOS 应用程序复制它。为了继续解决这个错误，我需要能够调试在应用程序中实时运行的 javascript。如果我有应用程序的调试版本，这将非常简单：只需将其连接到 Safari 的远程调试器，但由于安全限制，应用程序开发人员无法向我发布调试版本。
在这些条件下调试 javascript 有哪些选项？
无法更改应用代码 必须与应用的发布版本一起使用 至少查看日志，或者最好公开与浏览器开发者控制台相当的功能： 添加断点 单步执行代码 查看 DOM 查看控制台输出 将 javascript 库导入我的网站以启用此功能是可以接受的，但我更喜欢基于工具的解决方案而不是基于代码的解决方案【问题讨论】：
【参考方案1】：您可以将 Safari 的开发者工具从 Mac 连接到 iOS 应用程序。从那里，您可以在您的 Web 视图中调试 javascript，如果您在 Mac 上的 Safari 中测试任何网站，您可以查看任何可以看到的内容。
高级步骤是：
在您的应用中重现问题。 将设备连接到 Mac。 按照 Apple 文档中的步骤操作：https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html#//apple_ref/doc/uid/TP40007874-CH2-SW8 将远程调试器从 Mac 上的 safari 连接到 iOS 应用程序后，单击刷新按钮。它会强制刷新应用内 Web 视图，因此您会看到加载时出了什么问题。【讨论】：
除非 Apple 在最新的 iOS 版本中进行了更改，否则该功能仅在您拥有应用程序的调试版本时才有效，而不适用于通过应用商店获得的应用程序。 指向 Apple 文档的链接已损坏【参考方案2】：您可以通过向您的服务器发送带有相关调试信息的 HTTP 请求来获取所需的数据。这有点令人讨厌，因为它在您的生产站点上为您的所有用户运行，并且远不及您可以将 Safari 附加到调试时所拥有的功能，但可能适用于这种特殊情况。
一些基本的 JS 给出了关于如何在页面加载和/或用户触发事件周围发送事件的一般概念：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>Click Me</button>
<script>
var sendDebug = function(simpleObject)
var serializedObject = JSON.stringify(simpleObject);
var iPhone = navigator.userAgent.indexOf('iPhone') > 0;
var xhr = new XMLHttpRequest();
xhr.open('GET', `https://null.jsbin.com?iphone=$iPhone&info=$serializedObject`);
xhr.send(null);
document.querySelector('button').addEventListener('click', function()
sendDebug('clicked the button');
)
sendDebug('page loaded');
</script>
</body>
</html>
我包含了一个基于navigator.userAgent 的粗略的iPhone 布尔值；您可以考虑只为 iPhone 发送数据，这样您就不会因为非 iPhone 请求而使您的日志变得混乱（请注意，可以从应用程序修改 userAgent，因此您需要仔细检查它们发送的内容）。虽然，根据您处理的流量，这可能还不够节流。
这会创建带有附加到查询字符串的调试数据的 HTTP 请求。这些应该在服务器上的访问日志中可见：
https://null.jsbin.com/?iphone=false&info=%22clicked%20the%20button%22
http://jsbin.com/novowoduka/edit?html,output
【讨论】：
以上是关于如何在 iOS 应用程序 WkWebView 中调试 javascript？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 WKWebVIew 或 JSC 在 iOS 应用程序中加载 WebAssembly
在 iOS 中，当用户滚动浏览 WKWebView 时，如何检测屏幕上可见的 html 元素？
如何在 iOS 10 上覆盖 WKWebView 的“保存图像”菜单
如何从 WKWebview 内的按钮单击重定向并使用目标 c 返回到 iOS 应用程序？