调试 UIWebView 中的 JavaScript 一直以来都是很痛苦的一件事。通常我们会通过下面的方法调试 HTML 和 JavaScript。

1、第一种,使用桌面浏览器调试。大多数现代浏览器都有功能强大的调试器,可以通过 console.log() 方法进行调试。

2、如果桌面浏览器不能追踪到这些 log,我们可以从 Xcode 启动 iOS 模拟器,运行我们的 app。然后,启动 Safari 选择 Develop > iPhone Simulator > tieba.baidu.com

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 官方博客

如何从 Xcode 控制台输出 JavaScript 的 log?的更多相关文章

  1. Xcode控制台输出中文

    创建一个.m文件,然后将一下代码加入.m文件中即可实现控制台输出中文,具体代码如下: #ifndef Release @implementation NSSet(Log) - (NSString *) ...

  2. javascript 控制台输出 图片 console.log 真强大 真佩服你们的创造力

    无意中,在百度知道页面发现了这货.居然能输出图片到控制台. 完全颠覆自己的三观,果断查阅其输出方法.后得知,原来如此. 曾经做过的项目中,同事把控制台做成一个网页形式方便远程控制和远程调用.没想到过这 ...

  3. 在浏览器控制台输出内容 console.log(string);

    在浏览器控制台中写如数据 1添加    <script type="text/javascript">djConfig = { isDebug: true };< ...

  4. js控制台输出图案

    控制台输出图案 console.log([ " _ooOoo_", " o8888888o", " 88\" . \"88&quo ...

  5. 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  6. 控制台:控制台艺术字 & 为控制台输出增加样式(console.log( ))

    控制台/代码文档LOGO 除了知乎的控制台,大部分的代码文档都有这样的字符logo. 下面这个网站可以自动生成符号艺术字: Text to ASCII Art Generator (TAAG) 控制台 ...

  7. js控制台输出console

    介绍: js的console你可以在firefox的firedbug或者ie和google的f12调试模式下看到,这些主流浏览器的调试模式的控制可以输出一些信息,你的一些js代码测试可以直接在cons ...

  8. log4j中Spring控制台输出Debug级信息过多解决方法

    log4j中Spring控制台输出Debug级信息过多解决方法 >>>>>>>>>>>>>>>>> ...

  9. Log4j 2.0在开发中的高级使用具体解释—配置简单的控制台输出(三)

    Log4j 2.0在近期迎来了重大的版本号升级.攻克了1.x中死锁bug之外,性能也有10倍的提升. 相同的在最新版本号中的新特性中. 配置文件也不只局限于xml和java特性文件properties ...

随机推荐

  1. jsp-javabean-setproperty介绍

    李兴华<java web开发实战经典>第7章关于javabean的讲解中说道:<jsp:setProperty>标签一共有4种使用方法·下面列出了4种操作语法的格式:   设置 ...

  2. VC++文件相关操作的函数封装实现

    在开发编译工具中,需要用到文件的相关操作,于是就封装了相关的函数实现: //判断文件是否存在 BOOL FileIsExist(CString strFileName) { CFileFind fin ...

  3. txt无法正常保存正文的解决办法

    最近遇到一个问题,txt文档中写了中文,则保存的时候 就会提示“该文件含有unicode格式字符,当文件保存为ANST编码文本文件时,该字符将会丢失”.虽然有解决办法,但不彻底,用起来总是很费劲,研究 ...

  4. 初建FreeMarker工程

    初建FreeMarker工程 ——@梁WP 背景:听说freemarker可以用来写页面的组件,热衷于编写可重用代码的我,迫不及待地研究了freemarker,不过,在写组件之前,还是先研究一下fre ...

  5. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  6. 记录Access数据库更新操作大坑一个

    对于更新Access数据库的操作,必须保持参数数组与sql语句中参数顺序一致,如下: public bool Update(MyModel model) { StringBuilder strSql ...

  7. phpstrtotime()对于31日求上个月有问题

    PHP自带的strtotime()对于31日求上个月有问题,如下: <?php $date = "2012-07-31"; $date_unix = strtotime($d ...

  8. javascript moveTo() 函数

    moveTo-- 移动窗体左上角到相对于屏幕左上角的(x,y)点,当使用负数做为参数时会吧窗体移出屏幕的可视区域 moveTo,中文"移动到"的意思 引用网址:http://www ...

  9. cas系列(三)--HTTP和HTTPS、SSL

    (这段时间打算做单点登录,因此研究了一些cas资料并作为一个系列记录下来,一来可能会帮助一些人,二来对我自己所学知识也是一个巩固.) 本文转自異次元藍客点击打开链接 1.  HTTPS HTTPS(全 ...

  10. linux du 显示目录下的各个子目录的大小

    use  command du  display estimate file space usage size of subdirectories [oracle@ahjcyl-db backup]$ ...