Roll20 Wiki

Using the Firefox dev tools to inspect live sheet code

Using the built in Web Dev tools in your browser helps a lot with figuring things out. Both Firefox & Chrome (others) have their own versions.

Open it: pressing F12 or Right Click anywhere & select "Inspect".

Uses in Roll20

Get extra info to send with a Roll20 bug report
Tweaking Roll20 looks with Stylus
- as long as something isn't part of the <canvas>, one can write & edit CSS snippets that changes the look for yourself if you save it as a userstyle with Stylus.

looking up the names of sheet attributes or Repeating Sections
Figure out RowID of something in a Repeating Section. Some sheets makes the RowID easy to find, but majority of sheet's don't.
Especially useful on newer by Roll20-sheets where we don't have public sourcecode for the sheet.
Can be quicker than searching through the public sourcecode
Looking at the roll macro as it's defined in the <button>-element, before it's sent to the chat.

make live edits on you sheet and see how things change(like adjusting the width of a number input to look good)
inspecting other's sheets to se how they achieved some specific effect.
HTML/CSS debugging: figure out why something works or doesn't work in your code, to narrow down the problem, like why a css class is not working.
- Debugging HTML and Debugging CSS
sheetworkers/javascript debugging: reading the web console to figure out what's going on with your sheetworkers. Open the console and keep an eye on it when you use the sheet like normally & see what it reports.
- Example: If you add something like console.log("ifWounded is trigger") or console.log("Set strength mod to" + strmod)() in your sheetworkers, you can see what steps that take place, what is left out, and know what values your variables have at different stages.)
- JS Debugging in Chrome, and in Firefox