How to inspect elements in Microsoft Edge

A look at a website’s source code can provide insight into how a webpage was developed or structured. When the Inspect tool is active, you can get the access you need to temporarily see what edits to a webpage’s source code might look like. Learn how to use Inspect in Microsoft Edge.

What is the Inspect tool?

Inspect is a tool that allows you to view HTML and CSS elements on a webpage. The HTML or JavaScript code creates animation, and CSS handles web design. It can help you understand how a webpage is constructed, what font a site may be using, see what elements of a website are broken, and how long a site takes to load. You can also use Inspect to see how temporary changes to the code may look on your device.

Test out different colors, fonts, and try out other changes to your web design. Use Microsoft 365 to test out any potential font changes in a document on Microsoft Word before changing elements on the webpage. Changes appear as you are working and only affect your webpage as you actively use inspect elements. Among its applications, Inspect is a learning tool you can use to improve programming skills, debug a website, and preview any potential changes on your website.

How to get started with Inspect on Microsoft Edge

Inspect is accessible on Microsoft Edge for all your programming and web design needs. To open Inspect, open a tab and navigate to your desired webpage. Once the website is open, right-click anywhere on the web page. Select the Inspect option at the bottom of the pop-up window. If you prefer to use shortcuts, you also input Ctrl + Shift + I (Windows, Linux) or Command + Option + I (macOS).

Make sure your browser window is full screen to access the elements window. It will display on the right-hand side of your screen. HTML source code is displayed in the upper half of the elements window and CSS source code is displayed at the bottom. You can browse through the source code to get detailed information on the page elements.

The HTML source code breaks down each element of the webpage’s layout. You can view div classes, which group each of the elements of the pages together. You can also view the script types, which showcase how information will be displayed. Content on the webpage is editable, in addition to the fonts, sizes, coloring, and headings. All source code is accessible and editable in this window. Right-click a section of code you wish to edit. Navigate to the Edit as HTML option to implement any desired changes.

Opening the Inspect menu also grants you access to Microsoft Edge DevTools. Microsoft Edge DevTools can help perform advanced inspections and debug webpages.

Outside of traditional programmers, Inspect can be utilized in a variety of professions: Designers can preview how new design elements will look on webpages; writers can easily edit content flow on a webpage; marketers can use it to peek at their website performance.

Take advantage of Inspect for all your debugging, programming, and design needs within Microsoft Edge.