chrome_php logger 的實現原理

chrome_php是什麼

 

一、chrome_php 是什麼？

一款 Chrome 下用來配合調試 PHP 的工具，能夠經過，console來查看php的信息

 

1.2用法

  用法特別簡單，有一個chrome_php.php 文件  和 chrome Logger的擴展  下載地址http://craig.is/writing/chrome-logger

include 'chrome_php.php';
$array = array(
	"Action"  => "Recoverdownload",
   "Data"   => array(
   		array(
   			"AuthorName" => "吳孟恩",
   			"FileName"       =>  "西遊.ebk3",
   			"FileId"             => "10058011",
   			"Type"     =>  1,
   	),
   	array(
   			"AuthorName" => "心夢無痕",
   			"FileName"       =>  "七界傳說.ebk3",
   			"FileId"             => "10058011",
   			"Type"     		  =>  2,
   	),
   ),
);
ChromePhp::log($array);

在瀏覽器裏面 點擊chrome logger 使其變亮　在console.log能夠看到以下的結果

 

 

 

二、chrome是怎麼實現的呢，帶着好奇心就看了看

經過追蹤 log函數
 log()  =>  _log() => _addRow() => _writeHeader()

找到重點了 把要輸出數據 經過header 頭進行了輸出 

 protected function _writeHeader($data)
{
        header(self::HEADER_NAME . ': ' . $this->_encode($data));//base64_encode(utf8_encode(json_encode($data)));  
}


  

　　

2.2 查看谷歌調試工具裏的 http請求

 有以下數據，經過header把數據輸出給客戶端，

X-ChromeLogger-Data:eyJ2ZXJzaW9uIjoiNC4xLjAiLCJjb2x1bW5zIjpbImxvZyIsImJhY2t0cmFjZSIsInR5cGUiXSwicm93cyI6W1tbeyJBY3Rpb24iOiJSZWNvdmVyZG93bmxvYWQiLCJEYXRhIjpbeyJBdXRob3JOYW1lIjoiXHU1NDM0XHU1YjVmXHU2MDY5IiwiRmlsZU5hbWUiOiJcdTg5N2ZcdTZlMzguZWJrMyIsIkZpbGVJZCI6IjEwMDU4MDExIiwiVHlwZSI6MSwiRG93bmxvYWRVcmwiOiJodHRwOlwvXC9haDIuemhhbmd5dWUuY29tXC9yXC9kb3dubG9hZD90eXBlPTEmYmlkPTEwMDU4MDExJmNpZD0wJnByPTAmcHJpY2U9MiZmZWVVbml0PTEwIn0seyJBdXRob3JOYW1lIjoiXHU1ZmMzXHU2OGE2XHU2NWUwXHU3NWQ1IiwiRmlsZU5hbWUiOiJcdTRlMDNcdTc1NGNcdTRmMjBcdThiZjQuZWJrMyIsIkZpbGVJZCI6IjEwMDU4MDExIiwiVHlwZSI6MiwiRG93bmxvYWRVcmwiOiJodHRwOlwvXC9haDIuemhhbmd5dWUuY29tXC9yXC9kb3dubG9hZD90eXBlPTEmYmlkPTEwMDU4MDExJmNpZD0wJnByPTAmcHJpY2U9MiZmZWVVbml0PTEwIn1dfV0sIkU6XFx3YW1wXFx3d3dcXHRlc3QucGhwIDogNDgiLCIiXV0sInJlcXVlc3RfdXJpIjoiXC90ZXN0LnBocCJ9

2.3  JS是怎麼獲取的呢

 

調試工具 --> sources --> content script -->noaneddfkdjfnfdakjjmocngnfkfehhd (chrome logger 的ID號) --》log.js-->241行  

chrome . extension . sendMessage ( 'ready' , function ( queuedRequests ) {

if ( queuedRequests ) {

如圖所示  

 

 

HTTP header 能夠經過 chrome 擴展獲取到！！！