I sometimes jump into the Chrome DevTools when I need to make small tweaks to a web page or tell developers that they need to fix a design bug.
It’s a fast and easy way to see and know exactly what CSS code is needed to make the changes, but I’m always mortally afraid of losing these changes on accidental reload, and there doesn’t seem to be an easy way to share with developers or include the changes in a ticket tracking system like Jira.
After some research and this helpful thread, I’m happy to report that there are at least 3 tools out there that allow designers to make quick UI tweaks, save and share those changes.
1. Chrome DevTools Workspaces
If you’re already tinkering with HTML and CSS in Chrome DevTools, you’d be delighted to find that it’s quite easy to save DevTools changes onto your computer and share these files.
Save the web page you’d like to tweak to a folder on your computer. Inspect the local web page with Chrome DevTools. In DevTools, under Sources > FileSystems, select Add Folder to Workspace and Chrome would automatically sync the changes you make in DevTools to the specific files. You then can share these files with developers or include them in a ticket.
Check out this tutorial from Google on how to set up your Chrome DevTools Workspaces.
The tutorial seems long and a little complicated, but I was able to save my project in under 10 minutes, so I think it’s worth a try!
2. CodePen Templates
CodePen is a really nifty tool that allows you to experiment with HTML, CSS
Set up a CodePen template with your company’s CSS and Javascript files. Then every time you need to tinker a page, use the specific template, paste in the HTML and you can start making changes to the rendered page.
Everything can be saved and shared like any pen on the CodePen site.
I set up a template in a matter of minutes. Detailed tutorial coming soon!
3. Visual Inspector Plugin
Visual Inspector is a Chrome plugin that allows you to edit elements on a live website with a designer friendly tool.
You can edit and export screenshots with the free version. Monthly subscriptions apply if you’d like to save and share changes, along with other features.
I didn’t get to try this tool since I got my DevTools workspaces set up. You can download the free version of the plugin here and let me know how it goes!
I hope you get to try out some of these tools, save some time and get the design changes you want implemented!