Injecting Page Scripts

You can run JavaScript code snippets inside the tested page when the page starts loading.

Some use cases:

  • Set a cookie that hides a GDPR notice
  • Wait for a button to appear and click it
  • Setting a localStorage key that controls A/B tests

How to set up script injection

You can either set up scripts to inject when creating a page, or later on by clicking "edit" when viewing the page results.

Edit the page

Click Show advanced and then expand the Inject Scripts section.

Configuring advanced page settings

Select or create a script

Click New to create a new script, or click Edit to update one.

Configuring injected JavaScript code on DebugBear

You'll then see a modal where you can enter your code snippet.

Injected script content

The script will be run on the page when the document starts loading, so the page will not have rendered yet. If, for example, you want to click on a button in the page UI you'll need to use a script like this to wait for it to render first:

waitForSelector(".my-button").then(btn => btn.click())
function waitForSelector(selector) {
  return new Promise(resolve => {
    let interval = setInterval(() => {
      if (document.querySelector(selector)) {
        clearInterval(interval)
        resolve(document.querySelector(selector))
      }
    }, 100)
  })
}

Save your page changes

After saving the script, click Update to save the page.


Still need help? Contact matt@debugbear.com for support.
DebugBear is a website monitoring tool built for front-end teams. Track performance metrics and Lighthouse scores in CI and production. Learn more.
© 2020 DebugBear Ltd