The Atono Chrome extension simplifies testing and debugging for applications built with Atono. It allows you to report bugs for your application and adjust feature flags directly in your browser, reducing context-switching and the need to navigate between tools. This lets your team focus on testing features, resolving issues, and delivering value faster.

📘

Required setup for the Atono extension

The extension relies on meta tags to understand your environment and (if applicable) your tenancy setup. For implementation details, see the Meta tags section.

Key benefits

The Atono extension helps your team:

• Flip feature flags: Adjust flags in your browser for faster rollbacks, testing, or demos of new functionality.

• Report bugs for your application: Submit detailed bug reports directly from your browser while using your application. Automatically include important details like the current URL, operating system, browser viewport size, and console and network errors.

Install the extension

You can download the Atono extension directly from the Chrome Web Store.

1. In the Chrome Web Store, search for and select the Atono extension.
2. Click Add to Chrome.
3. In the confirmation dialog, click Add extension.

Use the Atono extension

Flip feature flags

Toggle feature flags to test or demo new functionality or quickly roll back changes in your application. The extension applies changes to the current application, environment, and, if applicable, the customer (for multi-tenant applications).

If your application is multi-tenant, but the required tenancy meta tag is missing, the extension may not allow you to toggle flags and will display an error.

If your application is single-tenant, this tag is not required, and the extension should operate in single-tenant mode.

To flip feature flags, you'll need the appropriate permissions, and the application must be integrated with Atono's feature flag system.

1. Open the Atono extension and click Flip a feature flag.

2. Confirm that the workspace and environment displayed are correct.

3. Find the flag you want to update. You can view a list of which stories the flag applies to by hovering over the stories (book) icon.

   

4. Click the flag's current status (ON or OFF) and choose the new status from the menu.

   • For multi-tenant applications, the extension automatically applies the change to the relevant slice (a subset of the application for the current customer) for the current customer or creates a new slice if none exists.

5. In the Update flag configuration dialog, click Update to save your changes, or click X to cancel.

6. Click out of the extension to return to your application.

🚧

How multi-tenant mode is detected

The extension determines whether your app is multi-tenant based on whether any feature flags in the environment have ever been configured with a customer slice.

Even if those slices are later deleted, the extension continues to treat the environment as multi-tenant. This can result in an error if the required tenancy meta tag is missing—even if you think your app is single-tenant.

Report bugs

Simplify bug reporting for your application by automatically collecting essential context, like the URL, browser information, and console and network errors.

1. Open the Atono extension and click Report a bug.
2. Fill out the bug report template. This uses the same format as in the Atono web application. For more details, see Create a bug.

3. Click Create to submit the bug.
4. After submission, choose from the following options:
   • Create another: Report another bug.
   • View bug: Open the bug in the Atono web application.
   • <Back : Return to the extension menu.

Details automatically included in bug reports

The extension automatically collects and attaches the following details to every bug:

• Current URL
• Operating system
• Browser details
• Viewport size
• Console errors (.txt file)
• Network errors (.txt file)

Differences between the extension and web UI

The Atono Chrome extension is designed for quick, in-context changes while using your application.

The extension only toggles flags for the current environment and tenant. To change flags for other environments, other customers, or use location-based targeting, use the Atono web UI.

Implementation details

Meta tags

For the extension to function with your application, specific meta tags must be added to your site. These meta tags provide the extension with critical context about your environment and setup, ensuring it integrates seamlessly with Atono's features.

📘

What are meta tags?

Meta tags are snippets of HTML code that provide information about a webpage, often called metadata (details about the page's purpose or environment). They're not visible on the page itself, but they help tools, search engines, and applications understand the page's content and context.

For the Atono extension, meta tags are essential because they:

• Identify theAtono environment where the application is running (such as dev, test, or prod).
• Specify the customer (for multi-tenant applications), ensuring actions are applied to the correct user or organization.

Meta tags are typically added to the <head> section of a web page's HTML because this part of the page contains information about the document, such as metadata, styles, and scripts, which tools and applications like the Atono Chrome extension can access before the page loads.

Here's an example:

<meta property="atono:environment-key" content="value-goes-here">

If you're not familiar with HTML or meta tags, think of them as digital labels that the Atono extension reads to understand how to work with your site. Work with your development team to add or modify these tags based on the requirements below.

Required meta tags for Atono

Add the following meta tags to the <head> section of your HTML:

Environment key

The environment key identifies the environment where your application is running—such as in dev, test, or prod—and ensures the extension can connect to the correct instance.

You can copy the environment key from the Environments page in the Atono web application.

<meta property="atono:environment" content="<your-environment-key>">

Tenancy (customer)

The tenancy meta tag is only required for multi-tenant applications. It specifies the customer's tenant ID, ensuring feature flag changes and bug reports apply to the correct user or organization.

If your application is single-tenant, you should omit this tag.

<meta property="atono:tenancy" content="<customer-tenant-id>">