logger2js - JavaScript日志与调试工具库

logger2js - JavaScript日志与调试工具库

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

功能特点

日志输出系统

  • 提供$alert方法替代原生alert,支持多参数、彩色输出
  • 增强console对象方法(console.log/debug/info/warn/error),提供更丰富的格式化输出
  • 支持不同数据类型(Date/Function/Array/Object/DOM/json)的格式化显示
  • 可配置的时间戳显示,方便日志时序分析

调试辅助工具

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

交互式控制台

  • 可拖拽、调整大小的控制台界面
  • 多种皮肤样式选择(经典橘黄/清新湖蓝/神秘暗红/干净罗兰/古奇深绿)
  • 支持控制台折叠/展开、最大化/还原等操作
  • 右键上下文菜单,提供丰富的操作选项
  • 日志内容搜索功能,快速定位关键信息

快捷键支持

  • Shift + D: 在控制台输出当前活动元素的源代码
  • Shift + A: 隐藏控制台
  • Shift + K: 显示页面HEAD部分源代码
  • Shift + Q: 控制台界面换肤
  • Shift + F2: 移动控制台图标位置
  • Shift + V: 粘贴剪切板内容到控制台
  • F2: 控制台位置居中,尺寸重置
  • 方向键: 移动控制台位置

文件结构

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

使用方法

基本引入

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

html 复制代码
<!-- 本地资源,完整参数示例 -->
<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>

<!-- 在线资源,标准配置 -->
<script type ="text/javascript" src="https://gitee.com/yanjianzhong007/logger2js/raw/master/build/logger.js"   skinid="3"></script> 

配置参数说明

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

核心API

日志输出
javascript 复制代码
// 基本日志输出
$alert("这是一条日志信息", "#FFD700");

// 多参数输出
$alert("参数1", "参数2", "参数3");

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

// 执行一些操作...

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

皮肤自定义

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

  • 0: 高贵橘黄
  • 1: 清新湖蓝
  • 2: 神秘暗红
  • 3: 干净罗兰
  • 4: 古奇深绿 也可以通过控制台界面上的换肤按钮实时切换皮肤。

许可证

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

作者信息

相关推荐
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴5 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust6 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
全宝7 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele7 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮7 小时前
【无标题】
开发语言·前端·javascript
fie88897 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式