Mirror (Real-time Preview)

Feature Overview

Mirror is an efficient page and data preview and debugging tool provided by Momen for developers and operations personnel. Mirror allows users to instantly preview page rendering, simulate diverse device and user contexts, and debug data and access controls, significantly improving development and testing efficiency.

Key Capabilities

• Multi-Device Preview: Seamlessly switch and preview your page across various device sizes—including desktop, tablet, and mobile with support for custom device resolutions.
• Page Parameters and Global Variable Simulation: Easily customize page input parameters, path parameters, query parameters, global variables, and more to simulate diverse business scenarios and test how your page responds.
• Login and User Permission Simulation: Supports simulating different user identities and role permissions, facilitating testing of how content is personalized and permissions are applied.
• Real-time Refresh: Supports automatic page refresh.
• Debugging: Supports quickly identifying and resolving issues through Debug Mode.

Typical Use Cases

• Real-time viewing of page display effects on different devices during development.
• Simulating how pages function with different users, permissions, and data sets.
• Designers and product managers validating page interactions and visual effects.
• Manual verification before regression testing and automation testing.

How to Use

1. Start Mirror from Homepage: In the top right corner of Momen editor, click “Mirror”.
2. Start Mirror from a Specific Page: Select a page on the canvas, then click “Mirror” on the right side of the page toolbar.
3. Select Device Type: In the bottom toolbar, switch between desktop, tablet, mobile, or toggle between full-screen and custom device sizes as needed.
4. Simulate Login: Click “Simulate login,” then select or create a test user to simulate different role permissions.
5. Edit Mock Data: In the “Initialize config” area, add or edit the Mock Data required for the page.
6. Real-time Refresh: If parameters or variables change, click the “Reload” button to view the effects in real-time.
7. View Component Data State: Click “Debugger” (wrench icon) to open Debug Mode. You can then click on components to view their data states, which aids in debugging and validation.

Q&A

1. Q: What if the Mirror preview differs from the online environment?
   Please check if the Mock Data and parameter configurations are consistent with the online environment.

2. Q: How do I simulate complex user permissions?
   Select different roles in “Simulate login” or customize user permission fields.

3. Q: The preview page loads slowly?
   Check your network environment, or try refreshing the page.

Glossary

• Mirror: The real-time preview functional module.
• Mock Data: Simulated data for page debugging.
• Page Input Parameters: Parameters passed when a page is initialized.
• Global Variables: Data variables shared across multiple pages.
• Simulate Login: Simulating different user identities for testing.
• Debug Mode: A mode used to view the data state of components.