JavaScript Logger for Mobile Browsers
Displaying error and log messages on page as well as in the browser's console.
Useful when debugging inside a mobile browser or embedded browsers (e.g. Android WebView) where there is no way to display error or log messages.
Demo page: https://frank-deng.github.io/js-mobile-logger/index.html
Usage
Step 1: Copy mobile_logger.js to your JavaScript directory in your site.
Step 2: Prepare an HTML DOM element to be used for displaying log messages and error messages:
<body>
<pre id='logger_element'></pre>
...
</body>
The following style is recommended for the element used for displaying messages:
#logger_element{
background-color:#ccc;
border-top:1px solid #666;
color:#000;
display:block;
position:fixed;
left:0;right:0;bottom:0;top:50%;
line-height:1.1em;
font-size:1em;
font-family:monospace;
z-index:10000;
}
Step 3: Put the following code into the <head> element of your page to be debugged:
<script type="text/javascript" src="path/to/mobile_logger.js"></script>
<script type="text/javascript">
window.addEventListener('load', function(){
MobileLogger.bind(document.getElementById('logger_element'));
});
</script>
Now error messages and console.log() messages will be displayed in both the element used for displaying messages and the browser's console (if available).
API Documentation
MobileLogger.bind(element)
Start outputing log messages into the DOM element specified, things inside this element will be cleared.
Log messages and error messages came before it's calling will be copied to the element specified as well.
MobileLoggerError error will be thown if called for multiple times or the element specified is invalid.
MobileLogger.autoScroll(bool)
Specify whether the element used for displaying messages will be automatically scrolled to the bottom when new message comes. Default is automatically scroll to bottom.
MobileLogger.unbind()
Stop outputing messages into the element used for displaying messages, messages inside the element will be left untouched.
Further messages will be saved internally and can be seen on the next call of MobileLogger.bind() method.
This method can only be called once, or MobileLoggerError error will be thown inside your browser's console.
JavaScript Logger for Mobile Browsers
一个在页面中和浏览器控制台中显示浏览器错误信息和log信息的工具。
可用于在移动浏览器或嵌入式浏览器（如Android WebView）中调试页面（通常这类浏览器没有任何方式显示错误信息和log信息）。
演示页面：https://frank-deng.github.io/js-mobile-logger/index.html
用法
第一步：将mobile_logger.js复制到站点中存放JavaScript库的地方。
第二步：在页面中准备一个标签用于显示错误信息和log信息：
<body>
<pre id='logger_element'></pre>
...
</body>
显示信息用的标签推荐使用以下样式：
#logger_element{
background-color:#ccc;
border-top:1px solid #666;
color:#000;
display:block;
position:fixed;
left:0;right:0;bottom:0;top:50%;
line-height:1.1em;
font-size:1em;
font-family:monospace;
z-index:10000;
}
第三步：将以下代码加入到待调试页面的<head>标签中：
<script type="text/javascript" src="path/to/mobile_logger.js"></script>
<script type="text/javascript">
window.addEventListener('load', function(){
MobileLogger.bind(document.getElementById('logger_element'));
});
</script>
现在错误信息和来自console.log()的信息将被同时显示在用于显示错误信息和log信息的标签中，以及浏览器的控制台中（如果有）。
API说明
MobileLogger.bind(element)
将错误信息和log信息输出到指定的DOM元素中，该DOM元素中的内容将被清空。
在调用该方法之前出现的错误信息和log信息也将被输出到该DOM元素中。
如果该方法被调用多次，或指定的DOM元素不是合法的DOM元素，将抛出MobileLoggerError异常。
MobileLogger.autoScroll(bool)
指定显示信息用的DOM元素在新信息到来时，是否自动滚动到底部。默认为自动滚动到底部。
MobileLogger.unbind()
停止将错误信息和log信息输出到指定的DOM元素中，该DOM元素中的内容将被保留。之后的错误信息和log信息将被保存在内部，直到下一次调用MobileLogger.bind()方法时被显示出来。
该方法只可被调用一次，否则将抛出MobileLoggerError异常并在浏览器的控制台中显示错误信息。