---
title: Using Vercel Toolbar
product: vercel
url: /docs/microfrontends/managing-microfrontends/vercel-toolbar
canonical_url: "https://vercel.com/docs/microfrontends/managing-microfrontends/vercel-toolbar"
last_updated: 2018-10-20
type: conceptual
prerequisites:
  - /docs/microfrontends/managing-microfrontends
  - /docs/microfrontends
related:
  - /docs/vercel-toolbar
  - /docs/microfrontends/quickstart
  - /docs/vercel-toolbar/in-production-and-localhost
  - /docs/microfrontends/troubleshooting
summary: Learn about using vercel toolbar on Vercel.
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

# Managing with the Vercel Toolbar

Using the [Vercel Toolbar](/docs/vercel-toolbar), you can visualize and independently test your microfrontends so you can develop microfrontends in isolation. The Microfrontends panel of the toolbar shows all microfrontends that you have [configured in `microfrontends.json`](/docs/microfrontends/quickstart#define-microfrontends.json).


<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Managing Toolbar](https://vercel.com/docs/vercel-toolbar/managing-toolbar?from=related) — Learn how to enable or disable the Vercel Toolbar for your team, project, and session.
- [Add to Production](https://vercel.com/docs/vercel-toolbar/in-production-and-localhost/add-to-production?from=related) — Learn how to add the Vercel Toolbar to your production environment and how your team members can use tooling to access t
- [Path Routing](https://vercel.com/docs/microfrontends/path-routing?from=related) — Learn about path routing on Vercel.
- [Add to Localhost](https://vercel.com/docs/vercel-toolbar/in-production-and-localhost/add-to-localhost?from=related) — Learn how to use the Vercel Toolbar in your local environment.
- [Browser Extensions](https://vercel.com/docs/vercel-toolbar/browser-extension?from=related) — The browser extensions enable you to use the toolbar in production environments, take screenshots and attach them to com

Full cross-link map for this page: [/docs/microfrontends/managing-microfrontends/vercel-toolbar.graph.md](/docs/microfrontends/managing-microfrontends/vercel-toolbar.graph.md)
<!-- /docsgraph:related -->

You can access it in all microfrontends that you have [enabled the toolbar for](/docs/vercel-toolbar/in-production-and-localhost).

> **💡 Note:** This requires version `0.1.33` or newer of the `@vercel/toolbar` package.

## View all microfrontends

In the **Microfrontends** panel of the toolbar shows all microfrontends that are available in that microfrontends group. By clicking on each microfrontend, you can see information such as the corresponding Vercel project or take action on the microfrontend.

![Image](`/docs-assets/static/docs/microfrontends/toolbar/microfrontends-panel-2-light.png`)

## Microfrontends zone indicator

Since multiple microfrontends can serve content on the same domain, it's easy to lose track of which application is serving that page. Use the **Zone Indicator** to display the name of the application and environment that the microfrontend is being served by whenever you visit any paths.

![Image](`/docs-assets/static/docs/microfrontends/toolbar/zone-indicator-3-light.png`)

You find the **Zone Indicator** toggle at the bottom of the **Microfrontends** panel in the Vercel toolbar.

## Routing overrides

While developing microfrontends, you often want to build and test just your microfrontend in isolation to avoid dependencies on other projects. Vercel will intelligently choose the environment or fallback based on what projects were built for your commit. The Vercel Toolbar will show you which environments microfrontend requests are routed to and allow you to override that decision to point to another environment.

1. Open the **microfrontends panel** in the Vercel Toolbar.
2. Find the application that you want to modify in the list of microfrontends.
3. In the **Routing** section, choose the environment and branch (if applicable) that you want to send requests to.
4. Select **Reload Preview** to see the microfrontend with the new values.

To undo the changes back to the original values, open the microfrontends panel and click **Reset to Default**.

![Image](`/docs-assets/static/docs/microfrontends/toolbar/routing-overrides-3-light.png`)

## Enable routing debug mode

You can enable [debug headers](/docs/microfrontends/troubleshooting#debug-headers) on microfrontends responses to help [debug issues with routing](/docs/microfrontends/troubleshooting#requests-are-not-routed-to-the-correct-microfrontend-in-production). In the **Microfrontends** panel in the Toolbar, click the **Enable Debug Mode** toggle at the bottom of the panel.


---

[View full sitemap](/docs/sitemap)