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

如何在iOS应用程序WkWebView中调试javascript?,javascript,ios,debugging,wkwebview,Javascript,Ios,Debugging,Wkwebview,我有一个网站,第三方已将其iOS应用程序嵌入WkWebView中。我的网站上有一个bug,只有在此应用程序中查看时才会出现;我无法通过浏览器或单独的iOS应用程序复制它,我专门为检查bug而构建的应用程序。为了继续解决这个bug,我需要能够调试应用程序中实时运行的javascript。如果我有一个应用程序的调试版本,这将非常简单:只需将其连接到Safari的远程调试器,但由于安全限制,应用程序开发人员无法向我发布调试版本 在这些条件下,有哪些选项可以调试javascript 无法更改应用程序代

我有一个网站,第三方已将其iOS应用程序嵌入WkWebView中。我的网站上有一个bug,只有在此应用程序中查看时才会出现;我无法通过浏览器或单独的iOS应用程序复制它,我专门为检查bug而构建的应用程序。为了继续解决这个bug,我需要能够调试应用程序中实时运行的javascript。如果我有一个应用程序的调试版本,这将非常简单:只需将其连接到Safari的远程调试器,但由于安全限制,应用程序开发人员无法向我发布调试版本

在这些条件下,有哪些选项可以调试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>

JS-Bin
点击我
var sendDebug=函数(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(空);
}
document.querySelector('button')。addEventListener('click',function(){
sendDebug(“单击按钮”);
})
sendDebug(“页面加载”);
我包括了一个基于
navigator.userAgent
的粗略
iPhone
布尔值;你可以考虑只为iPhone发送数据,这样你就不会用非iPhone请求来处理你的日志(请注意,用户代理可以从应用程序中修改,所以你需要仔细检查他们发送的内容)。尽管如此,根据您处理的通信量,这可能还不够限制

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


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

高级步骤包括:

  • 在你的应用程序中重现问题
  • 将设备连接到Mac
  • 遵循Apple文档中的步骤:
  • 将mac上safari的远程调试器连接到iOS应用程序后,单击刷新按钮。它将强制应用程序内web视图刷新,这样您就可以看到加载时出现了什么问题

除非苹果在最新版本的iOS中进行了更改,否则该功能仅在您拥有应用程序的调试版本时有效,而不是通过应用商店获得的应用程序。指向苹果文档的链接已断开