How to Inspect Element in Chrome

Introduction

Inspecting elements in Chrome is a powerful feature that allows you to view and edit the HTML and CSS of a webpage directly in your browser. This can be particularly useful for web developers and designers who need to test changes quickly. In this guide, you’ll learn how to use Chrome’s element inspector effectively on various platforms including Windows, macOS, Linux, Android, and iOS.

How to Open the Element Inspector

On Windows, macOS, and Linux

1. Open Google Chrome and navigate to the webpage you wish to inspect.
2. Right-click on the element you want to inspect and select Inspect.
3. Alternatively, you can use the keyboard shortcut: Ctrl + Shift + I on Windows/Linux or Cmd + Option + I on macOS.

On Android and iOS

Chrome on a phone or tablet has no built-in inspector. Instead, you inspect the page from a computer. On Android, use Chrome’s remote debugging:

1. On the Android device, open Developer options and turn on USB debugging.
2. On your computer, open Chrome and go to chrome://inspect#devices. Make sure Discover USB devices is turned on.
3. Connect the Android device with a USB cable and accept the debugging prompt on its screen.
4. Click Inspect next to the page you want. A DevTools window opens for it.

On iPhone and iPad, turn on Web Inspector in Chrome’s Settings > Content Settings, relaunch Chrome, connect the device to a Mac, and inspect the page from Safari’s Develop menu. Google explains the setup in Debugging websites in Chrome on iOS.

Selecting Elements

Once the Chrome element inspector is open, you can select elements within the page.

1. Hover over the HTML code in the Elements panel to highlight the corresponding elements on the webpage.
2. Click on any HTML tag to focus on that specific element.
3. Use the Select Element icon (a pointer in a square) in the top left of the DevTools to click directly on the webpage for inspection.

Editing HTML

Editing HTML within Chrome’s element inspector is straightforward and allows you to make real-time changes to the webpage structure.

1. Right-click on the desired HTML element in the Elements panel.
2. Select Edit as HTML to make changes.
3. Modify the HTML code and click outside the editing area to apply changes.

Editing CSS

To change the styling of a webpage, you can edit the CSS directly within the inspector.

1. In the Styles section, located on the right side of the Elements panel, find the relevant CSS rule.
2. Click on a property value to change it or add new properties by clicking on the empty space in the rule set.
3. Press Enter to apply the new styles immediately.

Accessing the Console

The Chrome console is a useful tool for running JavaScript directly in your browser.

1. Open the console by clicking on the Console tab within DevTools.
2. Alternatively, use the keyboard shortcut: Ctrl + Shift + J on Windows/Linux or Cmd + Option + J on macOS.
3. Enter JavaScript commands and press Enter to execute them.

Conclusion

Understanding how to use the Chrome element inspector can significantly enhance your web development and debugging processes. By following the steps outlined in this guide, you can open the inspector, select and modify elements, edit HTML and CSS, and access the console across different platforms. For more detail, see Google’s Chrome DevTools documentation.