原文地址：http://drupalize.me/blog/201405/lets-debug-twig-drupal-8  

翻译：Drupal猎人

当我在制作一个drupal模板的时候，我需要知道在模板文件中有哪些可以使用的变量，在drupal8中，采用了Twig模板引擎，所以我们首先需要知道一些关于Twig的知识才能开始制作模板，所以，可能你是第一次接触Twig，但不用担心，今天你将与我一起学习Twig的一些知识!

开启Twig调试

更新和重要注意事项！下面说明只在Drupal 8的alpha版本中工作。在最新的开发版本中，twig_debug设置将不再在

settings.php中。它将在sites/example.settings.local.php,并且建议把该文件复制到sites/default。 （查看变更记录）。

我们需要做的第一件事就是开启Twig调试，打开sites/default/settings.php文件，搜索"Twig",找到下面的代码：

/**
 * Twig debugging:
 *
 * When debugging is enabled:
 * - The markup of each Twig template is surrounded by HTML comments that
 *   contain theming information, such as template file name suggestions.
 * - Note that this debugging markup will cause automated tests that directly
 *   check rendered HTML to fail. When running automated tests, 'twig_debug'
 *   should be set to FALSE.
 * - The dump() function can be used in Twig templates to output information
 *   about template variables.
 * - Twig templates are automatically recompiled whenever the source code
 *   changes (see twig_auto_reload below).
 *
 * Note: changes to this setting will only take effect once the cache is
 * cleared.
 *
 * For more information about debugging Twig templates, see
 * <a href="http://drupal.org/node/1906392">http://drupal.org/node/1906392</a>.
 *
 * Not recommended in production environments (Default: FALSE).
 */
# $settings['twig_debug'] = TRUE;

去掉该行的注释，就像这样：

# $settings['twig_debug'] = TRUE;

变成

$settings['twig_debug'] = TRUE;

*提示：移除#号，#号在Twig模板中的作用就是注释掉单行代码

查看IDE中Twig模板设计支持的元素列表

清空缓存

现在我们需要清空缓存，在我的Drupal 8 网站里，导航是Configuration > Performance，然后点击Clear all caches(清空所有缓存)按钮

Hack核心代码 (真正的)

在这篇文章中，我只想专注于教会大家本地测试环境中调试Twig，而不是正规的从零开发一个新的主题，所以为了方便演示，我会直接Hack核心（正常情况下，不要这样做）。

Hack核心的意思是，我们直接进入core/themes/bartik/templates文件夹，在IDE编辑器中打开page.html.twig（或其他任何文本编辑器也可）查看Twig模板设计文档，在打开core/templates/Bartik/templates/page.html.twig文件后，我们想要在模板中放入我们的调试代码，但是你就会有一个问题，我们不能再像以前在phptemplate模板里一样加上var_dump()函数了...

引入Twig的dump()函数

Twig有个dump()函数，没错，你猜对了，dump()函数会打印出当前模板中所有可用的变量，现在，你可以尝试在page.html.twig模板文件中，加入dump()函数，然后刷新网页，

你也许会看到白屏或者死机，因为实际上这是由于打印的变量十分庞大，以至于消耗了过多的内存，所以你才会看到白屏或者死机。

现在，我们来打印一个小一点的变量，比如breadcrumb变量，我们只需要在page.html.twig文件里输入：

{{ dump(breadcrumb) }}

然后刷新网页,我们就会得到如下图所示：

但这是在你知道有breadcrumb这个键值存在的情况下，你才能这样写，也许你还想知道还有其他的哪些键值可用，你就可以这样做：

{{ dump(_context|keys) }}

然后得到下图所示：

我知道你在想什么，你在想：纳尼，你特么在逗我吗？这种显示怎么看？

好了，让我们来改进一下

两种方法来提高自己的UX

上面的两种调试代码输出的数据看起来包含了一些很重要的信息，里面很可能包含了我们想要的一些数据变量，但是现在它看起来实在难以阅读。

是否存在一种方法，可以让我们的开发过程更容易？简单说，是肯定有办法的，一种办法是利用浏览器的开发者工具，或者使用一些流行的第三方模块，比如：Devel

更清晰的查看源码

我们在使Twig的dump()调试代码时，浏览器默认输出的格式看起来是很杂乱的，但是我们可以通过在Chrome或者Firefox网页上单击鼠标右键菜单的"查看元素"菜单

