chrome_php logger 的实现原理

chrome_php是什么

 

1、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可以看到如下的结果

 

 

 

2、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 扩展获取到！！！