2018-04-16 18:46
使用Craft CMS 3的调试工具栏分析您的网站
Craft CMS 3 有一些很大的变化,其中之一是增加了
调试工具栏,可帮助您分析和调试您的网站
随着Craft CMS 3于2018年4月4日正式发布,我们已经开始深入了解并熟悉Craft CMS 3的新功能。
该 工艺3 测试版执行摘要,并 设立一个新的工艺CMS 3 项目文章从格式塔视角覆盖这一点。在本文中,我们将深入研究一个特定主题:全新的调试工具栏。
在Craft 2 .x中,我们习惯于通过Web控制台查看 我们网站上的调试和性能信息。在Craft 3中,通过将其全部整合到调试工具栏中,该功能得到了极大的改善。
使用调试工具栏,您现在可以在一个地方查找调试和性能信息。
调试工具栏实际上来自Yii 2,由Pixel & Tonic人员在顶部添加了一些额外的魔法。最重要的是,它比旧的Craft 2 .x将信息转储到Web控制台的方法更具可搜索性,可排序性和更多用处。
这是它的样子:
Yii 2 / Craft CMS 3 调试工具栏
链接启用调试工具栏
那么,我们如何让这个美妙的小兽出现在我们身上呢?首先,调试工具栏只有devMode在打开时才会出现。这是完全合理的,我们只想在开发或调试网站时使用它。
接下来,您需要特别启用调试工具栏。这是在每个用户的基础上完成的,因此我们需要转到AdminCP中的我的帐户页面:
在我的帐户页面启用调试工具栏
一旦你上我的帐户页面,点击上首选项卡,然后检查显示调试工具栏上的前端和/或显示在控制面板上的调试工具栏的复选框,取决于您希望工具栏出现。
而已!您现在应该已经准备好了新的调试工具栏并等待帮助您。
由于显示调试工具栏(或不)的首选项与您的帐户绑定,因此您显然必须登录。所以如果它神秘地没有显示给你,请确保你仍然登录!
那么调试工具栏可以为您做什么?请继续阅读,我们将介绍它可以为您做的一些有用的事情!
链接分析数据库查询
现在我们已经启动并运行了调试工具栏,让我们将其用于一个非常常见的用例:分析数据库查询。
我们希望我们的网站具有高性能,正如“漂亮网站不够用”一 文中所讨论的那样 ; 一个好的开始是减少我们正在做的数据库查询的数量。
单击 调试工具栏的 数据库部分将弹出“数据库查询”面板:
调试工具栏数据库查询
在这里,我们可以查看加载网页时发生的所有数据库查询。尽管我们希望尽可能多地利用诸如缓存和热切加载等技术来减少查询次数,但我们希望将重点放在花费时间最多的查询上。
这不仅仅是查询的数量,而是关于这些查询的性能如何。
调试工具栏的好处在于,我们可以按持续时间对查询进行排序,以查找我们应该关注的非高性能查询。
这肯定比每个查询一个接一个地分页:我们可以专注于重要的查询。
专业提示:一直滚动到页面底部,然后单击“全部解释”链接,您将看到每个查询的人类可读摘要:
调试工具栏全部解释
通过日志链接筛选
如果您已经完成了任何数量的Craft CMS 2 .x开发,那么您至少花了一些时间仔细阅读craft.log并找出问题所在。值得庆幸的是,调试工具栏使这更容易!
点击 调试工具栏的 日志部分,弹出日志消息面板:
调试工具栏日志消息级别
现在,Craft CMS 3中的所有日志都会记录到一个主日志文件中web.log,而调试工具栏允许您全部过滤。一切工艺日志,以及所有插件日志都在调试工具栏中的一个地方。
您可以选择要查看的日志消息类型,从最轻到最严重:
通过限制显示的日志消息类型,您可以更轻松地找到重要问题。在调试工具栏本身,信息 =灰色,警告 =橙色,错误 =红色。
您也可以进一步筛选通过邮件类别由在它下面的文本框中输入:
调试工具栏日志消息过滤
这可以让您快速搜索Craft能够快速找到所需内容的丰富日志。
比通过文本编辑器中的单片日志文件进行分页要好得多。
专业提示:如果您单击调试工具栏最左侧的C图标,它将全屏显示,以便您可以看到更多信息。
链接总体性能分析
调试工具栏还有一些非常了不起的性能分析工具,可以让您在加载网页时看到究竟发生了什么。
单击 调试工具栏的 时间部分将打开性能分析面板:
调试工具栏性能分析
在这里,您可以看到页面加载的总时间,以及页面加载时的峰值内存使用情况。
您还可以看到性能时序更细粒度地分解,并且可以通过排序时间或过滤器通过类别,就像你可以在调试工具栏上的其他部分。
右侧的Info列中显示的数据将缩进以显示其嵌套级别。
点击左侧的时间轴会显示您的网页加载方式:
调试工具栏时间轴
这给你一个非常好的可视化你的页面如何加载; 你可以过滤时间由10ms左右,才能看到只需要很长时间显著量的东西。
链接树枝模板性能分析
所有这些性能分析都非常棒,但它只是向我们展示了Craft或插件可能正在记录的分析信息。如果我们想要剖析我们自己的Twig模板会怎么样?请继续阅读!
通常我们可能想要剖析我们的Twig模板的特定部分。为了实现这一点,我创建了一个 名为Twig Profiler的免费Craft CMS 3插件,它允许您打包想要分析的代码块:
{% profile "woof" %}
{# code goes here #}
{% endprofile %}
枝条分析器代码
只需安装嫩枝探查通过插件插件商店在工艺CMS 3 AdminCP,并远离你去!
您传入的参数(woof在上面的示例中)应该对每个概要文件块都是唯一的,因此您可以在查看概要分析数据时对其进行标识。
重新加载您的页面,然后单击调试工具栏的时间部分,您将看到您的配置文件数据:
小枝分析器性能分析
该 类别 总会有 枝杈探查 列入其中,这样你就可以对过滤器来快速找到您的分析数据。Twig Profiler还会附加当前渲染模板的名称,以为您提供一些额外的上下文。
点击左侧的时间轴部分将显示配置文件数据的视觉时间表:
枝条分析器时间轴
你可以拥有尽可能多的{% profile %}块标签页,并且可以围绕你喜欢的任何Twig代码(include,block以及其他)。您也可以{% profile %}尽可能多地嵌套块标签。
配置文件数据仅在devMode打开时收集。如果devMode关闭,{% profile %}块标签不起作用,因此您可以放心地将它们留在生产代码中。
一个好方法是在模板{% profile %}中的所有{% block %}标签中包含标签 layout,以便您自动分析模板。
您可以{% profile %}根据需要在模板中添加更多细粒度标签。
您希望在出现性能问题之前收集分析数据,而不是之后。
由于标签在devMode关闭时不会做任何事情,因此将它们放在那里并没有什么坏处。然后,如果您确实遇到性能问题,您可以轻松掌握必要的性能分析数据。
在引擎盖下,它使用了Craft / Yii 2用来记录分析数据的完全相同的方法。
链接插件开发人员
如果你是一名插件开发人员,通过包装重要的代码块来帮助你(和你的用户!)一个忙:
Craft::beginProfile('someUniqueIdentifier', __METHOD__);
// Insert code here
Craft::endProfile('someUniqueIdentifier', __METHOD__);
将配置文件添加到PHP代码
这使您可以评估插件对页面加载性能的影响。它很简单,容易做到,devMode关闭时什么也不做,所以你可以放下它。
这是Craft / Yii 2和Twig Profiler用来记录分析数据的确切方法。
退房的性能分析的Yii的第2文档的详细信息。
链接结束语
调试工具栏可以帮助您理解您的网页如何加载; 它甚至比这里描述的还要多。
希望这篇介绍给你足够的启发和运行。
开心剖析!