如何在iOS应用程序WkWebView中调试JavaScript?

问题描述:

我有一个网站,第三方iframed进入他们的iOS应用程序内部的WkWebView。我的网站上有一个错误,只有在此应用程序中查看时才会显示。我无法通过浏览器或专门为检查错误而构建的独立iOS应用程序来复制它。为了继续解决该错误,我需要能够调试在应用程序中实时运行的JavaScript。如果我有应用程序的调试版本,这将非常简单:只需将它连接到Safari的远程调试器,但由于安全限制,应用程序开发人员无法向我发布调试版本。如何在iOS应用程序WkWebView中调试JavaScript?

在这些情况下调试javascript有哪些选项?

  • 不能改变应用程序代码
  • 必须使用应用
  • 的一个发布版本工作在最低限度,查看日志或,优选地,暴露的功能相当于一个浏览器开发者控制台:
    • 附加断点
    • 步骤通过码
    • 视图DOM
    • 视图控制台输出
  • 导入JavaScript库到我的网站,使这是可以接受的,但我宁愿在基于工具的解决方案基于代码的一个

您可以通过发送一个得到你想要的数据使用相关的调试信息向您的服务器发送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.userAgentiPhone布尔;你可以考虑只为iPhone发送数据,这样你就不会在非iPhone请求中混淆日志(注意userAgent可以从应用程序中修改,所以你需要仔细检查它们发送的内容)。尽管取决于您处理的流量,但这可能不够节流。

这将创建HTTP请求并将调试数据附加到查询字符串。这些应该是在你的访问日志中可见的服务器上:

https://null.jsbin.com/?iphone=false&info=%22clicked%20the%20button%22

http://jsbin.com/novowoduka/edit?html,output

您可以将Safari的开发工具,从Mac到iOS应用。从那里,您可以在您的网页视图中调试javascript,并查看您在Mac上在Safari中测试任何网站时可能看到的任何内容。

高级步骤是:在你的应用程序

+0

除非Apple在最新版本的iOS中进行了更改,否则该功能仅适用于应用程序的调试版本,而不适用于通过应用商店获取的应用程序。 – asgallant

+0

链接到Apple文档已损坏 – dsjoerg