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

Personal tools

Difference between revisions of "Character Sheet Development/Debugging"

From Roll20 Wiki

Jump to: navigation, search
(Created page with "<noinclude> {{revdate}}{{BCS}} {{main|Character Sheet Development}} __NOTOC__ ==Code Validation== {{main|Sheet Author Tips}} It's a good idea to use a validator to check your ...")
 
m
 
(2 intermediate revisions by one user not shown)
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===
 
</noinclude>
 
</noinclude>
Line 22: Line 21:
 
* inspecting other's sheets to se how they achieved some specific effect.  
 
* 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.
 
* '''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.
* [https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML Debugging HTML] and [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS Debugging CSS]
+
** [https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML Debugging HTML] and [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS Debugging CSS]
 
* '''[[sheetworkers]]/javascript debugging''': reading the [https://developer.mozilla.org/en-US/docs/Tools/Web_Console 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.
 
* '''[[sheetworkers]]/javascript debugging''': reading the [https://developer.mozilla.org/en-US/docs/Tools/Web_Console 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 {{c|console.log("ifWounded is trigger")}} or {{c|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.)
 
** Example: If you add something like {{c|console.log("ifWounded is trigger")}} or {{c|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.)
Line 31: Line 30:
 
* [[Character Sheet Development/Common Mistakes|Sheet Development/Common Mistakes]]
 
* [[Character Sheet Development/Common Mistakes|Sheet Development/Common Mistakes]]
 
* [[Character Sheet Development/Tutorials|Sheet Development/Tutorials]]
 
* [[Character Sheet Development/Tutorials|Sheet Development/Tutorials]]
 
+
* [[Character Sheet Development/Tools|Sheet Development/Tools]]
 
[[Category:Character Sheet Development]]‎
 
[[Category:Character Sheet Development]]‎
 
[[Category:Character Sheet Creation]]
 
[[Category:Character Sheet Creation]]
 
[[Category:Sheetworker]]‎</noinclude>
 
[[Category:Sheetworker]]‎</noinclude>

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