說(shuō)明

SocketLog適合Ajax調(diào)試和API調(diào)試， 舉一個(gè)常見(jiàn)的場(chǎng)景，用SocketLog來(lái)做微信調(diào)試， 我們?cè)谧鑫⑿臕PI開(kāi)發(fā)的時(shí)候，如果API有bug，微信只提示“改公眾賬號(hào)暫時(shí)無(wú)法提供服務(wù)，請(qǐng)稍候再試” ，我們根本不知道API出來(lái)什么問(wèn)題。 有了SocketLog就不一樣了， 我們可以知道微信給API傳遞了哪些參數(shù)， 程序有錯(cuò)誤我們也能看見(jiàn)錯(cuò)誤信息(下方有張圖片，可能加載慢，請(qǐng)耐心等待一下)

• 正在運(yùn)行的API有bug，不能var_dump進(jìn)行調(diào)試，因?yàn)闀?huì)影響client的調(diào)用。 將日志寫(xiě)到文件，查看也不方便，特別是帶調(diào)用棧或大數(shù)據(jù)結(jié)構(gòu)的文件日志，查看日志十分困難。 這時(shí)候用SocketLog最好，SocketLog通過(guò)websocket將調(diào)試日志打印到瀏覽器的console中。你還可以用它來(lái)分析開(kāi)源程序，分析SQL性能，結(jié)合taint分析程序漏洞。
• Chrome插件安裝：https://chrome.google.com/webstore/detail/socketlog/apkmbfpihjhongonfcgdagliaglghcod?（如果不能正常訪(fǎng)問(wèn)這個(gè)頁(yè)面，你可以用下面手動(dòng)安裝的方法進(jìn)行安裝）
• 目錄結(jié)構(gòu)：
• chrome 目錄是 chrome插件的源代碼
• chrome.crx 文件是chrome插件的安裝包， 如果你無(wú)法從chrome應(yīng)用商店安裝，可進(jìn)行手動(dòng)安裝， 瀏覽器地址欄輸入并打開(kāi)： chrome://extensions/ ，然后將chrome.crx拖入即可安裝。
• php 目錄下的SocketLog.class.php是發(fā)送日志的類(lèi)庫(kù),我們?cè)诎l(fā)送日志的時(shí)候，需要載入這個(gè)類(lèi)庫(kù)然后調(diào)用函數(shù)slog即可。
• 效果展示： 我們?cè)跒g覽網(wǎng)站的時(shí)候在瀏覽器console中就知道程序做了什么，這對(duì)于二次開(kāi)發(fā)產(chǎn)品十分有用。 下面效果圖在console中打印出瀏覽discuz程序時(shí)，執(zhí)行了哪些sql語(yǔ)句， 以及執(zhí)行sql語(yǔ)句的調(diào)用棧。程序的warning，notice等錯(cuò)誤信息也可以打到console中。?

使用方法

• 首先，請(qǐng)?jiān)赾hrome瀏覽器上安裝好插件。
• 然后，啟用Websocket服務(wù)，該服務(wù)是nodejs寫(xiě)的，在server目錄下，請(qǐng)先確保你的環(huán)境已經(jīng)安裝nodejs， 啟動(dòng)Websocket服務(wù)運(yùn)行命令?node server/index.js?, 將會(huì)在本地起一個(gè)websocket服務(wù) ，監(jiān)聽(tīng)端口是1229 。 如果想服務(wù)后臺(tái)運(yùn)行：?nohup node server/index.js > /dev/null &

• 在自己的程序中發(fā)送日志：

  <?php include './php/SocketLog.class.php'; slog('hello world'); ?>

• 用slog函數(shù)發(fā)送日志， 支持多種日志類(lèi)型：

  slog('msg','log'); //一般日志 slog('msg','error'); //錯(cuò)誤日志 slog('msg','info'); //信息日志 slog('msg','warn'); //警告日志 slog('msg','trace');// 輸入日志同時(shí)會(huì)打出調(diào)用棧 slog('msg','alert');//將日志以alert方式彈出 slog('msg','log','color:red;font-size:20px;');//自定義日志的樣式，第三個(gè)參數(shù)為css樣式

