欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

使用 Clockwork 扩展在 Chrome 浏览器中显示 Laravel 应用调试信息

使用 Clockwork 扩展在 Chrome 浏览器中显示 Laravel 应用调试信息

之前我们已经介绍了一款在Laravel中很流行的调试工具Debugbar,今天我们来介绍另外一款 —— Clockwork

Clockwork是一个用于PHP开发调试的Chrome扩展工具,该扩展工具在chrome浏览器的开发者工具中新增了一个名为Clockwork的面板,用于显示所有对调试和分析PHP代码有用的信息,这些信息包括请求、头、get/post数据、cookies、Session、数据库查询、路由、运行时间、日志等等。

安装该扩展很简单,只需在Chrome网上应用店搜索Clockwork并安装即可。安装完成,在页面F12即可看到开发者工具新增Clockwork面板:

Chrome浏览器Clockwork扩展

这里的Clockwork只是个客户端工具,俗话说一个巴掌拍不响,如果要完成相关数据显示,还需要在服务器端实现相应代码。

首先,我们需要使用Composer安装Clockwork依赖包:

composer require itsgoingd/clockwork ~1.11.1

需要说明的是,该依赖包独立于Laravel,支持Laravel、Lumen、Slim 2以及CodeIgniter 2.1等框架。这里我们仅演示如何在Laravel中的用法,更多使用示例请参考其Github项目:https://github.com/itsgoingd/clockwork

和其他扩展包一样,首先我们需要在config/app.php中注册服务提供者和门面:

'providers' => array(
    ...
    Clockwork\Support\Laravel\ClockworkServiceProvider::class
)

'aliases' => array(
    ...
    Clockwork' => 'Clockwork\Support\Laravel\Facade::class,
)

然后我们还需要在app/Http/Kernel.php中注册Clockwork中间件:

protected $middleware = [
    Clockwork\Support\Laravel\ClockworkMiddleware::class,
    ...
]

出了从容器中获取实例以及使用门面之外,Clockwork扩展还为我们提供了辅助函数clock()用于添加记录到Clockwork日志以及添加事件到Timeline,下面我们就以clock()为例演示Clockwork的使用:

Route::get('test', function () {
    clock()->startEvent('event_name', 'LaravelAcademy.org'); //事件名称,显示在Timeline中

    clock('Message text.'); //在Clockwork的log中显示'Message text.'
    logger('Message text.'); //也Clockwork的log中显示'Message text.'

    clock(array('hello' => 'world')); //以json方式在log中显示数组
    //如果对象实现了__toString()方法则在log中显示对应字符串,
    //如果对象实现了toArray方法则显示对应json格式数据,
    //如果都没有则将对象转化为数组并显示对应json格式数据
    clock(new Object());

    clock()->endEvent('event_name');
});

在浏览器中显示如下:

在Chrome浏览器使用Clockwork显示Laravel应用调试信息

在Chrome浏览器使用Clockwork显示Laravel应用调试信息

学院君 has written 676 articles

资深PHP工程师,Laravel学院院长

 
 

5 thoughts on “使用 Clockwork 扩展在 Chrome 浏览器中显示 Laravel 应用调试信息

使用 Clockwork 来调试 Laravel App

 教程 ⋅ Summer ⋅ 于 3年前 ⋅ 最后回复由 大鼻涕过河 于 3年前 ⋅ 7636 阅读
 

说明#

开发过 Rails 程序的朋友应该熟悉 RailsPanel , 是的 Clockwork 是 RailsPanel 的 PHP 版本.

Clockwork 由两个部分组成:

安装#

首先安装 Chrome 插件 Clockwork , 然后照着 Github 项目 的 readme 安装服务器端的.

Chrome 插件端#

上图, 你们就懂了

这样就能看清楚 App 里面的工作情况了.

How does it work?#

详情请见 这里.

简单点解释呢, 如下:

Server side#

服务器端收集数据, 并把数据整理为 json 格式输出, 每一次的请求都是有一个独立的 id, 通过 HTTP header 传输给 Chrome 插件, 如下面这两个是这一次返回的 header :

X-Clockwork-Id:1408631499.2148.1282148919
X-Clockwork-Version:1.5

Chrome 插件#

Chrome 插件端, 通过上面传输过来的 X-Clockwork-Id header, 按照以下规则, 拼接 URL

/__clockwork/{id}

在此例子中, 得出

http://localhost:8000/__clockwork/1408631499.2148.1282148919

访问以上 URL 可以获取到 服务器端产生的 json 文件, 内容见这个 Gits.

Chrome 插件端拿到 json 数据以后, 就开始解析, 渲染到 console 里面啦.

解释完了, 这个工具真的很帅.

--EOF--


欢迎关注 LaravelTips, 这是一个专注于为 Laravel 开发者服务, 致力于帮助开发者更好的掌握 Laravel 框架, 提升开发效率的微信公众号.


我们正在招聘 全职伙伴 和 Remote 工程师,欢迎加入 :bowtie:


入门书籍推荐 —— :books: 《Laravel 入门教程》

 本帖已被设为精华帖!
 
回复数量: 10
  • lifesign Learn From Life
     ⋅ 3年前

    这个没太试过 还有一个 laravel-debugbar 稍微火点。。

  • Summer MOD A Life-long learner.
     ⋅ 3年前

    嗯, Clockwork 最大的优点是利用 Chrome 的 Console, 不会对原有请求的输入造成干扰, 并且利用 Chrome Console 的特性, 允许保存多次请求的数据, 方便比较.

  • Summer MOD A Life-long learner.
     ⋅ 3年前

    但是, 对于 Chrome 的依赖, 也同时也是他最大的缺点 :smiling_imp:

  • lifesign Learn From Life
     ⋅ 3年前

    嗯 好多都是服务端和客户端一起的 比如chromephp,firephp,laravel-debugbar都是。

  • weelion
    weelion 野生人类一名
     ⋅ 3年前

    这个确实不错:thumbsup:

  • monkey 最重要的事,永远只有一件
     ⋅ 3年前

    我尝试使用了这个插件,简直好用的让我发疯,尤其用来实时调整、查看线上的网站问题。

  • Summer MOD A Life-long learner.
     ⋅ 3年前

    @zhengjinghua 偶尔紧急处理可以派上用场, 但是要小心呀, 暴露了太多数据.

  • JobsLong 那么,下一步的行动是什么?
     ⋅ 3年前

    尝试用一下

  • caoglish
    caoglish
     ⋅ 3年前

    @Summer 其实可以把代码封装一下,用加上 debug 标记,如果需要 debug, 就true,不需要,就 false,在 Laravel 下可以直接使用 Config::get("app.debug") 设置进行控制

  • 大鼻涕过河
    大鼻涕过河
     ⋅ 3年前

    这玩意每次请求都会生成文件保存在硬盘上.太不爽了

来自  https://laravel-china.org/topics/23/use-clockwork-to-debug-laravel-app
普通分类: