Custom Sheet Debugging Resource/Tool? Roll20's HTML + CSS

Hi there. I'm just wondering if there's a tool or resource that can help with debugging Roll20's specific version of HTML code. For example, if none of the on(change sheetworker functions are working, and there are 10,000+ lines of code that could potentially be the issue, is there something that is already keyed into Roll20's unique version of code that can scan it to identify what the potential issue is? I checked out normal HTML code checkers, but Roll20 uses their own version of HTML that's a blend of java and HTML, so those checkers flag hundreds to thousands of "errors" that aren't actually errors. So is there some resource to debug Roll20's version of HTML? *UPDATE May 14, 2024 THE CODE WORKS & HAS NO ERRORS according to Roll20 and VS Code.   So I don't need help fixing anything. The entire purpose of this thread was to discovery IF THERE EXISTS  A SINGLE PROGRAM TO CHECK FOR ERRORS WITHIN ROLL20 HTML . I was not asking for help with a specific problem. The answer to the question posed by this thread, and what I'm taking away from all of this, appears to be... Visual Studios Code can check for errors in the code presuming you have the right extensions installed. Roll20 HTML is a blend of both HTML and JavaScript with their use of Sheetworkers, causing normal linters that focus on one or the other to fail unless you piece-meal the code into it. I consider this issue closed, given the above conclusions.

AFAIK, there really isn't anything available other than entering liberal usage of console.log entries in the sheetworkers and watching the log output in the browser. ;-( Perhaps there will be better logging in the forthcoming Beacon sheet development system, but I haven't heard anything regarding those types of changes.

Aside from the script tag's type,  there's nothing about Roll20 character sheets that's wrong html/css/js. If you are getting hundreds of errors from a basic linter, then it's a good bet that you have hundreds of actual errors; if you're getting errors from something like prettier, then those are generally just style issues, not semantic issues. Methods of troubleshooting: Use a code editor like VSCode so the syntax highlighting will visually identify issues Get comfortable with the browser's inspector. This will log errors if your code crashes with line number links that will take you to your actual source code Use debugger lines in your code (and dynamically added debug points via the inspector) to step through your code and watch what it is doing as it does it.

RJGrayLight said: I checked out normal HTML code checkers, but Roll20 uses their own version of HTML so those checkers flag hundreds of errors that aren't actually errors. So is there some resource to debug Roll20's version of HTML and CSS? Refer to Scott's post, but I wanted to emphasise this: If you are seeing reports of errors, they are errors. In another thread, I'd post your script block. If none of your on('change' events are firing, there's a fundamental problem that is probably repeated across many works. There is another possibility: Many sheet worker errors affect only that sheet worker, but some might have a critical error that takes down the whole sandbox and causes all sheet workers to fail, even ones that are perfectly fine. This is very possible, but finding the error can be tricky. Here's the best method to zero in on the error: First, remove roughly half of your sheet workers. Cut that code, paste it somewhere safe, then delete it from the file. Now try to sheet again and see those sheet workers start working. If the workers don't start working, cut and delete half of what remains. Refresh and test. Repeat until the sheet starts working. If the sheet does start working, you know the error is in the code you just removed. So cut and remove all script code in the sheet, and paste back in only the code removed in your last step. Now with that code, go back to step 2. With this iterative process, you should find which sheet worker is causing a problem. Then you need to either fix it or remove that sheet worker, and once you have, put back all the rest of the sheetworkers and see if the sheet now works. If not, you have another sheet worker that needs fixing Go through the same process till you find it. And so on.

Scott C. said: Aside from the script tag's type,  there's nothing about Roll20 character sheets that's wrong html/css/js. If you are getting hundreds of errors from a basic linter, then it's a good bet that you have hundreds of actual errors; if you're getting errors from something like prettier, then those are generally just style issues, not semantic issues. When I tried using the proper HTML format for website design here in Roll20, it consistently broke the sheets. I learned that Roll20 has unique and specific things that most normal HTML scripts don't use, and as such get recognised as errors by any and all checkers that try to validate it as though it's a website. So nearly all of the "errors" found are ones that are flagging the Roll20 specific characters or checking for things that are required for web design but not Roll20 character sheet design. Also, from what I recall, Roll20 acknowledges this difference in their tutorial page on how to write a custom character sheet. So I haven't the foggiest where you're getting that claim from. lol Now, what is a "basic linter" or "prettier" when used as nouns like that? Are those are programs to check HTML code or scripts within Roll20? Please don't assume that I'm an expert at this, because I'm not. I've read the tutorial page, had a lot of help from someone else in writing the 9360 lines of code used in my custom sheet, and am adept at reading and editing code, but that's it. I struggle immensely with writing code because it's way too easy to miss a single semicolon or /, and when testing the sheet, having to scour hundreds or thousands of lines of code is just time-consuming. Hence my making this post to see if there's a roll20 specific html validator since the online ones treat html as webpage design instead of character sheet design. I also want to make this clear. The sheet was working perfectly until I added some new status conditions to it. There's an extremely good chance that I'm just missing a ; or } or similar, because this has happened before where the sheet stopped working because I forgot a single semicolon at the end of a line of code. But if so, I can't for the life of me spot it after scouring all the changes I made for hours. So I guarantee you that there aren't 515 errors as the free html validators are claiming because I didn't even add 100 lines to the code before it stopped working. Now with that said, I can definitely post the blocks where I made edits and additions to the code to see if anyone can help me spot the error(s). You mentioned in a separate thread, so I'll do it there. vÍnce said: AFAIK, there really isn't anything available other than entering liberal usage of console.log entries in the sheetworkers and watching the log output in the browser. ;-( Perhaps there will be better logging in the forthcoming Beacon sheet development system, but I haven't heard anything regarding those types of changes. Thanks for the info. Yeah, let's hope that something crops up in the near future, but I'm not gonna hold my breath in that regard. Shame there isn't anything though. Would be super convenient.