然后，你就会发现各种有用的注释和格式清晰的可用数据变量，你甚至可以在注释里找到网页每个区域所对应的模板建议（一行一个），想一想，这是多么方便，你可以如此

容易的就知道，哪一块区域的代码可以用哪个模板命名规则所覆写（在Drupal7里，你还要使用Theme developer模块才能做到差不多的效果）。

 

使用Devel和Kint模块

通过浏览器来查看源代码的方式，在一定程度上提高了我们的开发和调试Twig模板的体验，但我们还有另一种选择，就是使用Drupal官网的第三方贡献模块Devel and Devel Kint模块

我查看了Devel模块的问题列表，有很好用的比如基于krumo的dpm()，可以查看有用的变量和数组，我也搜索了和Twig相关的Devel 8.x分支的问题列表，我很高兴的发现，截至到上周，

在Twig中，有一个很美观的，并且更实用的调试变量的方法

具体方法如下： 

1. 下载Devel模块的Drupal 8版本，并解压保存到Drupal 8根目录下的modules文件夹(是的，不用放进sites/all/modules了)

2. 在Drupal 8的顶部菜单条里单击Manage(管理)，以显示管理子菜单，然后单击"Extend(扩展)"

3. 搜索Devel (可选，但是很有用)

4. 启用Devel 和 Devel Kint模块

5. 点击Save configuration(保存配置)按钮

"Kint" 是一个调试工具，它正在逐渐取代Krumo. 它能够让你容易的隐藏和显示数据的每一层，这是非常有用的，在你加截庞大的数组变量时。

使用Kint()检查数组和变量

这些模块启用后，你可以把Kint()放进page.html.twig模板文件里，我们没有得到WSOD（白屏或者死机），相反，我们会在这个页面上看到一个

层级分明的数组变量遍历的小工具，在你启用Devel 和 Kint 模块后，你就可以把原来的dump()语句用以下代码替换掉：

{{ kint() }}

现在，如果我点击 [+] 号，我就可以展开所以里面的嵌套数组变量，是不是很方便？

提示没有找到函数？

如果当你使用kint()时得到一个错误，那么你必须首先确保你安装并启用了Devel and Devel Kint 模块，然后这个函数才是可调用的，否则，

你仍然需要继续使用dump()函数，并且你可以像这个评论里说的方法一样写，让你的代码输出更具可读性。

在Twig中怎样使用Kint调试变量

我们现在已经安装启用了Devel 和 Kint 模块，所以让我们来看看如何使这个工具真正为我们工作。

当你使kint()检查输出了所有变量时，你可能想要缩小你的检查范围，只查看其中某一个变量，我们可以这样做：

{{ kint(page) }}

用它来输出page页面级别的变量。

如果你想输出另一个层级的数组变量，就像以往的输出 $page['content']一样，你可以这样做：

{{ kint(page.content) }}

如果这不是你想要的变量，你想要往变量里添加或修改一些变量，你可以这样做：

{%  set pagecontent = page.content %}

(你可能会注意到，这里我们没有使用双大括号，实际上，我们这里用到了Twig的另一种语法)

然后我们可以使用kint()来调试我们的新变量，像这样：

{{ kint(pagecontent) }}

或者是pagecontent变量里的一个数组

{{ kint(pagecontent.bartik_content) }}

疑难杂症！处理数组键里带特殊字符的情况

但是，如果数组里的键带有"#"我们怎么处理呢？你可以尝试这样：

{{ kint(page.#show_messages) }}

  看到了么？实际上，井号（#）和连字符（-）都是特殊字符，如果你的变量或数组的键名带有这些特殊字符，就会抛出一个异常，就像上图显示的一样，你会得到一个网站错误提示。  

那不是问题！

实际上，这并不是一个很严重的问题，你只需要稍微修改下你的语法即可，像这样：

{{ kint(page['#show_messages']) }}

成功了！

现在它正常工作了！

感谢这些伟大的工具（Devel, Kint, 还有浏览器的右键查看元素）让我们现在可以在Twig模板文件中容易的检查调试我们的变量或者数组。https://drupal.org/node/2218949

感谢Cottser贡献了Kint！

感谢中国Drupal猎人的辛苦翻译~~ 联系QQ：498023235