Debugging the report template¶
If you are modifying or creating a report template, it is possible that it will not render as expected at first. You will need to debug the template to locate and then correct the issue.
PDF generation debug¶
If the report is blank and/or it is taking a very long time (limited to 3 minutes), the conversion from HTML to PDF had some troubles. You can see the log of the generation with the button in the toolbar of the Report tab.
PDF generation temporary folder¶
All the files needed to render the final report (PDF file) are put inside a temporary folder. It is even possible to display and debug the HTML file used for creating the report. Click on button to open the folder.
Report temporary files structure¶
The exact files will depend of the report template, but the basic structure will remain:
index.pdf: the final report file
index.html: the main HTML file, which you should open in a Web browser for debugging
header.html: the header HTML file
footer.html: the footer HTML file
Images: folder with all images (data images like pictures from TLC Visualizer/TLC Visualizer 2, and images specific to the template)
config.js: global code, like Handlebars helpers (template specific helpers are copied there)
main.js: the template specific code (like Flot plots)
datah.js: a lightweight data file with just the needed data for the header and footer
Styles: folder containing the CSS files
main.css: the template specific styles
As visionCATS need to transform SCSS files to CSS, no sub folder is supported in
Web browser’s developer tools¶
Firefox, Chrome and Edge have all a developer tools function, accessible via
All have similar tabs:
Inspector/Elements/DOM explorer will display the rendered HTML code. It is possible to see the CSS style of each element.
Console will list any error.
For reference, please see Firefox Developer Tools, Chrome DevTools or Edge F12 Dev Tools.
The free Notepad++ is recommended for modifying or creating the template.
Notepad++ is particularly useful for reading the data.js file, with the help of the JSTool plugin. To install the plugin:and then select JSTool and install it.
To make the data readable, from the opened data.js, do.
With Notepad++, you can then collapse the different arrays in data to easily find the wanted data.