之前用ThinkPHP时发现有个 trace 函数可以跟踪调试,感觉很有意思,网上搜索了下类似的东西,发现了 ChromePhp ,以前没想过这样来调试 PHP 程序,感觉非常方便,很有用。

ThinkPHP 使用的是自己生成的 HTML 随模版一起输出来显示,偶尔会遇到一些莫名其妙的问题,效果不是太好,

还有一些也是类似的方法,但输出的主要是在模版中增加 JS 代码,调用浏览器的调试方法进行输出调试

如 console.log('PHP的一些调试输出内容');

ChromePhp 是通过header来传输调试内容并通过安装 Chrome 浏览器的插件读取header 信息显示到浏览器调试面板中进行查看,功能比较强大,对页面没什么太多干扰,调试也更方便,火狐下据说也有类似的 firePhp ,不过现在不怎么用火狐浏览器也没去测试过

官网地址:

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 则未判断都是直接输出

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

PHP在浏览器上跟踪调试的方法以及使用ChromePhp、FirePHP的简单介绍的更多相关文章

  1. PHP在浏览器上跟踪调试的方法以及使用ChromePhp、FirePHP的简介

    之前用ThinkPHP时发现有个 trace 函数能够跟踪调试,感觉非常有意思.网上搜索了下类似的东西.发现了 ChromePhp ,曾经没想过这样来调试 PHP 程序.感觉非常方便,非常实用. Th ...

  2. Android平台Camera实时滤镜实现方法探讨(十)--代码地址以及简单介绍(20160118更新)

    简单做了个相机和图片编辑模块,时间原因非常多功能还没有做.尚有BUG,见谅,将在以后抽时间改动 代码地址 PS:请点个Star^-^ --------------------------------- ...

  3. uploadify上传文件Firefox浏览器上传失败解决方法

    近期做文件上传使用到了uploadify 可是出现了各种奇葩的问题.并且针对各个不同浏览器问题不同 在Firefox中.非常坑爹的是.每次上传就丢失session值,可是我的系统在登录.保存文件文件夹 ...

  4. Xilinx FGPA 上板调试 集成逻辑分析工具 Integrated Logic Analyzer(ILA) 简单配置 chipscope

    Xilinx Vivado 提供了上板后的FPGA逻辑分析,信号视图显示等功能. 需要注意,上板后查看信号需要重新综合,并且需要耗费一定的片上布局布线资源. 1. 添加debug信号 可以对模块端口或 ...

  5. 3星|路骋《用得上的商学院》:100个MBA知识点的简单介绍

    作者在序言中说,放弃了上亿的股票期权去念了两年全脱产的清华-MIT Global MBA.念完后认为课程不错,考虑到这种课本科毕业不能直接念,工作几年后又很难脱产来念,因此办了一个音频课程来讲这个MB ...

  6. 浏览器上的Qt Quick

    你想不想在浏览器上运行你的Qt Quick程序呢?在Qt 5.12之前,唯一的方法是使用Qt WebGL Streaming技术把界面镜像到浏览器上.但该方法有不少缺陷,下文会说.前不久随着Qt 5. ...

  7. 手动绕过百度加固Debug.isDebuggerConnected反调试的方法

    本文博客地址:http://blog.csdn.net/qq1084283172/article/details/78237571 1.调用Debug.isDebuggerConnected函数这种反 ...

  8. 跟踪调试JDK源码时遇到的问题及解决方法

    目录 问题描述 解决思路 在IntelliJ IDEA中调试JDK源码 在eclipse中调试JDK源码 总结 问题描述 最近在研究MyBatis的缓存机制,需要回顾一下HashMap的实现原理.于是 ...

  9. VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

随机推荐

  1. 3 MySQL SQL基础

    目录 1. SQL概述2. 数据库操作3. 表操作4. 记录操作 1. SQL概述 SQL,结构化查询语言(Structured Query Language),一种数据库查询和程序设计语言,用于存取 ...

  2. iOS LBS相关: 定位和中国特色的位置偏移纠正

    LBS模块,首先当然是定位,获取自己所在的位置.主要用到的就是CLLocationManager,实例一个,然后调用startUpdatingLocation即可.其中可以指定精度CLLocation ...

  3. JS树型菜单

    本树型菜单主要实现功能有:基本的树型菜单,可勾选进行多选项操作. 本树型菜单适合最初级的学者学习,涉及内容不难,下面看代码. 首先看View的代码,第一个<div>用来定义树显示的位置和i ...

  4. SSH整合创建SessionFactory

    在spring中的 applicationContext.xml中配置如下信息 <!-- 配置数据连接类 --> <bean id="dataSource" cl ...

  5. 目标HttpController在ASP.NET Web API中是如何被激活的:目标HttpController的创建

    目标HttpController在ASP.NET Web API中是如何被激活的:目标HttpController的创建 通过上面的介绍我们知道利用HttpControllerSelector可以根据 ...

  6. nginx-push-stream模块源码学习(三)——发布

    一.概述     发布:发布者将MSG post到某一特定通道上,channel将信息缓存 在说明发布流程之前有必要说明下channel和msg的数据结构. 二.数据结构 2.1 MSG     发布 ...

  7. iOS 开发问题集锦(一)

    最近在QQ群里好多人问一些比较基础的问题,在这罗列一下: 1.键盘上的斜杠键坏掉了,怎么样用快捷键进行注释呢? 首先在Xcode中注释的默认快捷键为:command+/: 其次可以自行修改快捷键:Xc ...

  8. 拦截所有AJAX调用,重点处理服务器异常

    拦截所有AJAX调用,重点处理服务器异常 背景 上篇文章http://www.cnblogs.com/happyframework/p/3241063.html介绍了如何以AOP的形式处理服务器异常, ...

  9. Web前端Require.js

    前言 前段时间粗略的扫过一次require.js,当时没怎么在意,结果昨天看到index里面的代码就傻了,完全不知道从哪开始看啦,所以require与backbone的学习还要加紧才行. 由于前端所占 ...

  10. php 数组合并方法

    $new = array(); if ($relateddepartmentsnew) { foreach ($relateddepartmentsnew as $relatK=>$relatV ...