SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Getting Started with Chrome Developer Tools: Inspect Element

March 12, 2018 by Alex Fox

Google Chrome is one of the best consumer browsers on the market, but it also contains a number of powerful developer tools. We can reveal some of these tools with Chrome’s Inspect Element (or “Inspect”) tool. This developer tool provides insight into how websites are constructed and styled, and it can help you debug your own sites.

Accessing the Inspect Element Tool

The Inspect tool, also known as the Inspect Element tool, is highly useful for analyzing websites. You can access it through Chrome’s context menu.

Right click on any element in your browser and choose “Inspect” in the context menu. You can also press Option-Command-I on a Mac or Control-Shift-I on Windows to open the Chrome developer tools window.

Chrome Developer Tools

The window that pops out is the DevTools panel. This panel has used for a number of features. The default and most obvious tool is the Elements pane. This will show the HTML for the element you right-clicked and reveal the element’s style rules in the panes below.

The panel has a lot going on. Let’s look at each component of the developer tool’s pane.

Inspecting the Inspector

The inspect element panel is divided into several different tabs which are visible at the top of the window. We’ll focus on the default Elements tab, which shows the page’s HTML structure and CSS styling rules.

There are two useful buttons next to these tabs. The first is the Inspect Element tool.

chrome inspect element tool

This tool allows you to mouse over and select different DOM elements to inspect. Click the button, the click on or hover over an element to highlight and scroll to its HTML and CSS.

Chrome Developer Tools

Testing Responsive Design

The second button turns on Device Preview mode. In this mode you can see what your webpage looks like at different resolutions and screen sizes.

Chrome Developer Tools

If you click on that button, you’ll see your webpage snap into a new viewport. This will mimic the window a mobile device, letting you preview your responsive elements’ behaviors.

Chrome Developer Tools

You can then use the drop-down menu above the page preview or the handles on the sides of the page preview to resize the device preview window. Choose from the presets to select popular device dimensions, or manually adjust the viewport size and save your own presets.

Chrome Developer Tools

You can also test out how functional your site will be on poor Internet connections. Click the “online” drop down to simulate lower-quality connections and refresh your page to see the results.

Chrome Developer Tools

Finally, you can rotate the viewport into landscape view with the Rotate icon at the far right.

Examining Your HTML

The primary pane in the Element panel is the HTML pane, which shows your site’s HTML.

Chrome Developer Tools

This pane is like a super-powered “View Source.” It’s layout is based on the DOM, with elements nested inside their containers. Click on the disclosure triangles to collapse and reveal elements quickly.

The element you inspected when you opened the window is automatically highlighted. Here, I’ve inspected an image which is contained in a link. As expected, I see a highlighted image tag within an anchor tag.

Chrome Developer Tools

If you look at the bottom of this window, you’ll see what looks like a file path.

This is called the breadcrumb trail. It shows all the parent elements of the inspected element. Click on an element in the breadcrumb trail to quickly navigate to it.

Editing Your HTML with Inspect Element

In many of the Chrome developer tools, elements can be edited by clicking or double-clicking on them.

HTML elements can be live-edited in this window. Double-click on any tag or property to open it in a text box. This will allow you to temporarily edit the page’s code. Edits will be cleared once you close the page. It’s a great way to quickly troubleshoot your HTML or try out alternative code.

Chrome Developer Tools

If you want to edit the whole line, or you just want a bigger text box, click the three dots to the left of any line of HTML. This will reveal the context menu. Choose “Edit as HTML” from the list to get a multi-line edit box for the whole element.

chrome inspect element

chrome inspect element

From the context menu, you can also delete elements, copy code or add a single attribute or property to your code. With this tool, you can copy any code you’ve changed and paste it into your text editor or WYSIWYG program.

chrome inspect element

 

Viewing and Editing CSS

Underneath the HTML view is a pane that showing the CSS rules that apply to our element. This is the Styles pane. From here, we can view or editing CSS rules.

chrome inspect element

Toggle a rule on or off by hovering over it and clicking the check box next to the rule.

chrome inspect element

You can also click directly on a rule to live edit its name or value. Any changes you make will effect the page immediately.

chrome inspect element

You can also search for particular rules using the Filter search box.

chrome inspect element

The Styles pane makes debugging and viewing CSS a lot easier, and it can do even more. Check out Google’s documentation for a full explanation of the Style pane’s other functions. You can even practice editing CSS with Google’s CSS developer tools tutorial.

Box Model and Computed Style

Next to the style view is diagram representing the box model for the selected element.

chrome inspect element

The selected element is blue. It’s padding is green, borders are yellow and margins are orange. Hover over any one part of the box model to see the corresponding element highlighted on the webpage.

chrome inspect elementMeasurements are written on each elements. The element I’ve selected here is 698 pixels by 377.297 pixels (it’s resized responsively). Since there’s no padding or border, those boxes are blank. There’s a right margin of 24 pixels and a bottom margin of 16 pixels, as seen.

Below the box model is a list of all the styling rules that actually apply to this particular element. This only shows the rules actually effecting the element. Any rules that are deprecated or superseded are left off. This is called the “computed style” of the object, and it’s the combined result of your CSS.

chrome inspect element

As in the Styles pane, you can search for particular rules by typing in the Filter box. This will filter the computed rules only.

chrome inspect element

Conclusion

Chrome’s developer tools are invaluable for any professional developer. In future posts, we’ll be looking at the other panes of Chrome’s developer tools, including the Console and Performance tabs. If you want more background on all that the Chrome developer tools, can do, Google’s own documentation is thorough and useful.

You might also like the following posts:

The Powerful JavaScript Debugger You Never Knew You Had

How to Build a Chrome Extension

10 Chrome Addons Every Dev Should Have

Filed Under: Development, Tools, Tutorial Tagged With: developer tools, development, Google Chrome, tools, web design tools, web development

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022