Debug Agent

A step-by-step walkthrough on how to effectively use Debug Agent for modifying, customizing & debugging apps using natural language prompts.

What is Debug Ai Agent?

It is an intelligent assistant capable of interpreting natural language instructions — commonly referred to as prompts — to perform a wide range of tasks. These include not only debugging existing functionality but also enhancing and extending your application through code generation and feature implementation.

By leveraging this tool, developers can streamline their workflow by describing what they want in plain language, allowing the agent to translate those intentions into functional code, html page generation or UI components.

This guide will walk you through best practices for interacting with the Debug Agent, ensuring that your prompts are clear, effective, and aligned with your development goals.

Models Available

How It Works

The debug agent operates in a few key steps:

Best Practices for Prompting

1) Avoid Being Generic

When describing issues or requesting changes, being generic can lead to misunderstandings or incorrect implementations. The Debug AI Agent relies on precise instructions to generate accurate code or resolve issues effectively. By clearly specifying what you see and what you expect, you ensure that the agent understands your requirements correctly.

Example: Avoiding Generics vs. Being Specific

2) Be Specific

Importance of Precision in HTML Page References

To ensure the Debug AI Agent understands exactly which part of your application needs attention, always specify the .html file name. This helps avoid confusion and ensures the debug agent targets the correct component.

How to Specify Pages

• Use Exact File Names : Include the .html extension to identify the specific page

• Provide Context : Describe the functionality or behaviour associated with the page

• Use the target function by right clicking the document you would like to reference

Create a return cart button on the header of the return_selection.html page which will
redirect the user to a new create_return.html page. The create_return.html page should
display the customer name and the list of items selected for return (stored in 
sessionStorage as returnItems). There should be a "Confirm Return" button upon 
clicking it should trigger two API calls to POST the return.

Additional Details to Include

• File Names : Mention relevant files such as ext_api.txt, requirements.txt, or request.js

• Line Numbers : If applicable, specify line numbers where the issue occurs

• Error Messages : Provide any error messages or logs related to the problem

• Expected Behaviour : Clearly describe what should happen versus what is currently happening

In the return_list.html page, the returns are not being displayed. Instead, I'm seeing 
the following message on the page: Failed to load return list. Using sample data is 
not allowed. Please edit the code so that it works correctly by fetching data 
exclusively from the Business Central API.

3) API Calls

Ensuring Correct Function Paths One common pitfall is that the Debug Agent might misinterpret or incorrectly reference function names or paths when generating code. To prevent errors, always verify that the generated code aligns with your intended API calls and function references.

Common Issues

• Function Name Mismatches: The agent may use a different function name than what you specified

• Incorrect Path References: The generated code might not match the actual function path defined in your application

Best Practices for Validation

1. Cross-Reference with Documentation:

   • Compare the generated code with your function list or Word document to ensure accuracy

   • Use tools like search functions to locate the correct implementation

2. Check Generated Code:

   • Review the HTML or JavaScript code produced by the agent

   • Ensure that function calls, API endpoints, and parameters match your specifications

Example

Image

Function List

Search for the function in the generated html code

By following these best practices, you can significantly improve the effectiveness of your interactions with the Debug AI Agent, leading to more accurate and efficient outcomes.

4) Common errors

Below are some common errors you might encounter while working with the app, along with guidance on how to resolve them.

Authentication Token Expired (Error 401)

Preview Error

Description The authentication token has expired, which can cause issues when making API calls or accessing protected resources.

Solution Refresh the authentication token by logging out and logging back in. If the issue persists, ensure that the token refresh mechanism is functioning correctly.

Description The AI has detected an error during the preview process, which may affect the functionality or appearance of your application.​

Solution Click the Ask AI button to prompt the Debug agent to analyse and fix the error. This will help identify and resolve any underlying issues in real-time.

5) Sample Prompts

Below are some sample prompts you can use as references to help eMOBIQ AI modify or fix your app. These examples illustrate how to structure your requests effectively, ensuring clear communication with the Debug agent.

In the index.html page when i click new entry i want to create a new entry, it currently allows me to edit the entry instead.

Clicking on any order in the order_list.html page redirects to a non-existent page. Create the order_details.html page with these requirements:​

Detail page need to display by selecting order: ​

Detail page includes:​
In Header: Order number, Customer Code & Name, Order Date ​

In Detail: Item code & name, Unit price, Quantity with uom 

In Footer : Sub-total, GST, Total​

Can you change all the back buttons in all the pages to a home icon instead and redirect everything to index.html

In the index.html, remove the recent entries section

I cant see the bottom of my all my html pages as the task bar is blocking it, fix this issue