Developer Debug

Version

Application Scenario

Developer Debug can be divided into two parts: initial effect preview and layout adjustment.

1. Preview: If the template display is normal in the Developer Debug preview, it will also be normal in PC Preview. Since adaptive scaling is based on the initial effects of templates, good display effects in the Developer Debug preview naturally ensure a good adaptive performance.

2. Layout Adjustment: For templates with complex styles, Developer Debug allows you to adjust the size and layout of components on the preview page. Changes take effect immediately after you click Save, offering a true WYSIWYG (What You See Is What You Get) experience, as shown in the following figure.

Function Description

Developer Debug is displayed in the drop-down list of template preview methods. When you hover over the option, a tooltip is displayed, saying "Click it to switch the template to browser debug." You can click Developer Debug to be redirected to the preview page where you can adjust the template layout and gain a WYSIWYG experience.

Note: 

To preview FRM reports of old versions in the Developer Debug mode, you need to click Convert to New Version in the quick access toolbar first.

When a template is previewed in the Developer Debug mode, the designer will close and lock the template. In the locked state, you cannot reopen the template in the designer, as shown in the following figure.

Adjusting the Component Position

Move the cursor over a component, hold the left mouse button, and drag the component to adjust its position, as shown in the following figure.

When dragging a component, you can use alignment guides (red lines appearing when component borders align) and the snap-to function (automatically snapping to the closest aligned position) to align components.

When you click a component, a red box with white text appears in the upper left corner, displaying the X and Y coordinates of the component. They indicate the position, not the size, of a component and can be used to check if components are properly aligned.

Adjusting the Component Size

When you click a component, eight white handles are displayed on its borders for resizing from different directions. Move the cursor over the handles and drag to adjust component size, as shown in the following figure.

You can also lock the aspect ratio to keep the width-to-height ratio of the component unchanged, as shown in the following figure.

To lock the aspect ratio, click the lock icon on the top-right floating toolbar that appears when you click the component.

Adjusting the Component Level

When components overlap, you can adjust their levels, as shown in the following figure.

To adjust the component level, you can select a component and select from Put on top, Put on bottom, Move up one level, and Move down one level on the top-right floating toolbar that appears.

Saving and Reverting Changes

On the Developer Debug page, four buttons are available on the top tool panel. The functions of the buttons are as follows:

• Save: After changing the component layout, you can click Save to save the changes, which will also take effect for templates in the designer.

• Undo: You can click Undo to revert changes (five changes at most).

• Restore: You can click Restore to revert Undo actions (five actions at most).

• Cancel the fixed: The tool panel is fixed by default. After you click Cancel the fixed, the panel will automatically be hidden when the cursor leaves the panel.

The first time you click Save in the browser, a dialog box will pop up, as shown in the following figure. After you close the dialog box, it will not be displayed again unless you clear browser cookies.

Accessing Developer Debug via the URL

To preview a template in the Developer Debug mode via a URL, you just need to suffix the URL with &op=editable_preview.

For example, to view the template Simple Dashboard.frm, you can enter http://localhost:8075/webroot/decision/view/report?viewlet=Simple Dashboard.frm&op=editable_preview in the address bar of a browser and press Enter.

Note: 

During remote design, you can only access a template in the Developer Debug mode via a URL when granted the design permission of the template. Otherwise, your access will be denied.

Effect of Adaptive Layout of the Body

If body of templates is set to Adaptive Layout, you cannot adjust the component position and level in the Developer Debug mode. You can only resize components. The size of one component may change with another component.

If body of templates is set to Absolute Layout, you can make all adjustments mentioned above without any restrictions.

Special Operation for the Nested Component

For Tab and Absolute Canvas components that support component nesting, special operations can be performed in the Developer Debug mode.