• 通過(guò)上面例子可以看出， slog函數(shù)支持三個(gè)參數(shù)：

• 第一個(gè)參數(shù)是日志內(nèi)容，日志內(nèi)容不光能支持字符串喲，大家如果傳遞數(shù)組,對(duì)象等一樣可以打印到console中。
• 第二個(gè)參數(shù)是日志類(lèi)型，可選，如果沒(méi)有指定日志類(lèi)型默認(rèn)類(lèi)型為log， 第三個(gè)參數(shù)是自定樣式，在這里寫(xiě)上你自定義css樣式即可。

配置

• 在載入SocketLog.class.php文件后，還可以對(duì)SocketLog進(jìn)行一些配置。

• 例如：我們?nèi)绻雽⒊绦虻膱?bào)錯(cuò)信息頁(yè)輸出到console，可以配置

  <?php include './php/SocketLog.class.php'; slog(array( 'error_handler'=>true ),'set_config'); echo notice;//制造一個(gè)notice報(bào)錯(cuò) slog('這里是輸出的一般日志'); ?>
• 配置SocketLog也是用slog函數(shù)， 第一個(gè)參數(shù)傳遞配置項(xiàng)的數(shù)組，第二個(gè)參數(shù)設(shè)置為set_config

• 還支持其他配置項(xiàng)

  <?php include './php/SocketLog.class.php'; slog(array( 'host'=>'localhost',//websocket服務(wù)器地址，默認(rèn)localhost 'port'=>'1229',//websocket服務(wù)器端口，默認(rèn)端口是1229 'optimize'=>false,//是否顯示利于優(yōu)化的參數(shù)，如果運(yùn)行時(shí)間，消耗內(nèi)存等，默認(rèn)為false 'show_included_files'=>false,//是否顯示本次程序運(yùn)行加載了哪些文件，默認(rèn)為false 'error_handler'=>false,//是否接管程序錯(cuò)誤，將程序錯(cuò)誤顯示在console中，默認(rèn)為false 'force_client_id'=>'',//日志強(qiáng)制記錄到配置的client_id,默認(rèn)為空 'allow_client_ids'=>array()限制允許讀取日志的client_id，默認(rèn)為空,表示所有人都可以獲得日志。 ) ,'set_config'); ?>
• optimize 參數(shù)如果設(shè)置為true， 可以在日志中看見(jiàn)利于優(yōu)化參數(shù)，如：[運(yùn)行時(shí)間：0.081346035003662s][吞吐率：12.29req/s][內(nèi)存消耗：346,910.45kb]
• show_included_files 設(shè)置為true，能顯示出程序運(yùn)行時(shí)加載了哪些文件，比如我們?cè)诜治鲩_(kāi)源程序時(shí)，如果不知道模板文件在那里， 往往看一下加載文件列表就知道模板文件在哪里了。
• error_handler 設(shè)置為true，能接管報(bào)錯(cuò)，將錯(cuò)誤信息顯示到瀏覽器console， 在開(kāi)發(fā)程序時(shí)notice報(bào)錯(cuò)能讓我們快速發(fā)現(xiàn)bug，但是有些notice報(bào)錯(cuò)是不可避免的，如果讓他們顯示在頁(yè)面中會(huì)影響網(wǎng)頁(yè)的正常布局，那么就設(shè)置error_handler,讓它顯示在瀏覽器console中吧。 另外此功能結(jié)合php taint也是極佳的。 taint能自動(dòng)檢測(cè)出xss，sql注入， 如果只用php taint， 它warning報(bào)錯(cuò)只告訴了變量輸出的地方，并不知道變量在那里賦值、怎么傳遞。通過(guò)SocketLog， 能看到調(diào)用棧，輕松對(duì)有問(wèn)題變量進(jìn)行跟蹤。 更多taint的信息：http://www.laruence.com/2012/02/14/2544.html
• 設(shè)置client_id: 在chrome瀏覽器中，可以設(shè)置插件的Client_ID ，Client_ID是你任意指定的字符串。?

• 設(shè)置client_id后能實(shí)現(xiàn)以下功能：

• 1，配置allow_client_ids 配置項(xiàng)，讓指定的瀏覽器才能獲得日志，這樣就可以把調(diào)試代碼帶上線(xiàn)。 普通用戶(hù)訪(fǎng)問(wèn)不會(huì)觸發(fā)調(diào)試，不會(huì)發(fā)送日志。 開(kāi)發(fā)人員訪(fǎng)問(wèn)就能看的調(diào)試日志， 這樣利于找線(xiàn)上bug。 Client_ID 建議設(shè)置為姓名拼命加上隨機(jī)字符串，這樣如果有員工離職可以將其對(duì)應(yīng)的client_id從配置項(xiàng)allow_client_ids中移除。 client_id除了姓名拼音，加上隨機(jī)字符串的目的，以防別人根據(jù)你公司員工姓名猜測(cè)出client_id,獲取線(xiàn)上的調(diào)試日志。

• 設(shè)置allow_client_ids示例代碼：

  slog(array( 'allow_client_ids'=>array('luofei_zfH5NbLn','easy_DJq0z80H') ),'set_config')

• 2, 設(shè)置force_client_id配置項(xiàng)，讓后臺(tái)腳本也能輸出日志到chrome。 網(wǎng)站有可能用了隊(duì)列，一些業(yè)務(wù)邏輯通過(guò)后臺(tái)腳本處理， 如果后臺(tái)腳本需要調(diào)試，你也可以將日志打印到瀏覽器的console中， 當(dāng)然后臺(tái)腳本不和瀏覽器接觸，不知道當(dāng)前觸發(fā)程序的是哪個(gè)瀏覽器，所以我們需要強(qiáng)制將日志打印到指定client_id的瀏覽器上面。 我們?cè)诤笈_(tái)腳本中使用SocketLog時(shí)設(shè)置force_client_id 配置項(xiàng)指定要強(qiáng)制輸出瀏覽器的client_id 即可。

