Documentation

Atono Chrome extension

Report bugs for your application or toggle feature flags directly from your browser for faster rollbacks, testing, or demos.

Suggest Edits

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.

The extension relies on specific metatags to integration with your site. For implementation details, see the Metatags section.

Key benefits

The Atono extension helps your team:

  • Flip feature flags: Adjust flags in your browser for faster rollbacks, resting, 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'll be able to download the Atono extension directly from the Chrome Web Store.

More details coming soon...

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, customer (for multi-tenant applications).

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 and click its current status (ON or OFF).
  4. Choose the new status from the menu.
    1. 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.

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)

Implementation details

Metatags

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

📘

What are metatags?

Metatags 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, metatags are essential because they:

  • Identify the Atono 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.

Metatags 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 metatags, 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 metatags for Atono

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

Environment key

The environment key identifies 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 metatag specifies the customer's tenant ID for multi-tenant applications, so actions like feature flag changes or bug reports are correctly applied to the right user or organization.

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

Updated 13 days ago