README

工作进度

Sonde 是一个与框架无关的 PHP 调试工具栏。它将帮助您了解应用程序的运行情况。

它受到 php-debugbar 的启发。这个项目产生的理由是因为 php-debugbar 在前端非常沉重（许多依赖项，包括 jQuery）。Sonde 通过提供非常小的浏览器占用空间来解决此问题：只有原生的 JavaScript 和非常少的样式。

快速入门

使用 composer 安装库

composer require hatcher/sonde

开始使用工具栏

  require 'vendor/autoload.php';

  use Hatcher\Sonde\Sonde;
  use Hatcher\Sonde\Renderer;
  
  
  $sonde = new Hatcher\Sonde\Sonde();
  
  // Start a timer to have the execution time of the full script
  $p1 = $sonde->startProfile('Script');
  
  // Do some stuff
  
  // Start a timer to monitor a long process
  $p2 = $sonde->startProfile('process');
  // ...
  
  if($message){
    // Add a message 
    $sonde->addMessage('Process said: ' . $message);
  }
  
  $p2->stop();
  
  // Start a timer to time the rendering process
  $p3->startProfile('view');
  
  $html = '<html><head></head><body></body></html>';
  
  $p3->stop();
  
  $p1->stop();
  
  // Insert bar in html
  
  $html = Render::renderAllInHtml($html, $sonde);
  
  echo $html;

渲染结果

Sonde 需要三样东西才能正确显示

sonde CSS
sonde JS 库
包含数据的设置脚本

有 2 种方法在页面中渲染结果。

将所有内容注入 HTML 页面

此方法是在前面的示例中，它是最容易开始的，并且不需要任何特定的设置。您只需请求 Sonde 直接在您的 HTML 中注入所有要求，当 HTML 达到浏览器时，工具栏会自动显示。

使用此方法，所有 JavaScript 和所有 CSS 都将内联在 HTML 中。

演示

  use Hatcher\Sonde\Sonde;
  use Hatcher\Sonde\Renderer;

  $sonde = new Sonde();
  
  // Collect data
  
  // Render your html in a variable
  $html = ....;
  
  // Inject sonde data in the html
  $html = Render::renderAllInHtml($html, $sonde);

  echo $html;

将库作为外部资源提供并注入设置脚本

使用此方法，您将 sonde CSS 和 JS 库作为外部资源（和 <script src='...'>）提供，并将设置脚本注入。

为此，您需要从 http 或使用 cdn（待办事项）提供 http://dist 目录的内容

演示

  use Hatcher\Sonde\Sonde;
  use Hatcher\Sonde\Renderer;

  $sonde = new Sonde();
  
  // Collect data
  
  // Render your html in a variable
  $html = ....;
  
  // Inject sonde data in the html
  $html = Render::addExternalCss('path/to/dist/sonde.css', $html);
  $html = Render::addExternalJs('path/to/dist/sonde.js', $html);
  $html = Render::renderSetupInHtml($html, $sonde);

  echo $html;

渲染 AJAX 请求

Sonde 能够对您的 AJAX 请求进行性能分析。它使用 HTTP 头从 PHP 发送数据到浏览器，并且与 HTML 版本一样简单。它仅要求启动 AJAX 请求的页面已经初始化了 sonde 工具栏。

演示

  use Hatcher\Sonde\Sonde;
  use Hatcher\Sonde\Renderer;

  $sonde = new Sonde();
  
  // Collect data
  
  // Get headers to send with request
  $headers = \Hatcher\Sonde\Renderer::renderAsResponseHeaders($sonde);
  
  // Send the headers in the response
  foreach($headers as $n=>$v){
      header("$n: $v");
  }
  
  echo 'some response';

增强 JavaScript

您可以在设置脚本中增强并添加插件到工具栏。为此，您将在设置脚本中注入自己的 JavaScript。下面的示例将展示如何自定义时间轴中元素的颜色

首先编写一个包含注入脚本的 JavaScript 文件

  // foo.js
  
  // bar is a javascript variable that we can modify 
  
  bar.addProfileType('foo', {
    color: "#3D00A8"
  });

然后在 PHP 中将此文件添加到 sonde

  $sonde->addJsPluginFile(__DIR__ . '/foo.js');
  
  // And now when we add a profile named foo it will get the color specified in the javascript above
  $p = $sonde->startProfile('foo');

在自定义 JavaScript 时，您不仅限于颜色。有关功能的全列表，请参阅下一节。

JavaScript 插件

如前所述，您可以向工具栏添加插件。以下是您可以自定义的内容列表

自定义时间轴

  bar.addProfileType('foo',
    {
      // All foo elements will have this color in the timeline
      color: "#3D00A8", 
      
      // The output of this function will be added after the element title in the timeline. It helps
      // To have a short details about the element at a glance 
      synopsis: function(profile){
         if (profile.data) {
            return profile.data.ok ? 'OK' : '<span style="color: red;">FAIL</span>';;
         }
         return '';
      }
    }
  );

感谢

感谢 php-debugbar，它为应用程序的 PHP 部分中的许多内容提供了灵感。

许可证

公平许可证

待办事项

更多插件（twig...）
在时间轴中提供更好的数据预览（数组，int=0...）
数据库面板插件
PDO 报告文档
处理重定向堆叠
从 PHP 配置颜色和名称
提供更多消息类型（错误、警告、成功、信息）

hatcher / sonde

维护者

详细信息