Live Editing HTML and CSS With Chrome DevTools

Chrome DevTools is a powerful suite of web development tools built right into the Chrome browser. One of the most useful features of DevTools for web developers is the ability to live edit the HTML and CSS on a page. This functionality allows any developer, even those with weaker HTML and CSS knowledge, to quickly prototype and iterate on potential changes to a web page.
While working on Lucidchart, one of my recent projects was to add some check marks into the inputs where users fill in their billing information in order to convey immediate feedback when the users entered properly formatted and valid information. Even though I am more comfortable working in our backend code than I am with CSS and HTML, I was able to easily implement these check marks with the power of live editing.