前提：一般情况下，对于网页中javascript中输出的log，是不会在XCode的控制台输出的，为了调试方便，更加清楚的获取到javascript中的log，需要让js中的log也显示在XCode的控制台中。
具体解决方案：重写js中的console.log方法，在重写的方法中触发调用原生方法，将log的输出内容传递出去。
代码实现：
1.创建wkwebview，并在开始加载时注入一段js，该段js为重写的console.log方法。
let web = WKWebView.init(frame: CGRect.init(x: 0, y: 100, width: view.bounds.size.width, height: view.bounds.size.height - 100))
let js = """
console.log = (function(oriLogFunc){
return function(str){
oriLogFunc.call(console,str);
//这里，在执行自定义console.log的时候，将str传递出去。
window.webkit.messageHandlers.log.postMessage(str);
}
})(console.log);
"""
let script = WKUserScript.init(source: js, injectionTime: WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: false)
web.configuration.userContentController.addUserScript(script)
web.configuration.userContentController.add(self, name: "log")
- 实现
WKScriptMessageHandler代理方法，在代理方法中根据name执行输出。
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if message.name == "log" {
print(message.body)
}
}
3.测试，编写一段js代码，放入一个html文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.triangle1{
width: 100;
height: 100;
background-color: red;
display: flex;
}
</style>
<script type="text/javascript">
function change() {
console.log('hello world');
}
</script>
</head>
<body>
<div class="triangle1" onclick="change()">jinsongpei</div>
</body>
</html>
4.运行，测试代码。
image.png
可以看到，控制台输出了log。
