The Google Chrome browser includes Developer Tools to assist with troubleshooting and developing your website. For instance, by using its device toolbar you can easily preview websites as they would display on various mobile devices. There are also tools that allow you to Inspect Elements on a page and edit the CSS live, without affecting the experience for other visitors interacting with your website. This can be useful in developing and previewing CSS modifications to your existing website prior to making those changes live. In this guide, you will learn how to use Google Chrome’s Developer Tools to inspect an element, modify CSS, and preview CSS changes in your browser.
Access Chrome Developer Tools
Open the Google Chrome browser application on your computer.
NOTE: If your computer does not have this browser, you will need to install Google Chrome in order to utilize the DevTools included.
Visit your website and navigate to a page that you want to make changes on.
To open Google Developer Tools you can follow any of the steps below:
- Press the F12 key.
- Select the Menu icon, hover over More Tools, and click on Developer tools.
- Press Ctrl + Shift + i for Windows/Linux (or command + option + i for Mac).
- Right-click on an element on your website page and select Inspect.
Now that you are familiar with accessing Google Chrome Developer Tools, you will be able to inspect CSS elements to modify them live.
Inspect an Element
Inspecting an element helps to identify the code needed to modify a particular object on your website. Google Developer Tools simplifies this process by displaying and highlighting the specific code that renders the element being inspected. Follow either of the steps below to learn how to inspect an element.
Open Google Developer Tools and click the Select Element icon from the top left.
NOTICE: As you hover over elements on your page, they will be highlighted.
Click on any object (text, heading, image, etc) that you would like to customize.
NOTICE: The Elements tab displays and highlights the HTML for the element you click on.
Inspecting an element is the first step to implementing the code needed to modify the object you want. However, DevTools also allows you to modify CSS live.
Making Live Changes to CSS
Google Chrome provides the ability to make changes to the CSS live from within the DevTools Console. This ensures that you are able to preview the changes yourself without affecting the appearance of your website for other visitors. There is no need to refresh your browser to see the changes, they are updated in real-time. In fact, if you refresh your browser after making changes in the Developer Tools console, your changes will be lost because the browser will reload the unmodified version of your website. Using Chrome for live CSS testing ensures that your live website’s actual code remains untouched.
Navigate to a page of your website that you would like to modify the CSS for and inspect an element on the page.
Click on the Computed tab.
NOTICE: A list of attributes for the inspected element is displayed.
Hover over an attribute and click on the arrow icon that appears next to its value.
NOTICE: You will be navigated to the Styles tab and the attribute for the selected element will flash once.
To change an attribute, you can simply click on the value and type in the new value you want.
NOTICE: Your changes will appear immediately, there is no need to refresh the page.
Now that you are familiar with this neat tool found in your Google Chrome browser, you can unleash your CSS editing skills.
