JSLogger日志记录组件

最新推荐文章于 2024-05-10 09:35:44 发布
最新推荐文章于 2024-05-10 09:35:44 发布
阅读量1.2k 收藏
点赞数
分类专栏： Javascript 文章标签： js日志控件 js错误捕获 js获取客户端信息
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xdajian/article/details/83849531
版权
JSLogger是一款为了解决项目开发中动态追踪变量值问题的组件，它提供打印信息、错误捕获及客户端信息获取等功能。支持配置是否追踪日志，兼容主流浏览器，并具备关闭/打开日志面板以及实时清空日志的特性。新增功能包括对象型数据深度打印和DOM对象属性排序展示，但在IE下部分功能受限。
摘要由CSDN通过智能技术生成 
 <html>    
<head>    
<script src="JSLogger.js" charset="UTF-8" config="width:500px;" debug="true"></script>    
</head>    
<body id="mybody">    
<input type="text" id="txt_log" value="请输入log内容"/>    
<input type="button" value="添加log" οnclick="JSLogger.log(txt_log.value)" >    
<!--测试js-->    
<script>    
//打印存文本
JSLogger.log("启动正常");
//打印原生态html
JSLogger.logHTML("<div style='color:red;'>你好</div>");
//打印带有地址的信息：自动添加超链接
JSLogger.logURL("百度的地址是：http://www.baidu.com");
//打印js对象
var user={Name:"ab",Age:23,Teacher:{Name:"王老师",Grand:"4年纪"},Addrss:"北京市",School:{Name:"育新中雪",Address:"北京市海淀区30号",Tel:null}};    
JSLogger.log(user);  
//打印表单对象：
JSLogger.log(document.getElementById("txt_log"));  
</script>    
</body>    
</html>

 

//2012.09.21 更新：
    
/*1.补充log方法，实现自动判断并打印XMLDOM对象。

    2.增加logXML方法，可以打印XML文档对象的全部内容，包括：子节点名称和节点的值，子节点的所有属性以及XML文档的所有数值。

    3.新增获取客户单信息的方法。大致包括： 客户端浏览器的类型，版本(version)； 分辨率大小，当前窗口大小； IP、端口、web工程名称。

    4.完善initError方法。

    5.给window扩充log方法(实现JSLogger.log方法的简写)。

    6.样式完善等。
 
 对应rar包：JS操作XMLDOM.rar */
 


组件背景：
在项目开发工程中，经常要监控某一个变量的值，通常的情况下我们都使用alert弹出变量的值，但问题是发布的时候还需要逐个删除alert或者注释(我多半采取注释方法，方便再次使用)，而随后还可能对发布的版本进行维护，可能还需要追踪变量的值，这样就再次使用alert。如此反复无常是人头疼。

JSLogger就是解决这个问题的。

主要用途：
1 用于打印信息。可用于记录变量值以及追踪多个方法的先后运行顺序。

特点：
1 是否追踪日志可配置。
2 IE,ff,chrome兼容。
3 log面板可关闭/打开，以及实时清空日志。
新增1：对象型数据记录log：打印一个Object类型数据Obj的属性。如果Obj的属性P仍是Object，继续打印P的所有属性。（只向下打印到二级属性，即对象.属性.属性）

新增2：打印DOM对象，并且属性按照A-Z,a-z排序。(IE不兼容，在chrome和ff下正常)

 

 

 

 

 

 

源码实例：

 

