How to debug the structure, type, and value of display variables in a template to help troubleshoot display issues?

During the template development process of Anqi CMS, we sometimes encounter situations where variables do not display as expected or the displayed content is incorrect.This may affect the normal functioning of the website, and may also cause deviations in content display, reducing the user experience.In the face of such problems, we need an efficient and intuitive tool to help us quickly locate the root cause.

Anqi CMS provides a very practical built-in filter——dumpIt can help us clearly view the structure, type, and current value of any variable in the template. Mastering this debugging tool can greatly improve the efficiency of template development and error correction.

Understand the root cause of the variable display problem

The template variable is not displayed correctly, which may be due to a spelling error in the variable name, data not passed, data structure not matching, or even incompatible data types. For example, you may expect to get a string of an article title, but actually a complex object containing all the information of the article is passed; or in some loop, ...itemAn object, you don't know what specific fields it has, which leads to failure. In this case, blind guessing and modification often ends up being twice the effort for half the result.

IntroductiondumpFilter:透视眼 for template debugging

dumpThe filter is designed to solve these puzzles. Its function is very direct: to specify the variable'sstructure, type, and current valuePrint it out in its original form. This allows the real state of the variable to be clearly seen within the template, helping us quickly determine where the problem lies.

How to usedumpFilter?

UsedumpThe filter is very simple, just add it after the variable you need to view in the template|dump.

{# 查看单个变量的值和结构 #}
<pre>{{ myVariable|dump }}</pre>

{# 在循环中查看每个item的详细信息 #}
{% for item in archives %}
    <h3>{{ item.Title }}</h3>
    <pre>{{ item|dump }}</pre> {# 这里会打印出每个档案项的详细结构 #}
{% endfor %}

{# 查看某个复杂对象（如分类）的全部信息 #}
{% categoryDetail myCategory with id="1" %}
    <pre>{{ myCategory|dump }}</pre>
{% endcategoryDetail %}

Please note, in order to display betterdumpThe content output (usually multiline text and special characters), it is recommended to wrap it in<pre>tags to preserve the format and make it more readable.

Interpretdumpoutput

When you use{{ variable|dump }}After, you might see an output like this on the page:

&config.BannerItem{Logo:"https://en.anqicms.com/uploads/202309/14/eba5aa9dc4c45d18.webp", Id:1, Link:"", Alt:"Hello", Description:"", Type:"default"}

This output directly shows:

• The type and structure of variables: For example&config.BannerItemTells us that this is aBannerItemAn object of type. This means it is a struct, not a simple string or number.&The symbol indicates that this is a pointer to the struct.
• Internal fields and values of the variable:{Logo:"...", Id:1, Link:""...}It clearly lists all the fields included in the object (such asLogo,Id,Link,Alt,Description,Type) and their corresponding current values.

With this information, we can quickly identify:

1. Does the variable exist?IfdumpOutput isnilor empty, indicating that the variable has no value in the current context or does not exist at all.
2. Is the variable type correct?For example, if you expect to get a string, butdumpHowever, if it shows a structure, then you may need to adjust your calling method.
3. Does the internal structure of the variable meet expectations?When dealing with complex objects,dumpIt can help us confirm whether the object has the fields we need and whether the field names are consistent with those called in the template (note the case).
4. Is the value of the variable correct?Directly seeing the actual value can help determine whether it is a data source problem, logical error, or format conversion issue.

dumpThe actual application scenarios of the filter

• The variable is empty or not displayed:If there is some content that should be displayed on the page but is blank, and you are not sure whether it is because the variable itself has no value or the calling method is incorrect, then you can directly{{ targetVariable|dump }}. If the output showsnilOr an empty string/array, then the problem may be in the data source or backend logic; if content is displayed but the page is not rendered, it may be due to template syntax or frontend code issues.
• The field name of the uncertain object:During processingarchiveListorcategoryListWhen returning the looped object, you may not be clearitemSpecific fields it contains. At this point, in the loop{{ item|dump }}using , you can list it clearlyId/Title/Link/DescriptionAll available field names should be used to avoid debugging difficulties due to spelling errors or conjecture of field names.
• Verify the template tag parameters:When you use such tags asarchiveDetailorcategoryDetailand others, and pass throughwith name="..." id="..."After passing parameters in this way, if you want to confirm whether the obtained result is as expected, you can also check the returned variabledump.

Debugging **Practice

1. Used temporarily, remove promptly: dumpThe filter is mainly used for development and debugging stages. Be sure to remove all debugging information before the website goes live.{{ ...|dump }}Code is removed from the template. This information may leak the internal data structure of the website, have a slight impact on performance, and may be indexed by search engines, affecting SEO.
2. Combine conditional judgment:In some cases, you may only want to view variable information under specific conditions. You can combineifTag usage, for example:

   
   {% if DEBUG_MODE %} {# 假设你定义了一个调试模式变量 #}
       <pre>{{ myVariable|dump }}</pre>
   {% endif %}
   

3. Pay attention to case sensitivity:The CMS template variables are usually case-sensitive, for exampleitem.Titleanditem.titlethey are different.dumpThe output will accurately display the actual case of the field, helping you find such problems.

MasterdumpA filter, as if we have a pair of x-ray eyes in template development, which can help us quickly and accurately locate and solve variable display issues, thereby building and maintaining our Anqi CMS website more efficiently.

Frequently Asked Questions (FAQ)

1.dumpCan the filter be used in a production environment (a website that has already gone live)?

Answer:Strongly not recommended.dumpThe filter directly exposes the internal structure and value of the variable on the front-end page, which may leak sensitive information and pose certain security risks.At the same time, printing this information with each page request will also have a slight impact on server performance.It is a tool designed specifically for development debugging and must be removed before the website goes live.

2. BesidesdumpAre there any other ways to view variables?

Answer:Of course. You can use{% if 变量名 %}Check if a variable exists or is empty. If the variable type is known, you can also try to output specific fields directly, for example{{ item.Title }}. However,dumpThe filter provides the most comprehensive information, including the complete type, internal structure, and all field values of the variables. It is the most direct and effective tool when the state of the variable is uncertain.

3. Why do Idumpdisplay after a variable, isnilor an empty array/string, instead of the data I expected?

Answer:This usually means that the variable has not been assigned or its value is empty in the current template rendering context. Possible reasons include:

• Data was not passed correctly from the backendCheck your controller or data retrieval logic to ensure that the data is queried correctly and passed to the template.
• Template tag parameter errorIf you are usingarchiveList/categoryDetailUse tags to retrieve data, check if the tag parameters (such ascategoryId/id/typeare set correctly, causing the expected data to not be retrieved."),
• Variable name is spelled incorrectly: Even thoughdumpwas displayednilyou should also confirm three timesdumpDoes the variable name match the one defined in the code, including case sensitivity?
• The data itself does not exist: There may be no corresponding data in the database.