How to debug and view the complete structure and value of variables in the template?

When developing website templates in AnQi CMS, we often need to understand the specific structure and data contained in a variable on the page in order to accurately call its properties.When dealing with complex business logic or unfamiliar template variables, being able to quickly view the complete structure and value of variables is undoubtedly the key to improving development efficiency.AnQi CMS based on Django template engine syntax features provide us with a simple and powerful variable debugging means.

Core tool:dumpFilter

AnQi CMS template provides a nameddumpThe powerful filter, which can directly output the complete structure, data type, and current value of variables in the template, helping us to clearly grasp the full picture of variables. When you encounter an uncertain variable in a template file, and want to know what fields it contains internally, or what the actual value of a specific field is, dumpThe filter can be used.

It is very simple to use, you just need to add it after the variable you want to view|dumpFor example, if you want to view the core document variable of the current pagearchiveThe details can be temporarily added to the template like this:

{# 临时添加，用于调试，查看 archive 变量的完整结构和值 #}
<pre>{{ archive | dump }}</pre>

Some notes:Here we usually use<pre>tags to wrap{{ ... | dump }}because the output isdumpThe filter will return a formatted text using<pre>Tags can preserve the original newlines and spaces for clearer and more readable output.

After you save the template file and refresh the page, you will see detailed output similar to the Go language struct, which includesarchiveThe names of all fields, their data types, and their current values. For example:

&models.Archive{Id:101, Title:"安企CMS模板调试指南", SeoTitle:"", Link:"/article/101.html", Keywords:"模板调试,变量查看", Description:"本文将详细介绍如何在安企CMS模板中调试查看变量的完整结构和值。", Content:"...", ModuleId:1, CategoryId:5, CanonicalUrl:"", UserId:1, ParentId:0, Price:0.00, Stock:1, ReadLevel:0, OriginUrl:"", Views:120, Flag:"h", CreatedTime:1678886400, UpdatedTime:1678886400, Status:1, Sort:10, Tags:[], Category:models.Category{Id:5, Title:"开发教程", ...}}

Through this output, you can clearly seearchiveA variable is amodels.ArchiveThe structure of the type, and understand itsId/Title/Link/Viewsand its associatedCategoryand all properties and their corresponding values.

a more precise view:stringformatthe filter meets%#v

AlthoughdumpThe filter is very useful, but in some cases, you may need to be closer to the original output of the backend Go language struct definition, or want to control the output format more accurately. At this point,stringformatFilter combined with Go language formatting verbs%#vIt would be another good choice.

%#vThe formatting verb can output the Go syntax representation of values in Go language, which includes type names and field names, and can provide a clearer structure view for developers familiar with Go.

You can use it like this:

{# 临时添加，用于调试，查看 item 变量的 Go 语言语法表示 #}
<pre>{{ item | stringformat:"%#v" }}</pre>

for example in aarchiveListofforloop, you want to view eachitemvariable's detailed structure:

{% archiveList archives with type="list" limit="3" %}
    {% for item in archives %}
        <h3>{{ item.Title }}</h3>
        {# 查看当前循环中的 item 变量的 Go 语法表示 #}
        <pre>{{ item | stringformat:"%#v" }}</pre>
    {% endfor %}
{% endarchiveList %}

After refreshing the page, you will see eachitemVariables are output in the form of Go struct code snippets, which is very helpful for understanding the backend data model and variable types.

Debugging practice: Step-by-step variable inspection.

Mastereddumpandstringformat:"%#v"After these two tools, the actual debugging process will become very intuitive:

1. Determine the target variable:First, make it clear which variable you want to view. It may be a page-level variable (such asarchive/category），may also be an element in a loop (such asfor item in archivesofitem)，or a nested property of a variable (such asitem.Category)
2. Insert debugging code:In the template file (usually intemplateUnder the directory.htmlIn the file, find the location of the variable you wish to view and temporarily insert{{ 你的变量 | dump }}or{{ 你的变量 | stringformat:"%#v" }}. If you are debugging in a loop, make sure to place the code inside the loop to view the specific values of each element.
3. Save and refresh the page:Save the modified template file and then refresh the corresponding page in the browser.
4. Analysis output:Check the structure and value of the output variables on the page. Based on the output, you can confirm the existence of the variables, the fields they contain, the data types of the fields, and their current values.
5. Adjust as needed:Adjust your template code based on the analysis results, correctly call the properties of the variables.
6. Remove debug code: An extremely important step!After debugging is complete, be sure to delete all debugging code from the template.Debug code should not be retained in the final production environment, as it may expose sensitive information, affect page performance, or even lead to security issues.

If you edit the template directly in the background, this process will be more convenient, and the modification and viewing effects will be almost instantaneously synchronized.

Points to note

• Temporary Operations:Temporary debug code, please remember to delete or comment it out immediately after debugging.
• Page layout affects: Inserting debug output into the template may temporarily disrupt the original layout and style of the page, which is normal during the debugging process.
• Sensitive information: dumpandstringformatThe entire content of the variable will be output, if the variable contains sensitive information such as user passwords, database connection strings, etc., please debug in a secure environment and ensure that the debugging code will not leak to the outside.

By flexible applicationdumpandstringformatFilter, debugging work for AnQi CMS templates will become more efficient and transparent than ever before.No matter how complex the data structure you face, these two tools can help you quickly locate the problem and build a stable and functional website.

###