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.
Editing HTML using the inspector tool
There are two quick ways to open the inspector. First is to open DevTools with F12, select the “Elements” tab, and click the cursor icon in the top left. The second, faster way is to use the keyboard shortcut Ctrl+Shift+C. If you work regularly in a Linux environment, there’s a good chance you’ve used this shortcut on accident many times when you meant to copy text!
Once the inspector is active, you can locate the HTML of any element on the page by clicking on it. Chrome will also show you positioning and sizing information of elements as you hover over them.
Once an element is selected, you can interact with it in all kinds of ways. By right-clicking on the HTML in the “Elements” tab and selecting “Edit as HTML,” you can make live edits to the markup of a webpage that Chrome will immediately render once you’re done editing.
Telling DevTools that you are done editing can be tricky. Your first instinct may be to hit the Escape key, but this will back you out of editing while discarding your changes. You can ensure your changes save by hitting Ctrl+Enter or simply clicking outside of the text box you are editing.
HTML edits can be undone or redone using the normal Ctrl+Z and Ctrl+Y hotkeys. They will also be lost upon page refresh unless you enable persistent editing.
To start my checkmark project, I began by creating a prototype element as a place to test the tweaks I wanted to make. Using Chrome DevTools’ live edit functionality, I added a placeholder div containing only the letter “X” as my temporary makeshift checkmark.
Obviously, this is a very poor excuse for a check mark, but it’s enough to help me quickly identify some issues up front. For one thing, the check mark is in completely the wrong spot. Additionally, it messed up the alignment of the other elements on the page. Both of these issues can be resolved with some CSS. Luckily, Chrome also provides some great tools for quickly prototyping CSS changes using DevTools.
Editing CSS from the “Elements” Tab
To the right of the HTML view in the “Elements” tab, there is a view showing a breakdown of what CSS rules apply to the selected element. This view can be extremely helpful for debugging a plethora of CSS bugs. For example, because you can see what rules apply to the current element, you can identify if an element is getting CSS rules that you didn’t expect or is missing CSS rules you thought applied to it. The CSS view also shows when a style applied by a matching rule is being overridden by a more specific rule.
The CSS view provides some very helpful live editing functionality. Every style has a check box next to it, letting you enable or disable certain styles and see how they affect the elements on the page. You can also apply new styles to a specific element, an existing CSS rule, or a brand new CSS rule. All of these changes are reflected immediately on the page.
Chrome DevTools provide some convenient functionality to make live editing CSS easier to do. The most helpful for those less familiar with CSS is autocomplete. As you type in the name of your style, Chrome will suggest likely matches. Once you enter the name of the style, Chrome will also help you use the correct value for that style. For enumerated styles, like “position” or “display,” Chrome will show the legal values for you to choose from. For numerical inputs, you can use the up and down arrows to increment the value by 1 without having to re-type the units.
As with live editing HTML, you can undo or redo your live CSS changes with Ctrl+Z and Ctrl+Y.
Using DevTools, I was able to very easily figure out a combination of CSS rules that aligned my pseudo-checkbox where I wanted it. The process involved a bit of trial and error, but live edit made the iteration cycle very short, which was particularly helpful for a CSS novice like me.
Conclusion
We’ve only scratched the surface of what Chrome DevTools’ live edit functionality is capable of, especially in the CSS domain. These basic tips are always invaluable for me when I go to debug a CSS issue or quickly prototype a new CSS change.
[…] Link: https://www.lucidchart.com/techblog/2018/05/01/live-editing-html-css-chrome-devtools/ […]
[…] Live editing is among a suite of developer tools that come bundled with the likes of Chrome and Firefox. It’s used by developers to troubleshoot problems or work out the ID of a design element on a page so it can be located within the code. […]
nice
Thats exactly what I was looking for! Great article, thanks for sharing!
Great article! Editing CSS code is very easy 🙂
Great job! Thank you for this article!
I love Chrome DevTools! That’s exactly what I needed! Thank you!
some way to automate an edit every time the same page loads?
Absolutely must have everone dev ops or tester.
great! but when I try to print, it prints without the changes?
You mentioned persistent editing. Where could it be activated?
Really great article
Thanks for this informative article
Hi, thank you so much for this great article!
It seemed a perfect solution for my translation issue but, unfortunately, this is not working on my WordPress website/plugin. I do manage to change them, but when refreshing goes back to the previous version.
Any suggestion?
I did also use a translator plugin (Loco) but although is declared 100% fully translated, I still have those words of the plugin that I am not able to translate.
Nice article
Hi Stephen! Great Article about live editing, exactly what I was looking for! Thank you!
Also dont forget to check Chrome DevTools Console for possible errors. While people mainly use it to find errors and log messages, it is also a great playground for you to try out Javascript code.
People wondering how to make it persistent, in the section where you toggle styles with the checkbox each section has a line in the top right the looks something like: “style.css?ver=1.1.1:(line-number)”. Hover or click the link and you can see the name and location of the style sheet you need to edit with the changes you’ve made if you want to make them permanent. Structural edits obviously need to be done to the page’s html document, if you don’t know where that is you’re probably in over your head or using a CMS like WordPress, in which case the pages section of the dashboard should have an option to edit as html. If you make changes in the stylesheet and the page doesn’t change, it’s usually because you’re viewing your browsers cache. With the devtools open (F12), right click the refresh button on your browser — Empty Cash and Hard Reload (faster method is Ctrl + F5 or Ctrl + Shift + R). That’ll actually solve most client side webpage issues in general.
It should go without saying, but obviously you can’t make permanent changes to someone else’s webpage. If you want to make permanent changes for yourself use an extension like Stylus.
Really Great Post. I had suspicions for years but wasn/t sure how they were doing it. I also am still curious how some of the Auctions I have seen recently even. List the domain as new but then say Mark up the earnings 4x-6x profit. Which makes zero sense. If its truly new how does it have profit and value as such???
I suspect there is a 3rd Trick to watch for its the domain or site History???
You can make those changes permanent in your computer by coding a Chrome plugin and installing it in your Google Chrome. The plugin would run everytime you load a webpage and it can contain an URL identification code at the beginning of the code so that the plugin can do different things depending on which page you are navigating in.
it seems to be very good tool for testing!
I use Opera. It has very similar tools.
Its very useful.