A linter validates "code." Here's one I use for JS <a href="https://esprima.org/demo/validate.html" rel="nofollow">https://esprima.org/demo/validate.html</a> Here's the actual JSLinter though:&nbsp; <a href="https://www.jslint.com/" rel="nofollow">https://www.jslint.com/</a> here's one to validate CSS: <a href="https://css-validator.org/#validate_by_input+with_options" rel="nofollow">https://css-validator.org/#validate_by_input+with_options</a> What they mean when they say the HTML isn't different is that it's not. You use the same tags as regular HTML, but some things are left off for character sheets (for example, you don't need the html or body tags). In the JS, there are some different things like "worker" instead of just text or something like that (it's been a while since I've touched a R20 sheet), and the JS is heavily restricted for security. If you're having problems with your on:change &nbsp;stuff, that's not likely a problem with your html, unless you have mistyped the attribute's name. &nbsp;But running your sheet worker through one of those validators will help you point the issue.

I've read the tutorial page, From those 9000+ line of code, how much is "just" html, and how much is the sheetworker/ javascript inside your &lt;script&gt; element? Ballpark,&nbsp; how many LoC was the "new status conditions" in html &amp; js? And have you seen this checklist: Character Sheet Development - Common Mistakes Following Community-written Sheet Dev Best Practices might make it easier to identify issues with sheets, and some of the points are specific to Roll20. What code editor are you using? If you try out VS Code, there is an extension for Roll20 sheet development that fixes bunch of issues like preserving javascript highlights in sheetworker element, and recognizes roll20's &lt;rolltemplate&gt; and some other elements. I'd recommend to at least try it Documentation: Have been reading the help center pages, or the community wiki pages(which are better) on Sheet Development ? Share the code block in this thread, I see from your profile there is some other thread but it seems to be deleted. Or did you figure it out? If this is resolved, please share in this tread what the solution was, so others might have help from it in the future.

RJGrayLight said: So I haven't the foggiest where you're getting that claim from. lol I was startled to see this response, especially since it's to Scott of all people. You will not find anyone who knows more about Roll20 character sheet design. Listen to people who know more than you do, when trying to find solutions to problems you don't understand. I also want to make this clear. The sheet was working perfectly until I added some new status conditions to it. There's an extremely good chance that I'm just missing a ; or } or similar, because this has happened before where the sheet stopped working because I forgot a single semicolon at the end of a line of code. But if so, I can't for the life of me spot it after scouring all the changes I made for hours. So I guarantee you that there aren't 515 errors as the free html validators are claiming because I didn't even add 100 lines to the code before it stopped working. HTML is extremely tolerant of errors. You can have hundreds of errors in a working sheet. Javascript is not, but you can still have a lot of errors and a working character sheet - while the sheet workers containing those errors don't work, the sheet still does. You haven't said anything about the specific errors you are receiving so it;s hard to say anything really constructive, but you have mentioned your own inexperience in this area (and have demonstrated it with some of the things you've said). I would urge you to listen to people trying to help you - people (not me, though) will help you if you are willing to take their advice.

