调试 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. 让iOS开发变得更有效率-分类、工具类

    在工作中整理的一些分类与工具类,分享给大家.这些工具类可以减少项目中的代码量,让代码变得更简洁,可以大大的提升项目的效率,直接拖到项目中使用即可.下载地址:https://github.com/lee ...

  2. sum() over() 函数的使用

    over不能单独使用,要和分析函数:rank(),dense_rank(),row_number(),sum()等一起使用. over函数的参数:over(partition by columnnam ...

  3. Java-hibernate的映射文件

    Hibernate 需要知道怎样去加载(load)和存储(store)持久化类的对象.这正是 Hibernate 映 射文件发挥作用的地方.映射文件告诉 Hibernate 它应该访问数据库(data ...

  4. 原生Javascript实现控制DIV属性

    写在前面: 从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长.这是第一篇,后续还会有很多记录 ...

  5. angularjs服务常见用法

    服务可以再应用的整个生命周期内保持数据,不会在切换路由或者重新加载视图时被清楚掉(控制器只有在需要时才被实例化) 服务是一个单例对象,在每个应用中只会被实例化一次 服务在应用的生命周期内保存数据 an ...

  6. linux服务端的网络编程

    常见的Linux服务端的开发模型有多进程.多线程和IO复用,即select.poll和epoll三种方式,其中现在广泛使用的IO模型主要epoll,关于该模型的性能相较于select和poll要好不少 ...

  7. ffmpeg与RTMP流媒体连接用法(翻译) http://www.chinavideo.org/forum.php?mod=viewthread&tid=15423

    最近浏览国外网站时候发现,翻译不准确的敬请谅解. 1.将文件当做直播送至liveffmpeg -re -i localFile.mp4 -c copy -f flv rtmp://server/liv ...

  8. 转载C#泛型集合—Dictionary<K,V>使用技巧

    1.要使用Dictionary集合,需要导入C#泛型命名空间 System.Collections.Generic(程序集:mscorlib) 2.描述 1).从一组键(Key)到一组值(Value) ...

  9. YZOI Easy Round 2_回文串 string

    原文链接:http://laphets1.gotoip3.com/?id=18 Description 给出一个由小写字母组成的字符串,其中一些字母被染黑了,用?表示.已知原来的串不是 一个回文串,现 ...

  10. 单页应用引擎的写法artTemplate

    使用到了ba-haschange.js <script src="../style/js/plugin/template-native-debug.js"></s ...