BAgel helper

How to enable

The following snippet needs to be added in to the page before the components have loaded. It's recommended to not enable this in production

<script>
  window.bagel = {
    enableHelper: true
  }
</script>

Via the browser

You can also enable the helper via your console browser. Simply type the following into the console on any page that has BAgel installed.

window.bagel.enableHelper()
This will set an item in your local storage allowing BAgel helper to stay enabled across pages.

To disable BAgel helper run the following
window.bagel.disableHelper()

Within an iframe

If you need to enable the helper on a BAgel page that is running inside an iframe, such as Storybook grab the iframe and run the command on that.

const iframe = document.getElementById("iframe-id")
iframe.contentWindow.bagel.enableHelper()

Test that it's running

When the BAgel helper is enabled you will see a "BAgel Helper enabled" message in the console

Show the current BAgel version

Run window.bagel.getVersion() and this will return the currently installed version on the page

Debug mode

BAgel helper also has a debug mode that highlights all the components on a page as well as logging the currently installed version. It will also list of all the components on the page, with a total of how many times each one has been used. To enable this run the following in your browser console window.bagel.debug().

Once enabled hovering over any of the BAgel elements will highlight that element and show the elements name.