通过chrome浏览器控制台(Console)进行PHP Debug的方法_php技巧

 效果如下图

PHP Console是一款可以帮助用户模拟真实的PHP网站运行环境,帮助用户使用Chrome插件对PHP代码进行调试的Chrome插件,用户在Chrome中安装了PHP Console插件以后,可以在自己的PHP项目中引用PHP Console项目代码,并输出调试信息,让PHP Console插件进行捕获,这样在网站发布成功以后,还可以使用PHP Console插件进行输出调试信息到Chrome浏览器中,用户可以通过PHP Console插件来查看这些来自于PHP服务器发来的调试日志。

当我们的PHP程序Debug时,比较常用的方式是将变量的信息打印到浏览器中,例如这样:

<?php
echo '<pre>';
print_r($bar);
echo '</pre>';
exit;

可是直接打印出来有可能会干扰你的页面,打乱布局,影响作为Api返回的数据等问题。这时我们可以采取将调试信息输出到文件的方式,如下是最简单的例子:

error_log(print_r($bar, true));

可是这种方式用来记录日志还合适,用到调试时终究还是不太方便。此时我们可以利用现代浏览器的控制台,比如Chrome Console(Win快捷键 Ctrl+Shift+J),将内容输出到Console里,就可以解决这个问题了。

现在已经有一些这样的工具了,比如说 PHP-Console 或者Chrome Logger ,前者针对PHP,后者支持多种服务端语言,使用方式都是先安装一个Chrome扩展,然后提供服务端的库供调用。实现方式大致是利用Session,Cookies等来传递数据。

如上是比较完善的解决方式,都提供了丰富的功能。但如果只是想要一个简单的,可用的,不用安装扩展程序的方式来解决这个问题,那么可以这么来做:

<?php
function console_log($data)
{
	if (is_array($data) || is_object($data))
	{
		echo("<script>console.log('".json_encode($data)."');</script>");
	}
	else
	{
		echo("<script>console.log('".$data."');</script>");
	}
}

其实质上就是在页面里加入了一段javascript的脚本,利用 console.log() 函数输出信息到控制台,如上方法打印出来都是字符串形式,如果将单引号去掉,PHP的数组和对象将以JS对象的方式打印出来,即echo("<script>console.log(".json_encode($data).");</script>");,究竟使用哪一种看你喜欢的方式了。
如上就是最简单的实现方式了,但这么做有一点不太好,就是输出的很凌乱,如果你在不同的位置都调用了该函数,那么在页面的各个位置都将插入一段<script>,虽说JS在页面几乎任何位置都可以,但我们可以有更好的办法,将所有数据统一到一处输出:

<?php
//注册一个shutdown函数,如果不这么做的话记得在程序最后echo Console_log::fetch_output();
register_shutdown_function('my_shutdown');

function my_shutdown()
{
	echo Console_log::fetch_output();
}

class Console_log {
  private static $output = '';
  static function log($data)
  {
    if (is_array($data) || is_object($data))
    {
      $data = json_encode($data);
    }
    ob_start();
    ?>
		<?php if (self::$output === ''):?>
		<script>
		<?php endif;?>
		console.log('<?=$data;?>');
    <?php
    self::$output .= ob_get_contents();
    ob_end_clean();
  }
  static function fetch_output()
  {
  	if (self::$output !== '')
  	{
  		self::$output .= '</script>';
  	}
    return self::$output;
  }
}

注意如上使用<?=来代替<?php echo ,需要在php.ini中开启Short_open_tag=On。这段代码就是利用php的输出控制缓冲函数来将数据保存下来,最后一次全部输出。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索php
debug
chrome浏览器控制台、chrome console debug、chrome浏览器debug、控制台打印console、js控制台输出console,以便于您获取更多的相关知识。

时间: 2024-09-21 20:09:01

通过chrome浏览器控制台(Console)进行PHP Debug的方法_php技巧的相关文章

php禁止直接从浏览器输入地址访问.php文件的方法_php技巧

本文实例讲述了php禁止直接从浏览器输入地址访问.php文件的方法.分享给大家供大家参考.具体实现方法如下: 一般来说对于有些重要的文件我们并不希望用户可以直接输入地址进行访问,对此我们需要进行一些设置.下面总结了一些php禁止直接从浏览器输入地址访问.PHP文件方法,非常实用. 比如说http://www.jb51.net/xx.php 这个文件我不想让别人直接从浏览器输入地址访问. 但是如果从任何网站连接http://www.jb51.net/xx.php过来不可以访问的话,本机建立连接也无

