# Tips & Tricks

## External API

* **Organize Your APIs**: Group related APIs under meaningful names and descriptions to aid maintainability and troubleshooting
* **Secure Endpoints**: Always validate and sanitize input data before sending it to external APIs to prevent injection attacks
* **Monitor Performance**: Regularly review API response times and error logs to ensure optimal performance
* **Leverage Event Handlers**: Use success and error event handlers to notify users or trigger follow-up actions based on API outcomes
* **Use Version Control**: When modifying existing APIs, consider creating duplicates or versions to avoid breaking existing integrations
* **Provide Clear API & Auth Instructions**: Defining detailed instructions for how external APIs should be used—including authentication methods—helps the AI make faster, more accurate decisions. This reduces unnecessary request retries, cuts down on debugging, and lowers operational costs by minimizing token usage and compute time

{% hint style="info" %}
***Tip**: The more you Instructions you provide, the less the AI guesses — use detailed instructions to unlock smarter automation*
{% endhint %}

***

## Inspect Element

### Using Inspect Element in eMOBIQ AI for Generated Apps

When working with apps generated by **eMOBIQ AI** , you can use your browser’s built-in **Inspect Element** tool. Even though your app was generated by eMOBIQ AI, it still runs in a browser like any other web application.

This will allow you to:

* Preview visual changes (colors, fonts, layout)
* Debug UI issues
* Understand how components are structured and styled

This is especially useful during development or when customizing your app’s appearance and behavior.

***

### How to Open Inspect Element

<figure><img src="https://1183608340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsUDFGj32EEDxm4CJ43yZ%2Fuploads%2Fgit-blob-80ecb19495058e52e1893c6d0b0a928385a3a353%2FUntitled%20design.gif?alt=media" alt="" width="563"><figcaption></figcaption></figure>

Right-click + Inspect

* `Right-click` anywhere inside your running app
* Click **`Inspect`** at the bottom of the context menu

{% hint style="info" %}
*Tip: You can also press `F12` or `Ctrl + Shift + I` in many browsers*
{% endhint %}

***

### Key Tabs in Inspect Element

Once Inspect Element opens, you’ll see several tabs. Here is an overview of the tabs you may want to pay closer attention to and their use cases with eMOBIQ AI

{% tabs %}
{% tab title="Elements" %}

1. **Viewing Component Structure**

Use the **Elements tab** to explore how your components (like buttons, tables, inputs) are structured in HTML. This helps understand layout issues or styling conflicts

2. **Testing Visual Changes**

   You can temporarily change:

   * Colors
   * Fonts
   * Sizes
   * Text content

   Just double-click the element in the **Elements tab** , make your edits, and see them instantly applied in the browser

<figure><img src="https://1183608340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsUDFGj32EEDxm4CJ43yZ%2Fuploads%2Fgit-blob-f2f612453540a90a421e09486835fc771ff45821%2Fimage%20(42).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
*Note: These changes are temporary and only visible to you — they won’t affect the actual app*
{% endhint %}
{% endtab %}

{% tab title="Console" %}
**Debugging Errors**

If something breaks in your app, check the **Console tab** for error messages. Red lines usually indicate:

* Failed API calls
* Missing variables
* JavaScript errors

Use this info to trace back to your eMOBIQ AI logic or component configuration

<figure><img src="https://1183608340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsUDFGj32EEDxm4CJ43yZ%2Fuploads%2Fgit-blob-2d68db532f6862cce9672256d128ae21b2bfddc9%2Fimage%20(45).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Network" %}
**Check API Responses**

In the **Network tab** , filter by `XHR` or `Fetch` to find API calls made by your app. Click a request to see:

* The URL it’s calling
* The request body
* The actual response returned

This is helpful if your app isn’t showing the expected data

<figure><img src="https://1183608340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsUDFGj32EEDxm4CJ43yZ%2Fuploads%2Fgit-blob-7539e62475f601344dcdfaabd3bebc082d7ea1fd%2Fimage%20(44).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Sources" %}
**Debug JavaScript and view loaded files**

Since eMOBIQ AI auto-generates apps with integrated backend logic and API connections, the **Sources tab** becomes essential when:

* Validating that your API responses are correctly structured
* Seeing how variables and components are bound to dynamic data
* Debugging custom JavaScript/Python logic steps used in your workflows
* Ensuring that events like `onSuccess` or `onError` are firing as expected

<figure><img src="https://1183608340-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsUDFGj32EEDxm4CJ43yZ%2Fuploads%2Fgit-blob-b2f33fdb5f154d26c19f6febc49387aa65483727%2Fimage%20(46).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

### Tips for Using Inspect Element in eMOBIQ AI Apps

**Search for Components** : Press `Ctrl + F` or `Cmd + F` in the Elements tab and search for component names or variable references like `{{variableName}}`.

**Test Mobile View** : Click the phone/tablet icon in DevTools to simulate mobile devices and ensure your app looks good on all screen sizes.

**Check Performance** : Use the **Performance tab** to record load times and identify slow components or heavy API calls.

***

While eMOBIQ AI generates your app automatically, being able to inspect and debug directly in the browser gives you more control and insight into how everything works behind the scenes.

Whether you're tweaking the look of a button or tracking down why an API isn’t returning data, **Inspect Element is your go-to tool** for quick feedback and problem-solving.