So it seems there's a bug with posting screenshots, since every time I tried, it gave me a 404 error message claiming that that this page didn't exist. Apparently it duplicated all the screenshots, one normal size and one the same size as the screenshot itself, which caused the bug. How annoying. 1. Here's a Roll20 link and screenshot that proves that Roll20's HTML is not the same as web HTML. Of note, I've learned that Roll20's HTML is actually a blend of HTML and JavaScript (aka SheetWorkers), which is why it's so hard to find a working linters/code validators that provide accurate feedback. <a href="https://wiki.roll20.net/Building_Character_Sheets#HTML" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#HTML</a> 2. I spent 12 hours combing through all of the code using the guess-trial-error-guess method, and I found the errors. There were only 12 of them. &nbsp;3 missed semicolons, 4 words were missing 2 letters, 1 extra semicolon, 3 mis-placed ")", and I had to make a workaround for something since it wouldn't work the way it should have been able to work. After fixing them, the sheet is working perfectly as intended. So there were nowhere near the 515 to over 20,000 errors as reported by various linters/code validators. 3. To clarify, what was breaking wasn't the entire sheet/page. The break was that something was preventing any of the code from firing whenever a change was made to the page. For example, changing a 0 to a 1 on a status effect on the sheet should trigger some text to appear and update 3 different values, but the text wasn't appearing and the values weren't getting updated. That was the level of breakage occurring and why I was suspecting an error specifically within the on('change functions. 4. I have since learned that whenever you guys are referring to "Sheet Workers", you're talking about what I know as "Code Groups". ie, the groups of code that can be shrunk by pressing the arrows on the right-hand side of some code writers. "Sheet Workers" is apparently a term specific to Roll20 as far as I can tell, referring to the code groups that use JavaScript instead of HTML unless I'm mistaken, which explains why no code validators work since Roll20's version of HTML is actually a blend of HTML and JavaScript. Also, the page explaining sheet workers apparently isn't easily found unless you know to search for it. I'll try to use that phrase instead going forward now that I know what it means. 5.&nbsp; Thanks @Finderski for the information! I learned a new word thanks to you! lol Unfortunately though, the two resources you linked don't work for Roll20 character sheet HTMLs. I tried both with a fully functional sheet just to be sure. Here are the results, as well as one other that I found on my own. Esprima - Stopped at line 7, claiming that the use of &lt; at the start of a line was invalid. Roll20 requires that character at the start of nearly every line of code for things such as &lt;div&gt; , &lt;input&gt; , &lt;span&gt; , and more. This would mean that there are over 7,000 "errors", since that's roughly how many lines start with a &lt;. JSLint - Stopped at line 2, claiming that # was invalid and to use spaces instead of tabs. If this went through all the way, there would be over 20,000 "errors", as there's at least 2 tabs per line. CSS-Validator - Given that this is a CSS validator, and not an HTML validator, I'm not surprised this one didn't work, lol . FreeFormatter - found 517 issues within a fully functional script. 6. To answer anyone's queries about where and how I'm writing this code, here you go. &nbsp; &nbsp; Using a .txt document to write the code. &nbsp; &nbsp; Manually converting the .txt to .html. &nbsp; &nbsp; Placing the HTML into the Custom Sheet Sandbox provided by Roll20. &nbsp; &nbsp; When it's working as intended, I copy-paste the code into Campaign Settings &gt; Character Sheet Template &gt; Custom &gt; HTML Layout. (See image below) &nbsp; &nbsp; I then hit the "Save Changes" button, and I'm done. 7. Considering that Roll20 calls it HTML Layout, has a section within the Tutorial Page for Character Sheet Development calling it HTML, and it uses .html when posting it into the custom sheet sandbox tool, I'm fairly confident in using the term HTML to describe the code I'm using even though it uses elements of Javascript for the sheet workers as I've come to learn. That said, if there's a different, community-based term for what I'm talking about, then I'm open to adjusting my jargon to alleviate confusion. Just tell me the word(s) I should use instead, and I'll use them. 8. All of this code was hand-written by myself and a friend of mine, so nothing was copy-pasted from another person's work to the extent of my knowledge. 9. @vÍnce I want to thank you, as it appears that your comment is the most accurate, if admittedly least helpful, one so far. And while I also hope that something of this nature comes alongside new updates, I'm not holding my breath. 10. @GiGs when you claim that HTML is very tolerant of errors, are you referring to bloat code and comments within the code? You know, calls and functions that never get used or are similarly irrellevant, excess use of the enter key or comments, invalid characters within comments, that sort thing? Because if not, then my experience has been quite different across the board. Entire sections of web pages, program code, and Roll20 character sheets become inoperable and break because of a single stray, misplaced, or forgotten character. And the higher up in the process it is, the more it breaks. Sure, it doesn't necessarily break the entire page, but it breaks anything tied to whatever is causing the error, which can include the entire page. 11. I'm a self-taught coder. As such, I don't know all the official jargon that's used by others, likely making up my own terms for things since I've not had formal training, let alone regarding the Roll20 specific jargon, as detailed in point 4 with the roll20-specific term "Sheet Worker". This is why I asked for people to not assume that I understand everything you say. This is also why I made this post, so that I can have reactive feedback to help me learn Roll20's specific code instead of having to guess-trial-error-guess my way through it.

