如何从 Xcode 控制台输出 JavaScript 的 log？
调试 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？的更多相关文章
- Xcode控制台输出中文
创建一个.m文件,然后将一下代码加入.m文件中即可实现控制台输出中文,具体代码如下: #ifndef Release @implementation NSSet(Log) - (NSString *) ...
- javascript 控制台输出 图片 console.log 真强大 真佩服你们的创造力
无意中,在百度知道页面发现了这货.居然能输出图片到控制台. 完全颠覆自己的三观,果断查阅其输出方法.后得知,原来如此. 曾经做过的项目中,同事把控制台做成一个网页形式方便远程控制和远程调用.没想到过这 ...
- 在浏览器控制台输出内容 console.log(string);
在浏览器控制台中写如数据 1添加 <script type="text/javascript">djConfig = { isDebug: true };< ...
- js控制台输出图案
控制台输出图案 console.log([ " _ooOoo_", " o8888888o", " 88\" . \"88&quo ...
- 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了！像console.log()可以向控制台输出图片
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
- 控制台：控制台艺术字 & 为控制台输出增加样式（console.log( )）
控制台/代码文档LOGO 除了知乎的控制台,大部分的代码文档都有这样的字符logo. 下面这个网站可以自动生成符号艺术字: Text to ASCII Art Generator (TAAG) 控制台 ...
- js控制台输出console
介绍: js的console你可以在firefox的firedbug或者ie和google的f12调试模式下看到,这些主流浏览器的调试模式的控制可以输出一些信息,你的一些js代码测试可以直接在cons ...
- log4j中Spring控制台输出Debug级信息过多解决方法
log4j中Spring控制台输出Debug级信息过多解决方法 >>>>>>>>>>>>>>>>> ...
- Log4j 2.0在开发中的高级使用具体解释—配置简单的控制台输出(三)
Log4j 2.0在近期迎来了重大的版本号升级.攻克了1.x中死锁bug之外,性能也有10倍的提升. 相同的在最新版本号中的新特性中. 配置文件也不只局限于xml和java特性文件properties ...
随机推荐
- c语言中的 %u 什么意思啊？
%d 有符号10进制整数 %i 有符号10进制整数 %o 无符号8进制整数 %u 无符号10进制整数 %x 无符号的16进制数字,并以小写abcdef表示%X 无符号的16进制数字,并以大写ABCDE ...
- 如何在Byte[]和String之间进行转换
源自C#与.NET程序员面试宝典. 如何在Byte[]和String之间进行转换? 比特(b):比特只有0 1,1代表有脉冲,0代表无脉冲.它是计算机物理内存保存的最基本单元. 字节(B):8个比特, ...
- JSP/Servlet 中的事件处理
写过AWT或Swing程序的人一定对桌面程序的事件处理机制印象深刻:通过实现Listener接口的类可以在特定事件(Event)发生时,呼叫特定的方法来对事件进行响应. 其实我们在编写JSP/Serv ...
- a标签中的href="#"与href="javascript:void(0)"区别
转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...
- ubuntu15.10下sublime text3 无法输入中文解决办法
原文链接:http://geek.csdn.net/news/detail/44464 1.首先保证你的电脑有c++编译环境 如果没有,通过以下指令安装 sudo apt-get install bu ...
- Js判断对象是否为空，Js判断字符串是否为空
Js判断对象是否为空,Js判断字符串是否为空,JS检查字符串是否为空字符串 >>>>>>>>>>>>>>>&g ...
- 用Module元素实现SharePoint Webpart Page的自动生成
最近研发的项目中开发了很多的WebPart,每次部署这些WebPart到新环境中总是很麻烦,因为自己要新创建WebpartPage,同时还要把这些WebPart放到指定的WebPart页中去: 为了方 ...
- 隐藏元素的宽高无法通过原生js获取的问题
1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...
- Android EditText的输入监听，输入字符的动态获取
http://itindex.net/detail/38974-android-edittext-%E7%9B%91%E5%90%AC 有时候我们可能会用到时时的监听EditText输入字符的时时监听 ...
- oracle学习笔记3：基本的SQL语句
oracle基本的SQL语句和SQLSERVER基本一样,在这里只简单列出与SQLSERVER不一样的地方 1.select * from orderinfo where address = 'abc ...