logger2js - JavaScript日志與調試工具庫

logger2js是一個功能強大的前端JavaScript日志與調試工具庫，提供了豐富的日志輸出、性能測試和代碼調試功能。該庫支持配置化引入，包含5種皮膚風格和豐富的API接口，如$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 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

日志輸出

// 基本日志輸出
$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_ok@163.com
• 項目地址: https://gitee.com/yanjianzhong007/logger2js