GiGs said: There is another possibility: Many sheet worker errors affect only that sheet worker, but some might have a critical error that takes down the whole sandbox and causes all sheet workers to fail, even ones that are perfectly fine. This is very possible, but finding the error can be tricky. Here's the best method to zero in on the error: First, remove roughly half of your sheet workers. Cut that code, paste it somewhere safe, then delete it from the file. Now try to sheet again and see those sheet workers start working. If the workers don't start working, cut and delete half of what remains. Refresh and test. Repeat until the sheet starts working. If the sheet does start working, you know the error is in the code you just removed. So cut and remove all script code in the sheet, and paste back in only the code removed in your last step. Now with that code, go back to step 2. With this iterative process, you should find which sheet worker is causing a problem. Then you need to either fix it or remove that sheet worker, and once you have, put back all the rest of the sheetworkers and see if the sheet now works. If not, you have another sheet worker that needs fixing Go through the same process till you find it. And so on. Now that I finally figured out why I couldn't write messages, now I can properly thank you! lol Thanks so much for this process! This is ultimately what I ended up doing within the custom sheet sandbox after I started back from scratch (I had made too many edits). It still would've been nice if there was some program to do this automatically, but as far as I can find and tell, there aren't any so this is the best option when used in conjunction with the custom sheet sandbox tool within Roll20. Though the term "sheet workers" admittedly confused me since I wasn't sure what that meant. In hindsight I suppose that means what I call "groups". (As determined by &lt;div&gt; &lt;span&gt; and similar.) I'm an entirely self-taught coder, so I definitely don't know all of the correct or advanced jargon. So if groups = sheet workers, then I'm on the same page, and it helped me greatly. And if it doesn't, well, it still helped me despite my confusion, so thanks all the same. :)

Something to keep in mind across the board. All languages, be it verbal or written, have their own distinct dialects, slang, and accents. A word in one place can mean something entirely different in another place . A great example is the word "fag". In the UK that's another word for a cigarette while in America that's an insulting slang. And this is true for coding languages as well. HTML, JavaScript, CSS, and more are languages with different uses in different places just as much as English, French, or Spanish are. The only difference is that the different places for coding languages are different programs and websites. The HTML for a cabinet making software would be drastically different from the HTML for a website design. And both would be, and are, different from Roll20's use of HTML. It may use the same base-language, but it's a specific use of the base language, it has it's own slang, accent, and dialect that isn't used anywhere else and that doesn't easily make sense to anyone who doesn't already know it. Just as someone from Texas would struggle to understand a Bostonian's accent, so too would someone versed in web design html struggle with Roll20's html. Ere's a zampa fuh y'all! 'Less we'r'n from da Baiyou, Texas, o' Bahsin, as I'a, we'r'n gonna 'ave a misunnasannin! The line above is entirely in the English language and is both grammatically and phonetically correct for the respective regions the words come from (Texas, Boston, and Louisiana). Now consider the difficulty of translating that one sentence, and think about how difficult it would be to read, edit, then write an entire book written like that. T hat's what's happening with Roll20's version of HTML for character sheets for me. It's not impossible, but it's time-consuming and difficult without outside assistance. Which is why I asked the community if there was something that could help me by providing reactive feedback. I was hoping to avoid resorting to the guess-trail-error-guess method since that's the slowest possible method for learning a new language or dialect, but it seems that's my only option besides the non-reactive and limited assistance that is the textbook &nbsp;tutorial pages, from what I'm gathering.

