#Simulator

The simulator on the left screen simulates the real-world conditions and scenarios on the mobile device as much as possible. Before your miniapp goes live, ensure you have tested its performance on a real device.

• Refresh: Refresh the simulator.
• Dark mode: Switch to dark mode in settings.
• Multilingual: Switch to another language. See Internationalization Configuration.
• Model: Select a model for preview from various options.
• Zoom: Set the zoom level for preview.
• Login authorization: To simulate app capabilities, you need to authorize your app account to access the simulator.
  • When simulating app requests, you must log in to the panel miniapp.
  • The miniapp and the app account must belong to the same city.
  • The app account is a member of the miniapp.

#Features

The top menu bar in the workspace includes different features.

#Remote debugger

• Remote mode: With internet access, you can run the miniapp on the phone.
• LAN mode: The phone and the simulator must be on the same LAN. LAN mode works similarly to remote mode, offering a fast connection and being immune to internet issues.
  • iOS requires version 5.12.0 or later.
  • Android requires version 5.15.0 or later.

#Remote debugger 2.0

• Advantages: Compared to the old version of Remote debugger, the new version is faster and runs closer to the real device.
  • iOS requires version 6.3.0 or later.
  • Android requires version 6.3.0 or later.

#Real device preview

Scan the QR code with your mobile phone to preview the development version of the miniapp.

• The test app account must be added to the allowlist.
• Differences between remote debugger and real device preview
  • They have different compilation modes. The remote debugger uses watch, while the real device preview uses build, which is more similar to a release.
  • The real device preview reflects the real situation of a miniapp release as much as possible.
  • The real device preview does not support debugging.

#Plugin

Tuya MiniApp IDE offers extended features through plugins, such as panel tools.

#Open in Visual Studio Code

You can open the current project in Visual Studio Code to edit the code. Before using this feature, you need to configure the code command for Visual Studio Code.

#Project settings

• Basic information: The basic information about the current project. You can change the miniapp bound with the project.
  • MiniApp ID: Redirect you to the miniapp on the MiniApp Developer Platform.
  • Code package size: The size of the miniapp package after you publish it.
• Environment configuration: Set the base library and the dependent kit version. See Base Library and Kit for details.
• Project configuration: Set the compilation-related configurations.

#Debugging section

• Debug: The capabilities of the Chrome DevTools.
  • Console: View messages logged when the miniapp is running.
  • Elements: View the DOM structure of the miniapp.
• Log: View the compilation log. You can screenshot the errors to provide feedback.
  • Compilation during project initialization.
  • Compilation during packaging and uploading.
  • Compilation during the real machine preview.