How To Open Source Code In Edge

In this clip, you’ll learn how to view the source code of a web page with Microsoft’s Edge browser. It’s easy! So easy, in fact, that this home-computing how-to from the folks at Butterscotch can present a complete overview of the process in about two minutes. For more information, including detailed, step-by-step instructions, and to get started viewing source code on your own computer, watch this helpful video guide.

Using Edge browser’s Source Code viewer is simple. Simply right click on the webpage and select “View Source”, or just press Ctrl+U (Windows). You can then navigate to an element of interest in the DOM tree.

Google Chrome

To view the source code of a web page in Google Chrome, use any of the following methods.

View source code only

Method one

To view only the source code, press the shortcut keys Ctrl+U on your computer’s keyboard.

Method two

Right-click a blank part of the web page and select View page source from the pop-up menu that appears.

View page source in Chrome.

View page source with elements

  1. Open Chrome and navigate the web page whose source code you’d like to view.
  2. Click the Customize and control Google Chrome Chrome settings icon icon in the upper-right corner of the browser window.
  3. From the drop-down menu that appears, select More tools, then select Developer tools.
  4. Click the Elements tab in the top-left corner of the new section that appears at the bottom of the screen.
Elements tab in Chrome.

Tip

In Chrome, pressing F12 or Ctrl+Shift+I also brings up the interactive developer tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.

Website Source Code

Generally, webpages are written in HTML and use different types of files like CSS, JavaScript, images, videos, etc. Browsers like Edge will process these HTML / CSS / JavaScript and only show the readable text and media content to readers. However, in many situations you may need to analyze the source code to get more details.

  • You are a developer or blogger and want to check the source code for troubleshooting purposes.
  • The webpage you are viewing is attractive and you wanted to find the color and fonts used on the page.
  • You want to edit the source and test the results in a live browser without actually modifying the original code. For example, you want to apply different colors to your headings or check the font size.
  • Test mobile responsiveness of the page or find the elements loaded on the page.

In some cases, you can also find the theme and plugins used on the site by looking at the source code. Whatsoever is the reason, you can analyze the source code in two ways.

  • By directly viewing complete source code
  • Using Inspect element option with Microsoft Edge DevTools

Mozilla Firefox

To view the source code of a web page in Mozilla Firefox, use any of the following methods.

View source code only

Method one

To view only the source code, press Ctrl+U on your computer’s keyboard.

Method two

Right-click a blank part of the web page and select View Page Source from the pop-up menu that appears.

View page source in Firefox.

View page source with elements

  1. Open Firefox and navigate the web page whose source code you’d like to view.
  2. Click the Menu Firefox Menu Icon icon in the top-right corner of the screen.
  3. Select Web Developer in the drop-down menu, then select Toggle Tools from the expanded menu.
  4. Click the Inspector tab in the top-left corner of the section that appears at the bottom of the screen.
Firefox Inspector tab.

Tip

In Firefox, pressing F12 or Ctrl+Shift+I also brings up the interactive developer tool. This tool provides interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page in real time.

View a section of the page’s source code

  1. Highlight the portion of a web page for which you’d like to view the source code.
  2. Right-click that highlighted section and select View Selection Source.

Tip

You can use the Firebug add-on to view and edit the source code of a page, and view the changes live through the browser.

Viewing Complete Source Code

Let’s say, you want to find the CSS and JS files used on the page. You can do this easily by viewing the complete source code. Open the page in Edge, right click on any empty area and select “View page source” from the context menu.

View Page Source
View Page Source

This will open a new page showing the complete source code of the page you are viewing like below.

Webpage Source Code
Webpage Source Code

You can find HTML code of each element, linked CSS files between <head> and </head> section, meta tags, linked scripts before closing body tag </body>. Though this will be useful in many situations, you will not find the details of which CSS styles are applied to which HTML elements on the page. For example, you can’t find the font family of a title element by looking at complete source code. You have to click on the .css or .min.css file link and search in that file to find the style used for headings. It is a difficult task as you do not know the title belongs to which HTML heading tag from H1 to H6. In addition, there could be custom CSS classes applied for the title tag which you can’t find by looking the CSS independently.

Nowadays, many websites combine all CSS files together to reduce the number of HTTP requests and improve caching. Thus, viewing complete source code will not help when page’s CSS files are combined as a single file. The solution is to view the HTML of the element and CSS together so that it will give you a complete picture of that specific element.

Inspect Element Option in Edge

You can analyze any element on a webpage to get its HTML and CSS using this option. To use this, launch Edge browser and open the webpage you want to analyze. You have to open the Microsoft Edge DevTools (or Edge Developer Tools) to start analyzing the elements on the webpage. There are multiple ways to open Edge DevTools.

  • Simply, right click on any empty area and select “Inspect” from the context menu.
  • You can press F11 in Windows which will work in most of the desktop and laptop models. Alternatively, press “Control + Shift + I” keys to open Edge developer tools section.
  • Press “Alt + F” to open the menu and go to “More tools > Developer tools”.
Open Developer Tools from Edge Settings
Open Developer Tools from Edge Settings
Edge Developer Tools
Edge Developer Tools

You can adjust the height by dragging and click on the three dots horizontal icon on the developer tools menu bar to change the position to top/bottom or open it in a new window.

Dock Developer Tools Position
Dock Developer Tools Position

Though DevTools has many menu items, you need to use only few of them for analyzing the website source code in Edge. There will be a “Welcome” tab when you first open DevTools which you can simply close it.

Microsoft Edge

To view the source code of a web page in Microsoft Edge, use any of the following methods.

View source code only

Method one

To view only the source code, press Ctrl+U on your computer’s keyboard.

Method two

Right-click a blank part of the web page and select View page source from the pop-up menu that appears.

View page source selector in Edge.

View page source with elements

  1. Open Microsoft Edge and navigate the web page whose source code you’d like to view.
  2. Click the Settings and more Edge more icon icon in the upper-right corner of the screen.
  3. Move your mouse over More tools in the drop-down menu, and select Developer tools from the expanded menu.
  4. Click the Elements tab at the top of the window that appears on the right side of the screen.
Elements tab in Edge.

Tip

In Microsoft Edge, pressing F12 or Ctrl+Shift+I also brings up the interactive developer tool. This tool provides interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page in real time.

Viewing Source HTML and CSS Code

As mentioned, each element on the webpage contains source HTML code with CSS styles. To view the source HTML and CSS, you have to select the element.

  • The first icon in the DevTools menu is the element selection tool.
  • Click on the icon and hover over the element you want to find the source HTML. For example, let us find the details for the heading that says, “Our Premium Services”.
Select Element
Select Element

When hovering over that heading element, Edge will show you a floating pop-up with most of the required details. You can find the heading is h3, font size as 26px, using font family as Museo500Regular and color as #0875c9. You can also click on the element showing under “Elements” tab and view similar CSS details under “Styles” section in the right pane. Using select element tools, you can get the complete details of HTML and CSS for any element.

Under “Styles” section, you can see a CSS file link for each style. You can click on the file link to open it under “Sources” tab which we will explain in the below section.

Conclusion

Microsoft Edge added much-requested feature for developers, Opening Web Source Code Easily. What is the purpose of this feature? It will be a code editor to view web pages on the internet with full features.

0 Comments

No Comment.