# Testing your App

### View Modes

The designer has three view modes DESIGN, DEBUG and PREVIEW. The default mode is Design. This is where you build your app. You can add components to the canvas, style them and configure their properties and set up your spreadsheet, adding data and formulas. 

In design mode components are not interactive. They can be selected and resized but their interactivty is disabled. When it comes to testing your app, to see how it will function and behave you need to use one of the other view modes.

#### Debug

Debug acts as a means to "test" a project. When in this mode, components can be interacted with on the canvas, and display the set styling for each of their states. In addition to this, the spreadsheet is still visible. allowing you to see what is happening in the spreadsheet while interacting with the components.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FpX4WDzdFhaxxEU3HVKqB%2FDebug.gif?alt=media&#x26;token=c48d56fc-0c44-438c-81e0-9c23242934d2" alt=""><figcaption></figcaption></figure>

#### Preview

Preview mode allows you to view and interact with the project as if it were published. When in this mode, the spreadsheet is hidden, but the components can be interacted with.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FVNAV8InAgZgtCxBJVZ4Z%2FPreview.gif?alt=media&#x26;token=bcc8c38d-6786-4b5e-8c09-f2e9ffa1e723" alt=""><figcaption></figcaption></figure>

### View responsive behaviour in Preview

Preview mode has a Mobile/ Device Mode for all responsive projects. For projects that have the 'enable responsive canvas' option ticked, preview mode lets you test how your app will behave across different devices. This can be especially useful to check the behavior of your app based on the Layout & Positioning settings on components.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FYpLE5wX9AKulptOFeQLs%2Fmobiledevice_enabled.png?alt=media&#x26;token=759b320a-73f2-4305-9b07-879768b169ea" alt=""><figcaption></figcaption></figure>

1. Desktop
2. Tablet
3. Mobile
4. Rotate
5. Switch void color

#### Desktop/ Tablet/ Mobile

Toggle between desktop, tablet and mobile to see how your project displays at these common breakpoints.

#### Rotate

In either **Tablet** or **Mobile** mode, the Rotate option will become available.

#### Switch void color

This option changes the void colour behind the canvas between black and white. This is useful to provide contrast when your app has a light or dark background.