Roll20 Wiki

Revision as of 15:11, 4 March 2022

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".

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

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

@@ Line 2: / Line 2: @@
 [[File:Firefox-Webtools-inspector.gif|right|thumbnail|700px|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 [[Browser#Firefox|Firefox]] & [[Browser#Chrome|Chrome]] (others) have their own versions.
+__NOTOC__
 '''Open it:''' pressing {{button|F12}} or {{button|Right Click}} anywhere & select "Inspect".