`

11 自己的JS调试工具 myLogger()对象

阅读更多
/**
 * @author elf
 */
function myLogger(id)
{
	id=id||'ADSLogWindow';
	var logWindow=null;
	var createWindow=function(){
		//取得新窗口在浏览器居中放置时左上角的位置
		var browserWindowSize=ADS.getBrowserWindowSize();
		var top=((browserWindowSize.height-200)/2)||0;
		var left=((browserWindowSize.width-200)/2)||0;
		//创建一个UL节点
		logWindow=document.createElement('UL');
		//指定ID ,以便在必要时在DOM树中能识别它
		logWindow.setAttribute('id',id);
		//在屏幕居中位置定位日志窗口
		logWindow.style.position = 'absolute';
		logWindow.style.top = top + 'px';
		logWindow.style.left = left + 'px';
		//设定固定的大小 ,并允许窗口内容滚动
		logWindow.style.width = '200px';
		logWindow.style.height = '200px';
		logWindow.style.overflow = 'scroll';
		logWindow.style.padding= '0';
		logWindow.style.margin= '0';
		logWindow.style.border= '1px solid black';
		logWindow.style.backgroundColor= 'white';
		logWindow.style.listStyle= 'none';
		logWindow.style.font= '10px/10px Verdana, Tahoma, Sans';
		
		//添加到文档主体中
		document.body.appendChild(logWindow);		
	};
	this.writeRaw=function(message){
		if(!logWindow) createWindow();
		//创建列表项并适当的添加样式
		var li = document.createElement('LI');
		li.style.padding= '2px';
		li.style.border= '0';
		li.style.borderBottom = '1px dotted black';
		li.style.margin= '0';
		li.style.color= '#000';
		li.style.font = '9px/9px Verdana, Tahoma, Sans';
		//为日志节点添加信息
		if(typeof message == 'undefined') {
			li.appendchild(document.createTextNode('Message was undefined'));
		} else if(typeof li.innerHTML != undefined) {
			li.innerHTML = message;
		} else {
			li.appendchild(document.createTextNode(message));
		}
		//添加'UL'窗口日志中
		logWindow.appendChild(li);
		
		return this;;
	}
}

/**
 * The myLogger prototype public methods
 */
myLogger.prototype = {

	/** 
	 * Writes a write a partially encoded version of the message to the log window.
	 * If the message is not a String, the toString method will be 
	 * called on the object. If no toString() method exists, the typof
	 * will be logged.
	 * @param {Object} message
	 */
	write: function (message) {
		// warn about null messages
		if(typeof message == 'string' && message.length==0) {
			return this.writeRaw('ADS.log: null message');
		}

		// if the message isn't a string try to call the toString() method,
		// if it doesn't exist simply log the type of object
		if (typeof message != 'string') {
			if(message.toString) return this.writeRaw(message.toString());
			else return this.writeRaw(typeof message);
		}

		// transform < and > so that .innerHTML doesn't parse the message as HTML
		message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;");

		return this.writeRaw(message);
	},


	/**
	 * Writes a simple header to the log window.
	 */ 
	header: function (message) {
		message = '<span style="color:white;background-color:black;font-weight:bold;padding:0px 5px;">' + message + '</span>';
		return this.writeRaw(message);
	}

};

if(!window.ADS) { window['ADS'] = {}; }
window['ADS']['log'] = new myLogger();
if(!console) var console = ADS.log;

 

分享到:
评论

相关推荐

    创建js日志对象代替alert函数进行调试的例子

    在JavaScript开发过程中,调试是必不可少的一个环节。通常我们使用`console.log()`、`alert()`等方法来检查代码的运行状态。然而,`alert()`函数会中断页面执行,并且用户体验较差,尤其是在频繁调试时。因此,创建...

    android日志管理工具类MyLogger

    日志的规范管理,在项目中不容忽视,应用上线后将调试日志关闭也是十分必要的,这是一个好用的日志管理工具类

    jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件

    jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar文件jar...

    hello_myLogger.js

    hello_myLogger.js

    wxWidgets调试输出

    wxWidgets提供了多种调试工具和宏,如TRACE和DEBUG,来帮助程序员进行调试。 TRACE宏是wxWidgets中用于输出调试信息的关键工具。它允许开发者在代码中插入语句,以在运行时打印变量的状态或执行路径。例如,你可以...

    log4js使用指南

    const logger = log4js.getLogger('myLogger'); ``` 然后,通过`logger`对象记录日志: ```javascript logger.info('This is an info message.'); ``` **5. Appenders** Appenders定义了日志输出的目的地,log4js...

    MyLogger-开源

    MyLogger的用户不仅可以根据自己的需求定制软件,还可以向社区贡献代码,提出改进建议,或者寻求其他用户的帮助。这样的开放环境鼓励创新,推动了软件的持续发展和优化。 总的来说,MyLogger-开源项目展示了PHP作为...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     2.5 实例:你自己的调试日志   2.5.1 为什么需要JavaScript日志对象   2.5.2 myLogger()对象   2.6 小结   第3章 DOM2核心和DOM2 HTML   3.1 DOM不是JavaScript,它是文档   3.2 DOM的级别 ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

     2.5 实例:你自己的调试日志   2.5.1 为什么需要JavaScript日志对象   2.5.2 myLogger()对象   2.6 小结   第3章 DOM2核心和DOM2 HTML   3.1 DOM不是JavaScript,它是文档   3.2 DOM的级别 ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

     2.5 实例:你自己的调试日志   2.5.1 为什么需要JavaScript日志对象   2.5.2 myLogger()对象   2.6 小结   第3章 DOM2核心和DOM2 HTML   3.1 DOM不是JavaScript,它是文档   3.2 DOM的级别 ...

    log4javascript-1.3.1

    **日志记录在前端开发中...总之,`log4javascript`是前端开发中不可或缺的工具,它提高了调试效率,简化了问题定位,使得前端项目的维护变得更加容易。熟练掌握并合理使用log4javascript,能够显著提升开发者的生产力。

    log4javascript-1.4.1 日志信息记录框架

    **log4javascript-1.4.1:日志信息记录框架**...总的来说,log4javascript-1.4.1 是一个强大的JavaScript日志记录工具,它简化了Web应用的错误追踪和调试过程,提高了开发效率,并且提供了一套完整的日志管理解决方案。

    log4js.7z

    《深入理解log4js:JavaScript日志记录框架的精髓》 在JavaScript开发中,日志记录是不可或缺的一部分,它能够帮助我们追踪程序运行状态、定位错误、优化性能。log4js是一个广泛使用的日志库,它为Node.js环境提供...

    log4cplus在VS2015编译

    - **开发工具**:Visual Studio 2015 - **目标平台**:x64 #### 三、编译步骤 1. **下载源码**:从log4cplus的官方网站([https://sourceforge.net/projects/log4cplus/files/log4cplus-stable/1.1.3/]...

    LogSystem简易日志记录

    为了方便调试,`MyLogger`可能还包含开关,让用户在生产环境中关闭不必要的日志输出,以提高性能。同时,日志记录应该具有可扩展性,方便添加新的输出目标或格式化选项。 总的来说,`LogSystem简易日志记录`项目...

    logging.js:用于nodejsiojs的基于流的日志记录模块

    Logging.js 用于nodejs / iojs的基于流的日志记录模块。安装npm install logging . js例子var logging = require ( 'logging.js' ) , log = logging . get ( 'mylogger' ) ;log . addRule ( { name : 'stdout' , ...

    python导入自定义的类 vscode(三)(csdn)————程序.pdf

    通过相对导入,如`from .util import MyLogger`或`from xiaoyi.util import MyLogger`,可以直接在当前文件中引用同级目录的类。这种方式可读性较好,但复用性较低,不适用于大型项目。 示例代码: ```python # ...

    MyLogger:简单的 logcat 阅读应用

    系统记录器用于收集各种日志的 Android Logging 应用程序登录网文件 - ...时间;UID;Rxbytes;Txbytes;...接口;Rxbytes;Rxpackets;Rerrs;...Txdrop记录应用程序文件 - 标题app/installed_apps.csv - TimeUTC;...TargetActivi

    Log4j–浅谈

    通过Log4j,开发者可以灵活地控制日志信息的输出方式、格式以及级别,从而有效地监控和调试应用程序。 ### Log4j的三大核心组件 #### 记录器(Logger) **定义与作用**:记录器是Log4j的核心组件,负责决定日志的...

Global site tag (gtag.js) - Google Analytics