How do you get anything done with the persisting previewer bug?

Hello everybody! I can't for the life of me figure out how you do even basic character sheets without the previewer for custom sheets working. Across three different browsers (chrome, firefox and even edge) the css just doesn't get rendered half of the time. Now it works, then it doesn't. This bug is over a year old. How do you get around this? I'm so sick of refreshing, reloading, lauching the game, clearing the cache and doing all kind of nonsense just to get this to work.  When I look at some of the complex, fantastic sheets people are putting online, I really wonder what their setup is. One thing seems obvious to me: they don't use that previewer. So what DO people use? Is there a way to develop this offline and inject the roll20 scripts/css to get a realistic preview? Somewhere in a bug thread someone mentioned to have set something up using gulp, but gave no details. Any help is appreciated.

I make the Shaped sheet. I run a script which uploads my html & css and then I control+refresh my campaign to view it. The script helps a lot. It's still not the best option, but it's workable.

Unfortunately, it's what you already noted (although, I typically don't clear my cache...I'm just lazy like that)—I write in an external text editor, then save and reload the game. I have two tabs open, though, one for the game and one for the R20 editor. That way, I save in one tab, click over and refresh in the other. Lately, I've been fortunate, though; the previewer has mostly been working for me lately, using Chrome. But I still use the method above.

2 monitors for me. I write in one, refresh in the other, back and forth and back and forth. It's slow, but it works.

yep I just keep plugging away the hard way. sometimes the campaign setting screen freezes up on chrome and i have to reboot the whole computer.

SFX said: 2 monitors for me. I write in one, refresh in the other, back and forth and back and forth. It's slow, but it works. This. Also, to speed things up, you can edit the CSS live via the browser's DOM inspector without having to refresh the VTT. Edit CSS in the inspector until it looks right, then put the same CSS into the actual file.

Brian said: ... Also, to speed things up, you can edit the CSS live via the browser's DOM inspector without having to refresh the VTT. Edit CSS in the inspector until it looks right, then put the same CSS into the actual file. What is this black magic you speak of? How do you do that?

on most browsers, hit F12 to bring up the developer console. You'll see "console" (where the javascript outputs to) and "DOM" or something that shows the source html, were you can press an arrow button, then move your mouse around on the page and it will highlight different areas you are hovering over, then click there to jump to that section in the source html window.

Even quicker, you can right-click on an element in your character sheet and select "Inspect" to open the DOM inspector with that element already selected, so you don't have to find the character sheet among all of the other HTML of the VTT. Here you can see a screenshot of the Exalted 2e sheet with the Chrome DOM Inspector window open. When you select an element, the right wide of the window has a "Style" tab with all of the CSS currently applying to the selected element, which you can edit (including editing the inline style). The "Computed" tab will show you every CSS property value for that element. When you hover over an element with your mouse in the HTML view on the left, it will highlight the element on the VTT so you can see what you're hovering over, and it will show you the outside dimensions (element + margins), and highlight the margins (orange in Chrome) and padding (green in Chrome). In the Style tab, you can see some properties have strikethrough, indicating that they're being overridden by something else. You can also uncheck properties (not shown, because the checkboxes appear on-hover) to prevent them from applying to anything. All chances made in the Style tab will be reverted when the page is reloaded.

Awesome! I'll have to give that a try... :)

Oh my! That is great advice! I was so focused on the preview that I totally forget about the edit mode of the browser developer tools! Thanks to all of you for your feedback!

Lindan said: Oh my! That is great advice! I was so focused on the preview that I totally forget about the edit mode of the browser developer tools! Thanks to all of you for your feedback! There's a preview mode? lol