Test platform detection and browser-specific behavior without leaving your browser — switch user agent strings directly from the Astro dev toolbar.
Need to check how your site behaves on iOS, Android, or Safari? Add it in one command:
# npm
npx astro add astro-toolbar-ua
# pnpm
pnpm astro add astro-toolbar-ua
# yarn
yarn astro add astro-toolbar-uaOr install manually:
npm install -D astro-toolbar-ua// astro.config.mjs
import { defineConfig } from "astro/config";
import toolbarUA from "astro-toolbar-ua";
export default defineConfig({
integrations: [toolbarUA()],
});Open the UA Switch panel in the Astro dev toolbar. Pick a preset or paste a custom UA string. The page reloads with the new user agent applied.
A notification dot appears on the toolbar icon when a UA override is active.
| Category | Presets |
|---|---|
| Desktop | macOS, Windows, Linux |
| Mobile | iOS, Android |
| Browsers | Safari, Firefox, Edge |
You can also enter any custom UA string directly.
- A synchronous
<head>script reads alocalStoragekey and overridesnavigator.userAgentviaObject.defineProperty— before any page scripts run - The toolbar UI writes the selected UA string to
localStorageand reloads the page - Only runs during
astro dev— production builds are not affected
- Only overrides client-side
navigator.userAgent. Does not modify server-side request headers. Object.definePropertyonnavigator.userAgentworks in Chromium and Firefox. Safari may not support it in all versions.
If you find this useful, star the repo on GitHub — it helps others discover it.
MIT