调试 UIWebView 中的 JavaScript 一直以来都是很痛苦的一件事。通常我们会通过下面的方法调试 HTML 和 JavaScript。
1、第一种，使用桌面浏览器调试。大多数现代浏览器都有功能强大的调试器，可以通过 console.log() 方法进行调试。
2、如果桌面浏览器不能追踪到这些 log，我们可以从 Xcode 启动 iOS 模拟器，运行我们的 app。然后，启动 Safari 选择 Develop > iPhone Simulator > tieba.baidu.com
如何从 Xcode 控制台输出 JavaScript 的 log？
3.如果你不能在 iOS 模拟器上复现问题，也不能从运行在 iPhone 真机上的 APP 获得 console.log()，要调试 HTML 或者 JavaScript 是非常困难的。这篇文章就教你怎么用 NSLog 输出 JavaScript 中的 log。
把 JavaScript Log 转化成 Application Log
最基本的思路是这样的：为了把 JavaScript 的 log 现实出来，我们需要给debugger 发出一个 XMLHttpRequest，发起一个特殊的请求，把 Log 信息当做请求的路径，debugger 当做 host 名，例如: http://debugger/myError。我们可以通过 Apple 提供给我们的黑科技 NSURLProtocl 截获所有从 UIWebView 发起的请求。如果请求里有 「debugger」，就是用 NSURLProtocol 调用 NSLog 打印这些 log。
假设你的工程里有一个文件叫做 Sample.html
<html>
<head>
<script>
function log(msg) {
var xhr = new XMLHttpRequest();
xhr.open('GET', "http://debugger/" +
encodeURIComponent(msg));
xhr.send(null);
}
function test() {
log("Button was clicked");
log("We are done");
return false;
}
</script>
</head>
<body>
<button onclick="return test();">Click Me</button>
</body>
</html>
接下来，创建一个 NSURLProtocol 的子类 WebConsole
/WebConsole.h
@interface WebConsole : NSURLProtocol
+ (void) enable;
@end
//WebConsole.m
@implementation WebConsole
+ (void) enable {
[NSURLProtocol registerClass:[WebConsole class]];
}
+ (BOOL) canInitWithRequest:(NSURLRequest *)request {
if ([[[request URL] host] isEqualToString:@"debugger"]){
NSLog(@"%@", [[[request URL] path] substringFromIndex: 1]);
}
return FALSE;
}
@end
通过 canInitWithRequest 检查截获的请求，如果请求的 host 是「debugger」就用 NSLog 把这个请求的 「path」（也就是 JavaScript 的 log）输出。
最后我们只需要在 UIWebView 加载请求之前调用 enable，注册这个类，就能够通过拦截 UIWebView 发起的请求打印 JavaScript 的 log 了。
- (void)viewDidLoad {
[super viewDidLoad];
[WebConsole enable];
NSError *error = nil;
NSString *htmlStr = [NSString stringWithContentsOfFile:
[[NSBundle mainBundle]
pathForResource:@"Sample" ofType:@"html"]
encoding:NSUTF8StringEncoding
error:&error];
[self.webView loadHTMLString:htmlStr baseURL:nil];
}
OneAPM Mobile Insight 以真实用户体验为度量标准进行 Crash 分析，监控网络请求及网络错误，提升用户留存。访问 OneAPM 官方网站感受更多应用性能优化体验，想阅读更多技术文章，请访问 OneAPM 官方技术博客。
本文转自 OneAPM 官方博客
网友评论