RJGrayLight said: 4. @Finderski unfortunately the two resources you linked don't work for Roll20 character sheets. I tried both with a fully functional sheet just to be sure. Esprima - Stopped at line 7, claiming that the use of &lt; at the start of a line was invalid. Roll20 requires that character at the start of nearly every line of code for things such as &lt;div&gt; , &lt;input&gt; , &lt;span&gt; , and more. This would mean that there are over 7,000 "errors", since that's roughly how many lines start with a &lt;. JSLint - Stopped at line 2, claiming that ## was invalid. That's very literally the 5th character on my entire sheet, marking the start of my sheet. Of note, I did notice that this was a CSS validator, and not an HTML validator, so perhaps that the reason. The problem, based on the screenshots, is it looks like you pasted the HTML in as well; the JSLinter only takes the JS and the CSS linter only takes CSS. If you pasted the entire character sheet in, HTML included, that's going to spew out all kinds of errors. When using the JSLinters, only paste in the sheet worker javascript code without the html. I know those work, as I used them all the time when I was developing character sheets for Roll20. 😀&nbsp;

Finderski said: The problem, based on the screenshots, is it looks like you pasted the HTML in as well; the JSLinter only takes the JS and the CSS linter only takes CSS. If you pasted the entire character sheet in, HTML included, that's going to spew out all kinds of errors. When using the JSLinters, only paste in the sheet worker javascript code without the html. I know those work, as I used them all the time when I was developing character sheets for Roll20. I just copy-pasted what I believe to be a single sheetworker into both Esprima and JSLint. It's from my fully funtioning Roll20 character sheet btw. Both are claiming that all tabs and single quotes are invalid characters, and are for whatever reason claiming that ending the code with a semicolon is registering as ending the code with " (end) ". JSLint in particular claims that there were 159 errors before it was forced to stop (granted at the end) in this small bit of code that is, again, from a fully-functioning sheet. Here's the sheetworker I copy-pasted into both esprima and jslint. Maybe I'm still doing something wrong when trying to use the linter, but idk what if so. Also, I made some edits to my earlier post as I learned more about Sheet Workers. Apologies. function setCoreStats() { getAttrs(['hobbyOne', 'hobbyTwo', 'profession', 'strMod', 'agiMod', 'endMod', 'perMod', 'intMod', 'chaMod', 'lukMod', 'ageBonus', 'sexBonus', 'ageBonus_max', 'BMI', 'conWet', 'conPoison', 'conScared', 'conArm', 'conLeg', 'conRib', 'conFreezing', 'conBurning', 'conDrunk', 'conStoned', 'conBlind', 'conDeaf', 'conCharm', 'conInfection'], function(v) { let st1 = 4 + (parseInt(v.strMod)||0); //strength let st2 = 4 + (parseInt(v.agiMod)||0); //agility let st3 = 4 + (parseInt(v.endMod)||0); //endurance let st4 = 4 + (parseInt(v.perMod)||0); //perception let st5 = 4 + (parseInt(v.intMod)||0); //intelligence let st6 = 4 + (parseInt(v.chaMod)||0); //charisma let st7 = 4 + (parseInt(v.lukMod)||0); //luck let poi = parseInt(v.conPoison)||0; let wet = parseInt(v.conWet)||0; let arm = parseInt(v.conArm)||0; let leg = parseInt(v.conLeg)||0; let rib = parseInt(v.conRib)||0; let sca = parseInt(v.conScared)||0; let fre = parseInt(v.conFreezing)||0; let bur = parseInt(v.conBurning)||0; let bli = parseInt(v.conBlind)||0; let dea = parseInt(v.conDeaf)||0; let chm = parseInt(v.conCharm)||0; let drk = parseInt(v.conDrunk)||0; let sto = parseInt(v.conStoned)||0; let inf = parseInt(v.conInfection)||0; //adjustments due to Status conditions st1 -= 0; st2 -= drk; st3 -= poi; st4 -= sca + (2.5 * bli) + chm + (2 * dea) + drk - sto; st5 -= sca + chm + sto + (2*drk); st6 -= sca + wet + (2 * chm) + Math.round(fre/3) + sto - drk; st7 -= sto - drk; switch (arm){ case 1: st1 -= 2 st2 -= 1 break; case 2: st1 -= 5 st2 -= 2 break; }; switch (leg){ case 1: st2 -= 3 st3 -= 1 break; case 2: st2 -= 7 st3 -= 3 break; }; switch (rib){ case 1: st1 -= 2 st2 -= 2 st3 -= 1 break; case 2: st1 -= 5 st2 -= 5 st3 -= 3 break; }; switch (inf){ case 1: st1 += 0.1; st3 += 0.1; break; case 2: st1 += 0.5; st3 += 0.5; st2 -= 0.25; st6 -= 0.25; st4 -= 0.25; break; case 3: st1 += 1; st3 += 1; st2 -= 0.75; st6 -= 0.75; st4 -= 0.75; break; case 4: st1 += 2.5; st3 += 2.5; st2 -= 2; st6 -= 2; st4 -= 2; break; case 5: st1 += 4; st3 += 4; st2 -= 3; st6 -= 3; st4 -= 3; break; case 6: st1 += 5; st3 += 5; st2 -= 4; st6 -= 4; st4 -= 4; break; case 7: st1 += 6; st3 += 6; st2 -= 5; st6 -= 5; st4 -= 5; break; };

Link to the main sheetworker page is stuffed into lots of pages, and is imentioned in the sidebar seen on essentially every sheet dev-related page, and if searched would have redirected to it: <a href="https://wiki.roll20.net/Sheet_Worker" rel="nofollow">https://wiki.roll20.net/Sheet_Worker</a> Almost every term we use here has a page or a section on the wiki, which either explains orllinks to explanation of the term, so not knowing a term isn't and obstacle if you look up the term in the wiki (and then the web). I was selftaught too, but I also written most of the documentation so terms and concepts can be found with a search looking at the sheet dev navbar on the right side the related pages usually have. And please, please use VS Code or any code editor, and edit/save just the file as a .html directly, why would you save it as a .txt as a halfway point? If you use Google chrome, you could use try the Sheet Autouploader browser extension.&nbsp; It would upload&nbsp; your edited code file every time you save it on your computer, if you save as a .html file (as it would be easiest anyway).

And based on your workflow description, it sounds you save and test your sheet in a normal game which is slower, the actual sheet sandbox you can just upload the file each time from the same page, and the Autouploader extension would automatically upload it for you. This is how the Sheet Sandbox Tools look like: You can find sheet sandbox at: <a href="https://app.roll20.net/sheetsandbox" rel="nofollow">https://app.roll20.net/sheetsandbox</a> And at this point it be easier if you share the full code with us. Given that 9000 lines of code is probably too much for the forum posts,&nbsp; something like pastebin.com &nbsp; is a quick and easy way to share code text with zero login, just copy &amp; share the link you made. A github gist would be somewhat better, as it would be possible to have an easy version history between iterations, and have the highlight in place.

Your sheetworker was missing some closing brackets and closing parenthesizes, according to my code editor. Maybe you had them couple lines down and just didn't past it in the example? So the last two lines: break; }; probably should look like: break; } }) } If you look at this compacted version of the code as it looks like in my VS Code editor, the color-matched brackets should make it easier to see what was missing. the " function(v){ " , " getAttrs( " , and " function setCoreStats() { " was missing closing bracket/parenthesises. Bracket pair colorization really help with finding missing/extra brackets in code. VS Code has it on by default, and pretty sure many other editors also offer it as an option too. Even the browser-version of VS Code have color brackets on by default, if you're against installing it on your computer.

Andreas J. said: And based on your workflow description, it sounds you save and test your sheet in a normal game which is slower, the actual sheet sandbox you can just upload the file each time from the same page, Andreas J. said: And please, please use VS Code or any code editor, and edit/save just the file as a .html directly, why would you save it as a .txt as a halfway point? I'm guessing you didn't see that I wrote out the exact process I use already. Admittedly it was wedged between two screenshots so was easy enough to miss. Here it is again. &nbsp;&nbsp; 1. I use a .txt document to write the code. &nbsp;&nbsp; 2. I manually convert the .txt to .html. &nbsp;&nbsp; 3. I place the HTML into the Custom Sheet Sandbox provided by Roll20 to test the code. &nbsp;&nbsp; 4. When it's working as intended, I copy-paste the code into Campaign Settings &gt; Character Sheet Template &gt; Custom &gt; HTML Layout. &nbsp;&nbsp; 5. I hit the "Save Changes" button, and am done. So the .txt is literally the first step, and I almost immediately convert it to a .html so that I can test it in the custom sheet sandbox. Then when I deem it complete I upload it to my game. As for using a non-Roll20 code editing program for coding character sheets, again, this is the entire purpose of this thread because there doesn't appear to exist any one program that works with Roll20's unique version of HTML that blends HTML and Javascript, let alone a program to check it, that won't encounter hundreds or thousands of errors.

Andreas J. said: Your sheetworker was missing some closing brackets and closing parenthesizes, according to my code editor. Maybe you had them couple lines down and just didn't past it in the example? Yes, I didn't copy-paste the final bracket because there are another hundred or so lines after that in the full function. I should have added it after copy-pasting. Even still though, you're missing the point. Roll20 sees no errors in that code, yet that program claimed there were 159 errors detected. Most prominent were the claims that tabs and apostrophes were invalid characters when they simply aren't. So that program clearly doesn't work unless you expect me to rewrite all 10,000 lines of code using spaces instead of tabs and replacing all apostrophes with quotations when 1, I don't have to for it to function in Roll20, and 2, there's an significant chance that doing so would break the code and prevent it from working in Roll20. Not to mention, but since I didn't comb through what all 159 supposed errors in that code were, there's a good chance that it would still pick up on other supposed "errors".

This thread has spiralled and is no longer anywhere near relevant to what I was intending it to be. So for the last time... THE CODE WORKS &amp; HAS NO ERRORS according to Roll20 . So I don't need help fixing anything. The process I use works, whether you like it or not. So I don't need suggestions on how to change my code-writing process. THE ENTIRE PURPOSE OF THIS THREAD WAS TO DISCOVER IF THERE EXISTED A SINGLE PROGRAM TO CHECK FOR ERRORS WITHIN ROLL20 HTML . More than half the posts here have been about anything but the intent of this thread. This thread was not intended to do the following... Critique other people's coding methods. Provide advice on how to fix a fully functioning code. Talk about CSS code. To remind the people who wrote the tutorials about what their own tutorials say. To educate people about how different programs can have their own takes on the same code. In the end, I've tried all the programs that that have been suggested so far, as directed, and not a single one has worked as claimed. Every single program has claimed hundreds, if not thousands, of errors in fully functional code, the vast majority of "errors" being invalid characters that roll20 recognises as valid or even essential to operate. The answer to the question posed by this thread, and what I'm taking away from all of this, appears to be... There is no one program that can check for errors within the Roll20 HTML. Roll20 HTML is a blend of both HTML and JavaScript with their use of Sheetworkers. The only way to use a program to check for coding errors is to piece-meal the code into two or more different programs and use a far more restrictive format than Roll20 requires.

There are programs that can check for errors within the Roll20 HTML, but you will not recognise them. You will not find any program that reports errors valid, if you insist on disregarding their error reports. The simple fact is: HTML will run even despite errors, even though the errors are still there and will be reported. You mentioned earlier that Roll20 HTML is weird because it includes JS, to which I'd point out that you will get less JS in Roll20 (and it's more limited too) than you get in typical HTML. This post also demonstrates how you will not listen to people offering you help. The text you have trimmed there is telling you one thing, and you are ignoring what it tells you. I'd love to help you, but I don't think anyone can, because you are refusing help (and explanations) when it is offered.

Was going to say something else, but GiGs made a better point. I tried to help &amp; give advice, but seems it's no good, so I'll see myself out.

GiGs said: Many sheet worker errors affect only that sheet worker, but some might have a critical error that takes down the whole sandbox and causes all sheet workers to fail, even ones that are perfectly fine. This is very possible, but finding the error can be tricky. Here's the best method to zero in on the error: First, remove roughly half of your sheet workers. Cut that code, paste it somewhere safe, then delete it from the file. Now try to sheet again and see those sheet workers start working. If the workers don't start working, cut and delete half of what remains. Refresh and test. Repeat until the sheet starts working. If the sheet does start working, you know the error is in the code you just removed. So cut and remove all script code in the sheet, and paste back in only the code removed in your last step. Now with that code, go back to step 2. With this iterative process, you should find which sheet worker is causing a problem. Andreas J. said: If you try out VS Code, there is an extension for Roll20 sheet development that fixes bunch of issues like preserving javascript highlights in sheetworker element, and recognizes roll20's &lt;rolltemplate&gt; and some other elements. I'd recommend to at least try it. Finderski said: A linter validates "code." Here's one I use for JS <a href="https://esprima.org/demo/validate.html" rel="nofollow">https://esprima.org/demo/validate.html</a> Here's the actual JSLinter though:&nbsp; <a href="https://www.jslint.com/" rel="nofollow">https://www.jslint.com/</a> here's one to validate CSS: <a href="https://css-validator.org/#validate_by_input+with_options" rel="nofollow">https://css-validator.org/#validate_by_input+with_options</a> I've quoted all of the posts that have recommended programs (Not including repeat recommendations) or methods for checking for errors within code. Of note, the process that GiGs recommended is the one I ended up using in the end. It wasn't quite what I was looking for, but it helped and worked, despite being time-consuming. Please tell me though, which of these programs is meant to check for errors within HTML? Because I'm seeing a program to check CSS, one to check JavaScript, a browser extension to make uploading code to roll20 easier, and a code editor that color-codes the code that includes an extension for Roll20 (though I confess not understanding what the extension is meant to do). GiGs said: There are programs that can check for errors within the Roll20 HTML Please, tell me what they are! That's literally the entire point of this thread! I'm not trying to be difficult, truly. I'm just not seeing where anyone has provided me with something that can do that! All I'm looking for at this point, is for someone to suggest a program that I can copy-paste my Roll20 HTML into that can check it for errors. Of note, since you guys were talking about it so much, I asked an intern at work if they knew anything about Visual Studios, and they informed me that all of my colleages use that or Dreamweaver. I've been told since 2013 that I only need to use a basic text editor and that VS Coder and Dreamweaver are just glorified text editors that color bits of the code and nothing more. And since I didn't think that was particularly useful, I never thought twice about it. Upon learning that all my coworkers use it though, I downloaded Visual Studios Coder to see what it was all about. Now unless I'm misunderstanding the problems section at the bottom, it's not recognising any problems. "No problems have been detected in the workspace." And all I did was copy-paste the current, fully-functioning code without changing a thing, btw. So is this program actually something that can detect errors in the code? Because if so, I'm sorry for not understanding why it was being recommended. Until I tried it and saw that bit at the bottom, I genuinely believed my seniors at work, believing it to be a glorified text editor that coloured code and nothing more. But if it also checks for errors in the code, that changes everything! It also tells me that my colleages have been intentionally sabotaging me since 2013! (If this really is the case, then I'm quitting my job. Being sabotaged for over a decade is inexcusable!) So am I understanding the "Problems" section correctly? Is it automatically checking the code for errors?

You can edit html, css, and js using a basic editor like notepad++ and many people do that.&nbsp; A basic editor is most often just that, a basic editor.&nbsp; There is usually little to none in the way of checking code for errors.&nbsp; You could copy/paste your code from a basic editor into an appropriate online validator/linter to check for errors.&nbsp; And some people do that.&nbsp; OR, you can use a program like vscode that has many features built-in (ie language-specific intellisense ) or extensions (eslint, prettier, roll20 sheet dev, etc.) that can be installed so that this can be done within one program.&nbsp; And many people do that.&nbsp; Then you can edit locally in vscode, use a Custom Sheet Sandbox game with the Roll20 API and Sheet Autouploader browser extension to see your local changes automatically update the sandbox game.&nbsp; You should also use the browser's Dev Tools to help identify issues and experiment within the browser.&nbsp; Use the dev console with appropriate logs in your sheetworkers (this is just embedded javascript btw) to output to the console when you are testing things.&nbsp; HTML and CSS are handled by the browser in such a way that if the browser detects errors it will attempt to fail gracefully. This is great to keep the www up and running, but it can be difficult to know that something is actually broken and using a fall-back to prevent crashes.&nbsp; You will have to use your best judgment and search-fu to determine if any reported warnings and or errors are problematic and make adjustments accordingly. There has been lot's of great advice given in this thread and just keep in mind that the people here really do want to help.&nbsp; Good luck.

Coming back to this after some vacation and being swamped with work. The problem with the "errors" that JSLint, CSS Validator, and the formatter were throwing for you, is that those Linters are extremely opinionated (meaning that they have very specific ideas about what makes good code). You can spend a lot of time setting them up to Lint the way you want to, but by default they throw all sorts of errors on things that are just styling issues (e.g. I prefer spaces to indent my code, but lots of peoples like tabs). I would highly recommend using VSCode, or something similar as it provides true basic linting out of the box (without checking your code style).