//alert("JSLogger");
var JSLogger=function(){
	this.divdom =document.createElement("div");//日志div的对象。
	return{
		init:function(){//初始化调试信息。
			var logObj = this;
			if(JSLogger.debug()==true){
				divdom.id="log_div_";//日志div的ID
				divdom.style.border="0px solid gray";/*边框颜不可变*/	
				divdom.style.padding="0px";/*不可变*/
				divdom.style.fontFamily="Arial";/*字体可变*/
				divdom.style.margin="0px";/*不可变*/
				divdom.style.background="white";/*可变*/
				divdom.style.width=(logObj.config.width || "300px");/*宽度可变*/
				divdom.style.height=(logObj.config.height || "300px");/*高度可变*/
				divdom.style.position="absolute";/*不可变*/
				divdom.style.fontSize="14";/*不可变*/
				divdom.style.textAlign="left";/*不可变*/
				divdom.style.zIndex=(9999*9999);/*控制日志组件在所有可用组件的上边*/
				if(!!logObj.config.top===true ){
					divdom.style.top = (parseInt(logObj.config.top) ||0)+"px";
				}else{
					divdom.style.bottom="0";/*不可变*/
				}
				var titleHTML = "";
				//左下角还是右下角
				if(typeof(logObj.config.pos)==="string" && (logObj.config.pos==="left")){
					divdom.style.left="0";/*不可变*/
					titleHTML = logObj.createTitle({});
				}else{
					divdom.style.right="0";/*不可变*/
					titleHTML = logObj.createTitle({});
				}
				divdom.style.overflow="hidden";/*不可变 不出现滚动条的关键。*/
				divdom.style.cursor="pointer";/*光标样式不可变*/
				divdom.innerHTML=titleHTML;
				document.body.appendChild(divdom);
				if(logObj.config.closed=="true"){
					logObj.hide(logObj.getById("close_open_label"));
				}
				
			}else{/*do nothing*/}
		},
		createTitle:function(config){//显示关闭和清除的div
			//var align = (typeof(config.align)==="string" && "left"===config.align)?"left":"right";//默认右下角
			var html = '<div style="text-align:right;backgro
最低0.47元/天 解锁文章
xdajian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单实用的js调试logger组件实现代码
10-28
这个logger组件的实现原理是参考了log4net这一日志记录组件。log4net是.NET平台下的一个流行日志框架，它具有多种日志级别和灵活的输出方式。借鉴log4net的思路，JavaScript的logger组件同样实现了不同级别的日志...
JavaScript logger: Lumberjack
Haohappy的专栏
12-26 3997
As you know,it is difficult to debug a javascript app.Sometimes we use the rough alert() function (to output the error messages),but its not  suitable for complex situations and it will stop the scri
js logger
annuobin1120的博客
04-14 227
<span style="color:#CC0000;">这个组件的实现参考了log4net组件的记录方式，我们利用这个js的logger组件，就可以用log的输出的方式来进行你的调试工作了</span> <pre name="code" class="java">/* js调试组件 */ (function () ...
js-Logger：轻量级JavaScript日志管理库
最新发布
gitblog_00053的博客
05-10 445
js-Logger：轻量级JavaScript日志管理库 js-loggerLightweight, unobtrusive, configurable JavaScript logger.项目地址:https://gitcode.com/gh_mirrors/js/js-logger js-Logger 是一个无依赖、简洁且可配置的JavaScript日志记录工具，让你的前端开发工作变得更加便...
我的Js日志组件 logger for js (log4js)- (2009-10-30)
Fisher小屋
10-30 201
前一段使用了一下blackbird(一个js logger框架),效果还不错,不过还达不到我的要求,而且界面略显笨重。而以前,我是用的Adobe的Spry组件,界面效果没有blackbird好看.功能也一般. 考虑到项目/产品的实际需要,结合着log4j的设计思想,把blackbird改造成自己的log框架log4js.呵呵,这个名头好象有点大, :）.不管了,先把我的这个log4js的功能...
关于自定义Egg.js的请求级别日志详解
10-17
在探讨Egg.js框架的自定义请求级别日志之前，有必要对Egg.js本身做一个基础...通过深入理解Egg.js的logger组件以及它所依赖的第三方模块，开发者可以灵活地实现自定义的日志管理方案，提高业务应用的稳定性和可维护性。
2o3t-Logger：一个简单的Nodejs日志工具。 一个简单的Node.js记录器
02-03
2o3t记录仪 日志工具，可以打印日志 控制台输出 文件输出 在里面 const Logger = require ( '2o3t-logger' ) ; const logger = Logger . instance ( 'names' , { disabledFile : true , } ) ; // or const ...
简单实用的js调试logger组件
qq_27455063的博客
09-07 2025
这个组件的实现参考了log4net组件的记录方式，我们利用这个js的logger组件，就可以用log的输出的方式来进行你的调试工作了 /* js调试组件 */ (function () { var logger = function (level, object, viewType) { this.level = level; this.obje
日志控件js
09-11
1. My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 。 2.My97DatePicker.htm是必须文件,不可删除 3.各目录及文件的用途: WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名 config.js 语言和皮肤配置文件,无需引入 calendar.js 日期库主文件,无需引入 My97DatePicker.htm 临时页面文件,不可删除 目录lang 存放语言文件,你可以根据需要清理或添加语言文件 目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包  当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式 使用步骤： 将改文件下载下来放置到webroot目录下面，在使用script标签引入WdatePicker.js。
Logger.js:这个小小的javascript框架允许自定义日志输出
05-24
Logger.js 这个小小的javascript框架允许自定义日志输出。 // 如何使用： ... [removed] </ script> ... //初始化var logger = new ClassLogger（）; //输出logger.Trace（'message'，anydata）; //文字颜色为灰色 or logger.Error（'message'，anydata）; //文字颜色为红色 or logger.Warn（'message'，anydata）; //文字颜色为橙色 or logger.Info（'message'，anydata）; //文字颜色为绿色 or logger.Debug（'message'，anydata）; //文字颜色为黑色
js-logger, 轻量级，低调，可以配置的JavaScript记录器.zip
09-18
js-logger, 轻量级，低调，可以配置的JavaScript记录器 记录器 轻量级，低调，可以配置的JavaScript记录器。它可以让你丰富，出名，几乎不需要任何东西- 哦，它是使用 console.log的一个灵活抽象。安装js记录器具有零依赖性，并带有AMD和CommonJS的MO
json-logger-js:一个小巧快速的日志库，以 JSON 格式输出日志
05-29
@emartech/json-logger 一个小巧而快速的日志库，以 JSON 格式输出日志。 它具有与相同的基于命名空间的启用/禁用机制，并具有与相同的日志级别。 安装 npm install @emartech/json-logger 用法 process . env . DEBUG = 'redis' ; const mongoLogger = require ( '@emartech/json-logger' ) ( 'mongo' ) ; const redisLogger = require ( '@emartech/json-logger' ) ( 'redis' ) ; redisLogger . info ( 'connected' , { domain : 'yahoo' } ) ; // {"name":"redis","action":"connected",
jsnlog:.Net的JSNLog。 将jsnlog.js客户端日志记录与.Net服务器端组件相结合，以接收日志消息并将其传递给服务器端日志记录包。 在web.config中配置记录器
05-23
日志 该软件包在服务器端日志中记录JavaScript错误，AJAX超时和其他客户端事件。 有以下版本： 达网络-记录客户端事件到ELMAH，log4net的，NLOG，Serilog和Common.Logging（; ） Node.Js-将客户端和服务器端事件都记录到任何Winston传输中（； ； ）。 普通JavaScript-将客户端事件记录到服务器（； ）。
logger:一个 JavaScript 日志服务
06-17
记录器.js 用于记录前端应用程序中抛出的错误的 Logger Web 服务 用法 设置： 首先必须部署这个 spring 应用程序。 为了测试它可以在本地克隆并使用以下命令启动： mvn clean spring-boot:run 运行后，您必须使用脚本标记从 html 文档链接到前端库。 如果您在本地运行，javascript 库的默认位置将是“//localhost:9001/js/logger.js”。 完成此操作后，您可以在 html 中出现的任何 js 文档中设置 Logger。 实例化： 您可以通过在构造函数上调用 new 并传递初始设置来实例化记录器的实例。 所有设置都有默认值，因此不需要设置对象。 var logger = new Logger ( settingsObj ) ; 设置： 示例设置对象如下所示： var settingsObj = {
logger.js
海宏
10-22 2794
因为有做到用户行为跟踪的功能，所以
Vue.js 学习日志——组件（九）
不会爬树的程序猿
07-12 651
Vue.js 组件 组件（Component）可以扩展 HTML 元素，封装可重用的代码。 注册一个组件的语法： Vue.component(tagName,options) tagname为组件名，options为配置项。注册后调用组件的方式： <tagName></tagName> 全局组件 <div id="div"> <hel...
javascript logger
10-15
最新下载：http://code.google.com/p/jskfs/
探索.Net Core内置日志组件及其默认配置
.Net Core中的日志组件(Logging)是Microsoft提供的一个核心功能，用于在应用程序中记录和管理各种类型的事件信息。尽管其默认配置并不包含常见的文件日志记录，但开发者可以选择集成第三方库如NLog或Log4Net来增强...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值