logger2js - JavaScript日志与调试工具库

logger2js - JavaScript日志与调试工具库

logger2js是一个功能强大的前端JavaScript日志与调试工具库,提供了丰富的日志输出、性能测试和代码调试功能。该库支持配置化引入,包含5种皮肤风格和丰富的API接口,如 a l e r t 增 强 方 法 、 alert增强方法、 alertPF性能分析工具和$FT调用栈追踪等。控制台界面可拖拽调整,具备代码高亮、格式化、搜索等特性,并支持多种快捷键操作。通过简单引入logger.js文件即可提升前端开发调试效率,是开发者进行问题定位和性能优化的得力助手。
在这里插入图片描述

logger2js源代码gitee地址 https://gitee.com/yanjianzhong007/logger2js

功能特点

日志输出系统

  • 零配置快速集成:通过简单script标签引入即可启用
  • 无侵入式设计:不影响生产环境性能,可配置启用状态
  • 提供$alert方法(当alert参数大于1时自动启用$alert替代),支持多参数、定制颜色输出
  • 提供log2js对象方法(log2js.trace/debug/info/warn/error)格式化输出
  • 增强console对象方法,提供更丰富的格式化输出
  • 支持不同数据类型(Date/Function/Array/Object/DOM/json)的格式化显示
  • 可配置的时间戳显示,方便日志时序分析

调试辅助工具

  • 性能测试:通过$PF.begin()$PF.end()精准测量代码执行时间
  • 函数调用栈:使用$FT.show()输出函数调用路径,便于追踪代码执行流程
  • 错误处理:定制window.onerrorlog2js.error方法捕获异常并显示详细堆栈信息
  • 代码高亮:支持HTML、CSS、JavaScript等多种语言的代码高亮显示
  • 代码格式化:内置代码美化功能,提高代码可读性

交互式控制台

  • 可定制界面:支持控制台折叠/展开、最大化/还原等操作,可拖拽、调整大小的控制台界面
  • 多种皮肤:内置5种风格皮肤(经典橘黄/清新湖蓝/神秘暗红/干净罗兰/古奇深绿),一键切换
  • 便捷操作:右键上下文菜单,提供丰富的操作选项,日志内容搜索功能,快速定位关键信息
  • 快捷键支持
    • Shift + D: 在控制台输出当前活动元素的源代码
    • Shift + A: 隐藏控制台
    • Shift + K: 显示页面HEAD部分源代码
    • Shift + Q: 控制台界面换肤
    • Shift + F2: 移动控制台图标位置
    • Shift + V: 粘贴剪切板内容到控制台
    • F2: 控制台位置居中,尺寸重置
    • 方向键: 移动控制台位置

文件结构

logger/
├── images/               - 界面资源图片
│   └── ico/              - 图标资源
├── Quick.html            - 快速启动界面
├── build.html            - 构建相关页面
├── plugin-Highlighter.js - 代码高亮插件
├── plugin-Beautify.js    - 代码格式化插件
├── plugin-jslogger.js    - 日志插件
├── logger-base.js        - 基础功能模块
├── logger-core.js        - 核心功能实现
├── logger.css            - 控制台样式表
└── logger.js             - 入口文件

使用方法

基本引入

在HTML页面中引入logger.js文件:

<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
  <head>
    <script type="text/javascript"
            src="logger.js"
            enabled="true"
            lang="cn"
            time="false"
            contextmenu="true"
            ease="false"
            highlighter="true"
            beautify="true"
            cookie="true"
            simplemode="true"
            min="false"
            moveborder="true"
            debug="false"
            skinid="0"
    ></script>
  </head>
</html>

在线资源引入,典型配置

<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
  <head>
    <script type ="text/javascript" 
            src="https://gitee.com/yanjianzhong007/logger2js/raw/master/build/logger.js" 
            skinid="3"
    ></script> 
  </head>
</html>

配置参数说明

参数名说明可选值默认值
enabled是否启用logger功能true/falsetrue
lang界面初始语言cn/encn
time是否显示时间戳true/falsefalse
contextmenu是否启用右键菜单true/falsetrue
ease是否启用菜单缓动效果true/falsefalse
highlighter是否启用代码高亮true/falsetrue
beautify是否启用代码格式化true/falsetrue
cookie是否支持cookietrue/falsetrue
simplemode是否以简易模式显示控制台true/falsetrue
min是否初始显示为最小化true/falsefalse
moveborder是否显示调整大小的虚线框true/falsetrue
debug是否支持代码执行功能true/falsefalse
skinid皮肤ID0-40

核心API

日志输出
//使用原始 $alert(message,color) 输出日志 
$alert("这是一条日志信息", "#FFD700");
$alert("参数1", "参数2", "参数3");

//使用封装后的 log2js 输出日志
log2js.setLevel(Logger.DEBUG);
log2js.info(null)
log2js.warn({aa:1,bb:44});
log2js.error(/foo/);
log2js.debug(navigator.userAgent);

// 控制台方法增强
console.log("普通日志");
console.debug("调试日志");
console.info("信息日志");
console.warn("警告日志");
console.error("错误日志");
性能测试
// 开始性能计时
$PF.begin();

// 执行一些操作...

// 结束计时并输出结果
$PF.end("操作名称", "green");
函数调用栈
// 在函数内部调用,输出调用栈
function test() {
  $FT.show();
  // 函数逻辑...
}
错误处理
// 捕获并输出错误信息
try {
  // 可能出错的代码
} catch (e) {
  log2js.error(e);
}


//不捕获错误,由window.onerror处理
asdf();//错误代码

皮肤自定义

logger2js提供了5种内置皮肤,可通过skinid参数设置:

  • 0: 高贵橘黄
  • 1: 清新湖蓝
  • 2: 神秘暗红
  • 3: 干净罗兰
  • 4: 古奇深绿
    也可以通过控制台界面右键菜单或快捷键“Shift+Q”实时切换皮肤。
    在这里插入图片描述

许可证

logger2js基于MIT许可证开源,详细信息请查看项目 LICENSE 文件。

作者信息

  • 初始开发者: yanjianzhong
  • 邮箱: yjz_ok@163.com
  • 项目地址: https://gitee.com/yanjianzhong007/logger2js

鸣谢插件提供者

JS Beautifier:
Written by Einar Lielmanis, einars@gmail.com , http://jsbeautifier.org/
Code Syntax Highlighter:
Version 1.3.0 Copyright © 2004 Alex Gorbatchev. http://www.dreamprojections.com/syntaxhighlighter/
js-logger :
Jonny Reeves, http://jonnyreeves.co.uk/, http://github.com/jonnyreeves/js-logger

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值