PHP在瀏覽器上跟蹤調試的方法以及使用ChromePhp、FirePHP的簡單介紹

標籤：chromephp   firephp   

之前用ThinkPHP時發現有個 trace 函數可以跟蹤調試，感覺很有意思，網上搜尋了下類似的東西，發現了 ChromePhp ，以前沒想過這樣來調試 PHP 程式，感覺非常方便，很有用。

ThinkPHP 使用的是自己產生的 HTML 隨模版一起輸出來顯示，偶爾會遇到一些莫名其妙的問題，效果不是太好，

還有一些也是類似的方法，但輸出的主要是在模版中增加 JS 代碼，呼叫瀏覽器的調試方法進行輸出調試

如 console.log(‘PHP的一些調試輸出內容‘);

ChromePhp 是通過header來傳輸調試內容並通過安裝 Chrome 瀏覽器的外掛程式讀取header 資訊顯示到瀏覽器調試面板中進行查看，功能比較強大，對頁面沒什麼太多幹擾，調試也更方便，Firefox下據說也有類似的 firePhp ，不過現在不怎麼用Firefox瀏覽器也沒去測試過

官網地址：

http://www.chromelogger.com/

這是該開源項目的 Github 地址：

Github : https://github.com/ccampbell/chromephp

這是 Chrome 核心瀏覽器外掛程式的安裝地址：

https://chrome.google.com/extensions/detail/noaneddfkdjfnfdakjjmocngnfkfehhd

不過老是被牆，不容開啟，而且只能是 google chrome 才能安裝，我找了老半天只找到個 3.0 的外掛程式

外掛程式：

http://download.csdn.net/detail/zsjangel/7535201

可以安裝後試試 升級到現在最新的 4.1，我是這樣成功了的

3.0 的外掛程式表徵圖和 4.1 的不一樣的：

下面是4.1版本，黑色表示為開啟外掛程式，點擊啟動

下方顯示藍色時表示啟動，可以在面板中看到調試資訊

PHP下的使用方法：

ChromePhp::log('Hello console!');ChromePhp::group('this is group');ChromePhp::log('Hi 神神的蝸牛!');ChromePhp::error('something went wrong!');ChromePhp::groupEnd();ChromePhp::table(array(array('aa'=>'bb', 'cc'=>11), array('aa'=>'cc', 'cc'=>22)));

group 表示預設直接展開下面的所有都是一組調試資訊，一直到 groupEnd 結束，顯示效果和普通的 log 是不一樣的

若使用 groupCollapsed 則預設收縮不顯示整個 group 資訊

table 的參數必須是 二維數組，否則將不顯示，數組的鍵名及欄位名

下面是：

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

剛剛又試了 firefox 下的 FirePHP 外掛程式，他們的功能都很類似，但 FirePHP 比 ChromePHP 更熱門些，也不會被牆安裝很方便，後者的 github 項目似乎一年沒有維護更新了，也可能是沒什麼可更新了的吧，不過 firefox 和 Chrome 瀏覽器比起來，後者應該使用的人更多了吧。

FirePHP 官方首頁：（下載 PHP 端類庫）

http://www.firephp.org/HQ/Install.htm

安裝外掛程式就不用說了吧，附加組件裡面搜尋下 FirePHP 就行了很方便，必須依賴 FireBug，最好先安裝 FireBug 再安裝 FirePHP

PHP簡單測試代碼：

$fire = FirePHP::init();$fire->log('Hello console!');// Collapsed:true 收合該組調試資訊$fire->group('this is group', array('Collapsed'=>true));$fire->log('Hi 神神的蝸牛!');$fire->error('something went wrong!');$fire->groupEnd();$fire->table('資料表', array(array('aa'=>'bb', 'cc'=>11), array('aa'=>'cc', 'cc'=>22)));

效果：

他們的原理也都一樣，使用方式上基本上差不多的，大概就是這樣啦

最後再來一個 header 傳輸調試信心的對比：

FirePHP 在輸出時應該會判斷當前瀏覽器，非 Firefox 不會輸出 header 資訊，而 ChromePHP 則未判斷都是直接輸出

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------