Win10系统下chrome浏览器占用CPU过高的处理方法

最近一些用户使用chrome浏览器之后,发现chrome浏览器占用CPU过高,怕影响电脑的运行速度,这该怎么办呢?下面小编给大家分享Win10系统下chrome浏览器占用CPU过高的处理方法!一起去看看吧! 具体方法如下: 在Chrome栏输入"chrome://flags"命令,进入Chrome的实验性功能列表中,找到"自动舍弃标签页"项目后(懒得翻内容的直接Ctrl+F,在搜索框搜索),将默认改成启用,就会将暂时不浏览的页面"冻结"起来,效果

Win7系统Chrome浏览器无法显示网页图片的解决方法

Win7系统打开Chrome浏览器浏览网页发现页面无法显示图片,出现这种情况该如何解决?下面小编为大家带来Win7系统Chrome浏览器无法显示网页图片的解决方法.一起去看看吧! 方法一: 1.清理缓存1.启动Chrome浏览器,然后单击浏览器右上角按钮,选择"工具"-"清除浏览数据": 2.在弹出的窗口中将"清除指定时间内的数据"选择"全部"并将下方的"清空缓存"勾选上,最后单击底部的"清除浏览

Chrome浏览器模拟手机访问网站的设置方法

  以前我们介绍过如何通过修改Chrome浏览器运行参数的方法来模拟手机访问网站,但是在Chrome 32和33版本以后增加了更加便捷的方法,在开发者工具中只需要设置一下就能方便的模拟各种手机型号的访问效果了. 方法如下: 1.打开Chrome浏览器,需要32以后版本的.笔者使用的是Chrome 33版本. 2.打开"开发者工具",快捷键(F12或者Ctrl+Shift+i). 3.在"开发者工具"界面的右侧有个"Show drawer"按钮,点

Chrome浏览器清除页面js文件缓存的方法

Chrome浏览器清除页面js文件缓存 Chrome浏览器清除js缓存方法虽然简单,但有些人还是不太会,有些人会去设置里面清除有时候没有用,这里写一下简单步骤,使用一次以后就会了,而且速度更快 1.打开需清缓存的页面(如:元素编辑页面),再按F12调出开发模式框 2.勾选 Network标签下 Disable cache选项 (如果之前已勾选直接下一步) 3.按F5或右键"重新加载"刷新页面内容 (刷新页面后本页面相关js缓存已清除) 4.页面重新加载完成再按F12隐藏开发模式框就ok

JS判断浏览器是否安装flash插件的简单方法_javascript技巧

1. 直接判断是否有flash插件 var myFlash = (function(){ if(typeof window.ActiveXObject != "undefined"){ return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); }else{ return navigator.plugins['Shockwave Flash']; } })();  chrome: Edge浏览器中取消了win

JS实现兼容各浏览器解析XML文档数据的方法_javascript技巧

本文实例讲述了JS实现兼容各浏览器解析XML文档数据的方法.分享给大家供大家参考.具体分析如下: 网站上很多用JS解析XML文档的资料或多或少都有点问题, 以下是自己总结的代码,用来解析XML文档,兼容各个浏览器. parseXMLDOM.js代码: /* * 纯JS解析XML文档(兼容各个浏览器) */ function parseXMLDOM(){ var _browserType = ""; var _xmlFile = ""; var _XmlDom = n

浏览器无法运行JAVA脚本的解决方法_javascript技巧

1.浏览器无法运行JAVA脚本的解决方法. rundll32.exe advpack.dll /DelNodeRunDLL32 %systemroot%System32dacui.dll  rundll32.exe advpack.dll /DelNodeRunDLL32 %systemroot%Catrooticatalog.mdb  regsvr32 /s comcat.dll  regsvr32 /s asctrls.ocx  regsvr32 /s oleaut32.dll  regsv

ie9 提示&#039;console&#039; 未定义问题的解决方法_javascript技巧

维护的项目在ie9之下运行 没有问题,新增代码之后发现不能完整展示.打开ie的开发者工具之后又可以展示完整.找了很久没找到原因,后来发现打开开发者工具之后在控制台有一条输出语句.关掉开发者工具之后,在状态栏发现提示'console' 未定义,为什么之前的运行没有问题,之后的就不行呢?百思不得其解,后来在代码中增加下面代码: 复制代码 代码如下: window.console = window.console || (function(){ var c = {}; c.log = c.warn =