电子商务网站建设文献,网站建设课程概要,深圳百度竞价推广,查域名价格logger2js - JavaScript日志与调试工具库
logger2js是一个功能强大的前端JavaScript日志与调试工具库#xff0c;提供了丰富的日志输出、性能测试和代码调试功能。该库支持配置化引入#xff0c;包含5种皮肤风格和丰富的API接口#xff0c;如 a l e r t 增强方法、 alert增…logger2js - JavaScript日志与调试工具库
logger2js是一个功能强大的前端JavaScript日志与调试工具库提供了丰富的日志输出、性能测试和代码调试功能。该库支持配置化引入包含5种皮肤风格和丰富的API接口如 a l e r t 增强方法、 alert增强方法、 alert增强方法、PF性能分析工具和$FT调用栈追踪等。控制台界面可拖拽调整具备代码高亮、格式化、搜索等特性并支持多种快捷键操作。通过简单引入logger.js文件即可提升前端开发调试效率是开发者进行问题定位和性能优化的得力助手。
logger2js源代码 https://gitee.com/yanjianzhong007/logger2js
功能特点
日志输出系统
提供$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: 控制台位置居中尺寸重置方向键: 移动控制台位置
文件结构
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文件
!-- 本地资源完整参数示例 --
script typetext/javascriptsrclogger.jsenabledtruelangcntimefalsecontextmenutrueeasefalsehighlightertruebeautifytruecookietruesimplemodetrueminfalsemovebordertruedebugfalseskinid0
/script!-- 在线资源,标准配置 --
script type text/javascript srchttps://gitee.com/yanjianzhong007/logger2js/raw/master/build/logger.js skinid3/script 配置参数说明
参数名说明可选值默认值enabled是否启用logger功能true/falsetruelang界面初始语言cn/encntime是否显示时间戳true/falsefalsecontextmenu是否启用右键菜单true/falsetrueease是否启用菜单缓动效果true/falsefalsehighlighter是否启用代码高亮true/falsetruebeautify是否启用代码格式化true/falsetruecookie是否支持cookietrue/falsetruesimplemode是否以简易模式显示控制台true/falsetruemin是否初始显示为最小化true/falsefalsemoveborder是否显示调整大小的虚线框true/falsetruedebug是否支持代码执行功能true/falsefalseskinid皮肤ID0-40
核心API
日志输出
// 基本日志输出
$alert(这是一条日志信息, #FFD700);// 多参数输出
$alert(参数1, 参数2, 参数3);// 控制台方法增强
console.log(普通日志);
console.debug(调试日志);
console.info(信息日志);
console.warn(警告日志);
console.error(错误日志);性能测试
// 开始性能计时
$PF.begin();// 执行一些操作...// 结束计时并输出结果
$PF.end(操作名称, green);函数调用栈
// 在函数内部调用输出调用栈
function test() {$FT.show();// 函数逻辑...
}错误处理
// 捕获并输出错误信息
try {// 可能出错的代码
} catch (e) {$Error(e);
}皮肤自定义
logger2js提供了5种内置皮肤可通过skinid参数设置
0: 高贵橘黄1: 清新湖蓝2: 神秘暗红3: 干净罗兰4: 古奇深绿
也可以通过控制台界面上的换肤按钮实时切换皮肤。
许可证
logger2js基于BSD许可证开源详细信息请查看项目 LICENSE 文件。
作者信息
初始开发者: yanjianzhong邮箱: yjz_ok163.com项目地址: https://gitee.com/yanjianzhong007/logger2js
