Is there a faster/easier way to test HTML/CSS changes for Photoshop plugins, analogous to Developer Tools for the internet?

Photoshop UXP Plugin API
1

For CSS adjustments, I feel like I’m coding in the dark. That’s because, for all web design I’ve done, I’m able to just use the developer tools to modify the CSS styling of various elements and immediately see the changes to get it right. With my plugin development, so far, everything is just – write the code, see what it looks like, try again until you can hopefully get it right. It makes for a much slower rate of progress.

Is there some way I can get the same functionality as I’d get for the Developer Tools on Chrome, or something similar? It would MASSIVELY speed up the HTML/CSS side of things for me. I’m pretty good with CSS – but I’m not THAT good, to where, I can just, free-ball write the code in VS Code from scratch to get it looking perfectly using just my knowledge of what to write. Some kind of DevTools thing would really help.

Thanks!

2

Just realized that the Debug section in the UXP Developer Tool has exactly this functionality… JESUS this will make things easier. I’ve been having to actually use my BRAIN and KNOWLEDGE to write CSS,which has been punishing.

3

Thanks for the feedback @king_anton. Also try the watch option. UDT will keep listening to the changes and update your plugin. So you can see changes in your plugin as you make code changes.

Note: this however will not reload the manifest changes, just the HTML,JS and CSS. For manifest changes to update you will need to call load again.

2 Likes