Difference between revisions of "Browser Developer Tools"
From Roll20 Wiki
Andreas J. (Talk | contribs) (Created page with "<noinclude>{{revdate}}</noinclude> Using the Firefox dev tools to inspect live sheet code Using the built in Web ...") |
Andreas J. (Talk | contribs) m (→Uses in Roll20) |
||
| (5 intermediate revisions by one user not shown) | |||
| Line 2: | Line 2: | ||
[[File:Firefox-Webtools-inspector.gif|right|thumbnail|700px|Using the Firefox dev tools to inspect live sheet code]] | [[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. | 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". | '''Open it:''' pressing {{button|F12}} or {{button|Right Click}} anywhere & select "Inspect". | ||
| Line 14: | Line 14: | ||
**as long as something isn't part of the {{c|<canvas>}}, one can write & edit {{wiki|CSS|CSS}} snippets that changes the look for yourself if you save it as a userstyle with Stylus. | **as long as something isn't part of the {{c|<canvas>}}, one can write & edit {{wiki|CSS|CSS}} snippets that changes the look for yourself if you save it as a userstyle with Stylus. | ||
| − | ===[[ | + | ===[[Macro Guide|Macros]]=== |
* looking up the names of sheet [[attributes]] or [[Repeating Sections]] | * 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. | * 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 {{repo|Roll20/Roll20/roll20-character-sheets public sourcecode}} for the sheet. | * Especially useful on newer [[by Roll20]]-sheets where we don't have {{repo|Roll20/Roll20/roll20-character-sheets public sourcecode}} for the sheet. | ||
* Can be quicker than searching through the {{repo|Roll20/Roll20/roll20-character-sheets public sourcecode}} | * Can be quicker than searching through the {{repo|Roll20/Roll20/roll20-character-sheets public sourcecode}} | ||
| + | * Looking at the roll macro as it's defined in the {{c|<button>}}-element, before it's sent to the chat. | ||
===[[Character Sheet Development]]=== | ===[[Character Sheet Development]]=== | ||
{{:Character Sheet Development/Debugging}} | {{:Character Sheet Development/Debugging}} | ||
| − | + | ||
| − | + | ||
==Related Pages== | ==Related Pages== | ||
* [[Stylus]] | * [[Stylus]] | ||
Latest revision as of 07:16, 25 August 2022
 | Page Updated: 2022-08-25 |
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".
- Firefox Web Developer Tools
- Chrome DevTools
- Open with Cmd+Option+C (Mac), Ctrl+Shift+C
[edit] 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.
- as long as something isn't part of the
[edit] Macros
- 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.
[edit] Character Sheet Development
- 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")orconsole.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
- Example: If you add something like
