Inspect custom window properties

Quickly display and inspect all custom window properties defined on a page.

Useful for inspecting websites and reverse-engineering their JS.

Note

Requires local overrides to be set up.

To use:

Open the Developer Tools
Go to Network tab (with filter set to All or Doc)
Right Click on the main document (first result) and select Override Content

At the top of the <head> paste the following, before any other <script> tags:

<script>
  (() => {
    const getProperties = () => new Set(Object.getOwnPropertyNames(window))
    const displayCustomProperties = () => {
      const customProps = [...getProperties().difference(original)]

      console.log(
        '🕵🏻‍♂️ Custom window properties: 🕵🏻‍♂️\n', 
        Object.fromEntries(customProps.map(prop => [prop, window[prop]])),
      )
    }

    // Exposes for manual use; comment out to avoid global contamination
    window.displayCustomWindowProperties = displayCustomProperties 

    const original = getProperties()

    window.addEventListener('load', () => {
      setTimeout(
        displayCustomProperties,
        1000, // Adjust to trigger after the page’s JS is done initializing
      )
    })
  })()
</script>

Check the console, and you should see properties display after the page loads.

TIP: You can right click on the result and Copy object or Store as global variable.

Important

After you’re done, be sure to remove your content overrides! (Sources > Overrides > Clear configuration)

Tip

If your inline script is blocked by the site’s Content-Security-Policy response header, override it to include script-src: 'self' 'unsafe-inline'.

Tip

If the page uses a lot of JS, you may need to adjust the setTimeout delay to give the page enough time to initialize. You can also manually call displayCustomWindowProperties() in the console.

elstgav/inspect-custom-window-properties.md