Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Difference between revisions of "Character Sheet Development/Debugging"

From Roll20 Wiki

Jump to: navigation, search
m
m
 
Line 14: Line 14:
 
* '''JSON'''(for [[i18n|translation files]] & [[sheet.json]]: [https://jsonlint.com/?code= jsonlint.com]
 
* '''JSON'''(for [[i18n|translation files]] & [[sheet.json]]: [https://jsonlint.com/?code= jsonlint.com]
  
==Browser Dev Tool==
+
==[[Browser Dev Tool]]==
 
{{:Browser Developer Tools}}
 
{{:Browser Developer Tools}}
 
===Sheet Dev Uses===
 
===Sheet Dev Uses===

Latest revision as of 07:29, 25 August 2022

Main Page: Character Sheet Development

[edit] Code Validation

Main Page: Sheet Author Tips

It's a good idea to use a validator to check your code for mistakes in your code. Many IDE & text editors can install such extensions automatically, but given that Roll20 does a few things their own way, by default a HTML validator would complain about lot of things that aren't wrong, but just isn't accepted as standard HTML, such as <button type="roll"></button>.

[edit] Browser Dev Tool

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

[edit] Sheet Dev Uses

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

[edit] See Also