Troubleshooting Firebot Overlay issues in OBS Studio

To be able to troubleshoot issues with the Firebot Overlay inside OBS you need to add some startup parameters to OBS:

  Any command-line switches you launch OBS Studio with are passed to Browser Source.
  To expose DevTools, add --remote-debugging-port=PORT to your OBS Studio shortcut (where PORT is your preferred port number)
  and navigate to http://localhost:PORT/ in your browser. I often use port 9090 for this.

So edit your OBS shortcut Target to look something like this: "C:\Program Files (x86)\OBS Studio - FTL\bin\64bit\obs64.exe" --remote-debugging-port=9090

Now start OBS via that shortcut, you should be able to open a browser and point it towards http://localhost:9090/. This will open up the Developer Tools view for the OBS Browser Sources, you will be presented with a list of all your overlays. Chose the one with the same name as the Firebot Overlay Browser Source has in your Sources list. In my case I've named it Firebot so that I easily know which is what.

Now it will present you with a HTML view of the overlay + console view.

If you click on Elements in the top left part of the Debug view area you should see something like the picture underneath:

When you activate different overlay functions on your board you should be able to see changes in the overlay source according to the buttons you trigger, there will also be log entries here if there are issues with some of the errors that can occur like images not found and so on. These errors can help you to help yourself in fixing your issue or you can include those in your issue report posted here: New Issue

Some examples of output that might be seen in the Development Tools Console view: