基於 JQuery 寫的一個 Debug window. 純為好玩.

花了半天時間, 把舊有的個人用 debug window, 整修為可以由其他 js 增加功能的 debug window.

用這個可能會導致網站被 hack 的風險呢.

需要裝的庫為 jquery.js 開發時版本為 1.9.1/2.0.2 以後會不會維護就不知道了 ( 毫無責任感 😛 )

[CodePen height=500 show=js href=BHwos user=canis ]

debugScreen.css 是負責進行 debug window 的畫面配置, 純粹為了美觀…嗯..本人沒甚麼美感就是.

隨便喇~~~

另外就要配上 js 檔.

jquery.cf.debug.js 放上去之後甚麼都沒有出現那就恭喜你咯 XD

因為還沒有啟用 debug, 而且 css 也正確的運行了.
要確實地運作需於 onload 時進行下列動作

[js]
$(document).ready(function(){
// 所有 script 完成後運行.
// 啟用 Debug window
$.debug.init();
// 加入自訂 Command
$.debug.addCmd({
tag : "hello", // 這是命令的語法 (就一個單字 XD )
info : "Just to say hi", // 這是給人類看的命令簡介.
fn : function(){ $.debug.log("Oh. hi there."); } // 這當然是功能啊!!!
});
});

$.debug.show(); // 顯示 debug window.
[/js]

以上, 就是簡單用法.

以下, 是功能/用法

1. $.debug.init();
   init debug window.
2. $.debug.show();
   display debug window
3. $.debug.hide();
   hidden debug window
4. $.debug.log(string);
   print text(string) on debug console. do what ever you want.
5. $.debug.addCmd(cmdClass,cmdClass,cmdClass);
   assign a command function to debug window.
   cmdClass must contain following object.
   cmdClass.tag = “string”; // your command
   cmdClass.info = “string”; // description for your command
   cmdClass.fn = function(){}; // the function call you want to link to this command
6. $.debug.run(string)
   this will tried to search the command you setup. and do the job.