上海戴文 - Drupal开发 在线教育

你在这里

学习在Drupal8中调试Twig

主标签

原文地址: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) }}

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

dump_breadcrumb.png

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

{{ dump(_context|keys) }}

然后得到下图所示:

dump_content_keys.png

我知道你在想什么,你在想:纳尼,你特么在逗我吗?这种显示怎么看?

好了,让我们来改进一下

两种方法来提高自己的UX

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

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

更清晰的查看源码

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

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

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

 

inspect_source_0.png

使用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() }}

this_is_kint.png

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

kint_expanded.png

提示没有找到函数?

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

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

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

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

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

{{ kint(page) }}

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

kint_page.png

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

{{ kint(page.content) }}

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

{%  set pagecontent = page.content %}

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

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

{{ kint(pagecontent) }}

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

{{ kint(pagecontent.bartik_content) }}

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

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

{{ kint(page.#show_messages) }}

error_unexpected_char.png

 

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

 

那不是问题!

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

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

成功了!

现在它正常工作了!

this_is_kint.png

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

感谢Cottser贡献了Kint!

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

ios_zhiqiang.jpg

tags: 
Drupal 版本: 

猜你喜欢