Debug Mode

It's never easy to start from scratch, therefore ReportBro Designer comes with some demos already. However, you also might want to use other report definitions directly or download your current report. That's especially useful when you want to locally store your report, share it with another dev, do some debugging on your local machine, etc.

In this tutorial you will learn to:
Enable debug mode in ReportBro Designer
Log a report definition to the console
Import a report definition into ReportBro Designer

1 Enable debug mode in ReportBro Designer

Let's assume you have followed the steps to install and initialize ReportBro Designer and you are able to view ReportBro Designer in your browser. Set the menuShowDebug option in the javascript initialization:

<script type="text/javascript">
    const rb = new ReportBro(document.getElementById('reportbro'), {
        menuShowDebug: true
    });
</script>

When refreshing your browser ReportBro Designer should display two more buttons in the menu bar.

ReportBro Screenshot showing activated debug mode

2 Log a report definition to the console

When you already started designing your report template and you'd like to share it or save it for later open the developer tools of your browser and switch to the console tab. Then click the console button in the menu bar to log the report.

The console output now contains the report definition. You can easily copy it from the console to a text file. Make sure you copy the complete definition - it must be valid JSON.

3 Import a report definition into ReportBro Designer

If you already have a valid JSON report definition to import click the insert report template button in the menu bar.

Paste the entire report definition into the JavaScript Popup. Once you hit the ok button the report template is loaded in the designer.