前提：一般情況下，對于網(wǎng)頁中javascript中輸出的log舀寓，是不會在XCode的控制臺輸出的胆数，為了調(diào)試方便，更加清楚的獲取到j(luò)avascript中的log互墓，需要讓js中的log也顯示在XCode的控制臺中必尼。
具體解決方案：重寫js中的console.log方法，在重寫的方法中觸發(fā)調(diào)用原生方法篡撵，將log的輸出內(nèi)容傳遞出去判莉。
代碼實現(xiàn)：
1.創(chuàng)建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);
//這里，在執(zhí)行自定義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")
- 實現(xiàn)
WKScriptMessageHandler代理方法，在代理方法中根據(jù)name執(zhí)行輸出宿刮。
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翠胰。
