diff --git a/docs/product/dev-toolbar/img/sentry-project-settings-toolbar.png b/docs/product/dev-toolbar/img/sentry-project-settings-toolbar.png new file mode 100644 index 0000000000000..b1c33770251e7 Binary files /dev/null and b/docs/product/dev-toolbar/img/sentry-project-settings-toolbar.png differ diff --git a/docs/product/dev-toolbar/img/sentry-toolbar-settings.png b/docs/product/dev-toolbar/img/sentry-toolbar-settings.png deleted file mode 100644 index f1bc34e727afe..0000000000000 Binary files a/docs/product/dev-toolbar/img/sentry-toolbar-settings.png and /dev/null differ diff --git a/docs/product/dev-toolbar/index.mdx b/docs/product/dev-toolbar/index.mdx index 465c905313378..1f1af9fd4a6c0 100644 --- a/docs/product/dev-toolbar/index.mdx +++ b/docs/product/dev-toolbar/index.mdx @@ -40,10 +40,7 @@ After setting up the Dev Toolbar you’ll see a “Login to Sentry” button flo After clicking the button, you will see a pop-up window for logging in to Sentry. ![Sentry log in pop up](./img/login-popup.png) -If it's your first time setting up the Dev Toolbar, there will be a button with a link to Sentry's Dev Toolbar settings page to configure your domain. +If it's your first time [setting up the Dev Toolbar](/product/dev-toolbar/setup) , there will be a button with a link to Sentry's Dev Toolbar settings page to configure your domain. ![Dev Toolbar configure domains button](./img/configure-domain.png) -You'll need to add your domain URL to Allowed Origins in Sentry on the **Settings > Project > Dev Toolbar** page. -![Sentry's Dev Toolbar Settings Page](./img/sentry-toolbar-settings.png) - Learn more about setting up the toolbar, including configuring a feature flag provider and integrating the toolbar in different environments, on the next page. diff --git a/docs/product/dev-toolbar/setup.mdx b/docs/product/dev-toolbar/setup.mdx index 37c8795029489..c98d6ffe0a307 100644 --- a/docs/product/dev-toolbar/setup.mdx +++ b/docs/product/dev-toolbar/setup.mdx @@ -22,7 +22,7 @@ You need to complete two steps to get the toolbar rendered on the page: ``` It is recommended that you add the script tag at the bottom of the page so it doesn’t block other critical JavaScript. -2. Call `window.SentryToolbar.init(initConfig)` to set up a toolbar instance on each page where you want to see the Dev Toolbar. +2. Call `window.SentryToolbar.init(initConfig)` to set up a toolbar instance on each page where you want to see the Dev Toolbar. Take care to also [conditionally load the toolbar in your production environment](#deploying-to-production-environments). ```html ... @@ -36,6 +36,10 @@ You need to complete two steps to get the toolbar rendered on the page: ``` +3. Edit [Project Settings](https://sentry.io/orgredirect/organizations/:orgslug/settings/projects/) in Sentry so the Toolbar is allowed to connect from your dev, staging, and production domains. + ![Sentry's Dev Toolbar Settings Page](./img/sentry-project-settings-toolbar.png) + + ### Unmounting The Toolbar If you have called `SentryToolbar.init({...})` to render the toolbar, but now want to manually remove or unmount it from the page, you can call the cleanup function that is returned from `init()`. This will unmount all the injected HTML and CSS. Login credentials will not be removed, so you can re-insert the toolbar and still be authenticated.