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

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

Right-click + Inspect

• Right-click anywhere inside your running app

• Click Inspect at the bottom of the context menu

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

Elements

Console

Network

Sources

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

1. 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

Note: These changes are temporary and only visible to you — they won’t affect the actual app

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

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

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

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.