# 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="/files/MVmRCdc0wIkFRNuZcmin" 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="/files/FnREBB0eA5Eux8mGvEtX" 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="/files/xe0DdOtUaxQ9lNv12gzh" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.squirrel365.io/the-designer/testing-your-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.