如何在WKWebView中调试JavaScript代码

Question

我在WKWebView中运行Web应用程序时遇到了一些问题（具体而言，某些按钮不响应）。我使用这个教程作为指南，并成功地让webview显示我的Web应用程序。所以现在我想调试javascript代码。

我知道Web应用程序可以正常工作，因为我已经在Android WebView和无数浏览器中尝试过它（包括我正在使用的iPad模拟器上的Safari）。经过一些快速搜索，我发现如何使用Safari在UIWebView中调试JavaScript的方法。不幸的是，这似乎与新的WKWebView不兼容。

当我导航到Develop->iPad Simulator时，我被告知没有“可检查的应用程序”。我已经尝试过同一个简单的带有UIWebView的应用程序，并且通过Safari进行调试完全正常。

有没有办法在WKWebView中调试JavaScript代码？

为了复制我的问题（使用Swift），请在xCode 6中启动一个新的单屏幕项目，在ViewController.swift文件中复制下面提供的代码（由kinderas提供），并将输出处拖到Main.storyboard文件中的View Controller下的View。如果有疑问，请参考我上面链接的教程。

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet var containerView : UIView! = nil
    var webView: WKWebView?

    override func loadView() {
        super.loadView()

        self.webView = WKWebView()
        self.view = self.webView!
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        var url = NSURL(string:"http://www.kinderas.com/")
        var req = NSURLRequest(URL:url)
        self.webView!.loadRequest(req)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

}

- overactor

Answer 1

更新：2017/09/11

最近版本的Safari可以做到这一点。只需在Safari中启用开发菜单 - developer.apple.com即可。

旧版：

您需要安装Safari的夜间构建版本并使用它。我曾经遇到过一个正在开发的应用程序出现同样的问题。一旦我安装了夜间构建版本，我现在就使用它，并且我的所有WKWebView都显示在开发菜单中。

希望这就是您缺少的部分！

- a.stringham

---

嗨@a.stringham，我们在这里谈论的Safari设置是针对开发平台（OS x），对吧？但是我正在iPad模拟器（通过Xcode）中调试和运行我的WkWebView嵌入式浏览器应用程序。那些设置能帮助我调试在嵌入式浏览器中运行的代码吗？ - Feru

不再需要使用 Safari 的夜间版本进行调试，您可以直接使用最新的常规 Safari 浏览器进行调试。 - Arkhitech

@shmim 我能够使用Hugo提供的链接中的指令，通过WKWebView直接在Safari桌面版中调试我的应用程序。 - Otávio

有人能详细说明一下这个解决方案吗？我使用的是带有开发者控制台的Safari 11.01，虽然里面没有任何关于wkwebview的信息，而且我甚至没有ios11用户代理。第一个链接已经失效了。 - pedalpete

链接对我来说是坏的。请在您的答案中添加文本以防止此问题。 - Jeremiah

Answer 2

打开您的Webview中的网站或HTML页面，然后打开Safari。点击“开发”，然后进入模拟器，您会在那里找到您的网站标题。一旦您打开它，您将看到JavaScript调试器、控制台和其他您想象得到的所有内容。

- ɯɐɹʞ

---

在Safari中获取“开发”菜单：打开偏好设置，在高级选项卡下，勾选“在菜单栏中显示‘开发’菜单”。 - Matthias

Answer 3

你可以尝试 http://jsconsole.com/ 执行 :listen 命令，它会给你一个 script 标签，将其粘贴到你的网页中。

该页面中的每个 console.log 都会输出到这个页面上。

如果你关闭了 jsconsole 页面，下一次你应该在 HTML 代码中更改 script src，但你也可以监听该 script src。

:listen XXXXX-XXXXX-XXXX-XXXXX

我希望它有所帮助。

- Biribu

---

这可能是其他人的正确解决方案，但我需要一种在完全不触碰JavaScript代码的情况下进行调试的方法。 - overactor

现在看起来jsconsole.com出了问题，今天：listen没有任何输出。 - Stepan Yakovenko

是的，[https://jsconsole.com/]现在出了问题。它总是给出引用错误并显示命令未定义。 - Piyush