• 示例代碼:

  <?php include './php/SocketLog.class.php'; slog(array( 'force_client_id'=>'luofei_zfH5NbLn' ),'set_config'); slog('test'); `

對(duì)數(shù)據(jù)庫(kù)進(jìn)行調(diào)試

• SocketLog還能對(duì)sql語(yǔ)句進(jìn)行調(diào)試，自動(dòng)對(duì)sql語(yǔ)句進(jìn)行explain分析，顯示出有性能問(wèn)題的sql語(yǔ)句。 如下圖所示。
• 圖中顯示出了三條sql語(yǔ)句 ， 第一條sql語(yǔ)句字體較大，是因?yàn)樗中阅軉?wèn)題， 在sql語(yǔ)句的后臺(tái)已經(jīng)標(biāo)注Using filesort。 我們還可以點(diǎn)擊某個(gè)sql語(yǔ)句看到sql執(zhí)行的調(diào)用棧，清楚的知道sql語(yǔ)句是如何被執(zhí)行的，方便我們分析程序、方便做開(kāi)源程序的二次開(kāi)發(fā)。圖中第三條sql語(yǔ)句為被點(diǎn)開(kāi)的狀態(tài)。

• 用slog函數(shù)打印sql語(yǔ)句是，第二個(gè)參數(shù)傳遞為MySQL或mysqli的對(duì)象即可。 示例代碼：

  $link=mysql_connect( 'localhost:3306' , 'root' , '123456' , true ) ; mysql_select_db('kuaijianli',$link); $sql="SELECT * FROM `user`"; slog($sql,$link);

  后面會(huì)以O(shè)neThink為實(shí)例再對(duì)數(shù)據(jù)庫(kù)調(diào)試進(jìn)行演示。

通過(guò)上面的方法，socketlog還能自動(dòng)為你檢測(cè)沒(méi)有where語(yǔ)句的sql操作，然后自動(dòng)提示你。

• 注意，有時(shí)候在數(shù)據(jù)比較少的情況下，mysql查詢(xún)不會(huì)使用索引，explain也會(huì)提示Using filesort等性能問(wèn)題， 其實(shí)這時(shí)候并不是真正有性能問(wèn)題， 你需要自行進(jìn)行判斷，或者增加更多的數(shù)據(jù)再測(cè)試。

對(duì)API進(jìn)行調(diào)試

網(wǎng)站調(diào)用了API ，如何將API程序的調(diào)試信息也打印到瀏覽器的console中？ 前面我們講了一個(gè)配置 force_client_id， 能將日志強(qiáng)制記錄到指定的瀏覽器。 用這種方式也可以將API的調(diào)試信息打印到console中，但是force_client_id 只能指定一個(gè)client_id， 如果我們的開(kāi)發(fā)環(huán)境是多人共用，這種方式就不方便了。 其實(shí)只要將瀏覽器傳遞給網(wǎng)站的User-Agent 再傳遞給API， API程序中不用配置force_client_id， 也能識(shí)別當(dāng)前訪(fǎng)問(wèn)程序的瀏覽器， 將日志打印到當(dāng)前訪(fǎng)問(wèn)程序的瀏覽器， 我們需要將SDK代碼稍微做一下修改。 調(diào)用API的SDK，一般是用curl寫(xiě)的，增加下面代碼可以將瀏覽器的User-Agent傳遞到API 。

$headers=array();if(isset($_SERVER['HTTP_USER_AGENT'])){$headers[]='User-Agent: '.$_SERVER['HTTP_USER_AGENT'];}if(isset($_SERVER['HTTP_SOCKETLOG'])){$headers[]='Socketlog: '.$_SERVER['HTTP_SOCKETLOG'];}curl_setopt($ch,CURLOPT_HTTPHEADER,$headers);

區(qū)分正式和開(kāi)發(fā)環(huán)境

進(jìn)入chrome瀏覽器的“工具”-->“擴(kuò)展程序” ， 點(diǎn)擊SocketLog的“選項(xiàng)”進(jìn)行設(shè)置。

分析開(kāi)源程序

有了SocketLog，我們能很方便的分析開(kāi)源程序，下面以O(shè)neThink為例， 大家可以在http://www.topthink.com/topic/2228.html?下載最新的OneThink程序。 安裝好OneThink后，按下面步驟增加SocketLog程序。

• 將SocketLog.class.php復(fù)制到OneThink的程序目錄中，你如果沒(méi)有想好將文件放到哪個(gè)子文件夾，暫且放到根目錄吧。

• 編輯入口文件index.PHP, 再代碼的最前面加載SocketLog.class.php?,并設(shè)置SocketLog

  <?phpinclude './SocketLog.class.php';slog(array('error_handler'=>true,'optimize'=>true,'show_included_files'=>true),'set_config');

• 編輯ThinkPHP/Library/Think/Db/Driver.class.php 文件，在這個(gè)類(lèi)中的execute 方法為一個(gè)執(zhí)行sql語(yǔ)句的方法，增加代碼：

  slog($this->queryStr,$this->_linkID);

• 類(lèi)中的query方法也是一個(gè)執(zhí)行sql語(yǔ)句的地方， 同樣需要增加上面的代碼

• 然后瀏覽網(wǎng)站看看效果：

通過(guò)console的日志，訪(fǎng)問(wèn)每一頁(yè)我們都知道程序干了什么，是一件很爽的事情。

• 提示：另一種更簡(jiǎn)單的方法，因?yàn)镺neThink每次執(zhí)行完sql語(yǔ)句都會(huì)調(diào)用$this->debug， 所以我們可以把slog($this->queryStr,$this->_linkID); 直接寫(xiě)在 Db.class.php文件的debug方法中。 這樣不管是mysqli還是mysql驅(qū)動(dòng)都有效。

下載地址:https://github.com/luofei614/SocketLog

來(lái)源:http://blog.csdn.net/sanxian_li/article/details/43766349

總結(jié)

以上是生活随笔為你收集整理的SocketLog-微信调试、API调试和AJAX的调试的工具，能将日志通过WebSocket输出到Chrome浏览器的console中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。