Let’s continue using DevTools on the Codecademy homepage.ġ. In addition to modifying existing CSS rules, you can add new CSS rules as well. DevTools is only a sandbox tool, meaning that any changes you make to the web page will not be saved, so make sure to write down any changes you’d like to make when using DevTools for your own web page! Step 4: Add CSS Styles with DevTools (For example, when modifying color values, DevTools will provide you with a color picker to help you select a color.)ģ. DevTools provides easy-to-use tools when you modify certain CSS rules. When you modify or change a CSS rule, you may be affecting more than one element.Ģ. There are a few things to keep in mind when using DevTools to modify a web page:ġ. You should see the change automatically update on the page. Scroll down to a CSS rule (one that is not crossed out with a black line), click on the value of any applied CSS rule, change the value, and press enter on your keyboard. To try it out, click again on the Styles tab in the right pane of DevTools (feel free to use the Codecademy website again). Step 3: Modifying CSS Styles with DevToolsĭevTools is also useful for modifying existing CSS rules and previewing those changes directly on the page you’re viewing. Expand the width of the browser until it appears.) (If the Computed tab is not appearing for you, your browser may be sized too small. In this pane, you will see only the styles that are being applied to that element, also known as the computed styles. To instead view only the styles applied to that specific element, click on the Computed tab directly next to the Styles tab in the right pane. Remember, the Styles tab shows all styles applied to that element (rules can often be overwritten by more specific rules, which causes the horizontal black line through some CSS rules, denoting that that rule is not being used).ġ4. Scroll down in the Styles tab, notice that some CSS styles are crossed out with a horizontal black line.ġ3. On the right hand side of DevTools, click on the tab named Styles (if you’re not already on it) - this tab displays all of the CSS styles associated with the element highlighted in the left side of DevTools.ġ2. Alternatively, click the “Select element” icon (shown in the image below) in the top-left corner of the console and then click on an element within the web page - this is a much quicker way of accessing a specific element on the web page that you want to inspect.ġ1. Note that you can expand closed elements by clicking the arrow directly to the left of them.ġ0. Mouse over the HTML code - as you mouse over, notice that DevTools will highlight the corresponding HTML element on the web page.ĩ. In the left pane, notice the interactive DOM (HTML elements) that contains the current content of the web page.Ĩ. Click on the “Elements” tab of DevTools (if you’re not already on it).ħ. DevTools should appear at the bottom of your page (it’s normal if its appears in another location, as its location can be changed).Ħ. Select “Inspect” in the menu that appears.ĥ. Your home page may look different from the one shown in the screenshots.)Ĥ. (This article uses screenshots from a previous version of the Codecademy home page. Right click (or control and click simultaneously) on any text on the page. Navigate to Codecademy’s homepage (make sure you are logged out).ģ. This will allow you to read this article while completing the following steps.Ģ. Open an incognito Chrome browser (in the browser’s menu, click on “File” then “New Incognito Window”). Step 2: Using DevTools to View CSS StylesĭevTools can provide you with a lot of information about a website, but it’s particularly exceptional at examining a page’s HTML elements, along with the CSS styles for those respective elements. This rest of this article will focus exclusively on the Elements tab. You should see the Elements, Console, Sources, and Network tabs, among many others. DevTools will appear as a window on either the bottom or right-hand side of your screen. In the menu, select “Inspect.” This will automatically launch DevTools within your browser. Upon doing so, a menu will appear directly beside the area you clicked on. The quickest way of accessing DevTools in Chrome is to navigate to any website (like this one) and right click (press control and click for a single button mouse) anywhere on the page. Because Google Chrome is the preferred browser for many professional developers, we’ll learn how to use the browser developer tools within Google Chrome, known as Chrome DevTools. These tools are available within most major web browsers, like Chrome, Safari, and Firefox, to name a few. Using Chrome DevTools for CSS Visual Rulesīrowser developer tools allow web developers to quickly collect important information on most websites.
0 Comments
Leave a Reply. |