In Windows 11, Microsoft finally get rid of their infamous and iconic Internet Explorer browser. You will only have Edge which is based on Google’s Chromium codebase. Therefore, you will feel the Edge browser is similar to Google Chrome in many ways. When you want to analyze the webpage’s source code, you can easily do it in Edge without looking for Chrome or Firefox. In this article, we will explain how to view website source code like HTML, CSS and JavaScript in Microsoft Edge browser.
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
Let us explain both methods in detail.
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.
This will open a new page showing the complete source code of the page you are viewing like below.
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”.
By default, Edge will open the developer tools section at the bottom of the browser as shown below.
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.
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.
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”.
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.
Live Editing of Webpage Content
Now that you want to apply some changes to the heading and see how it looks on the live site. For doing this, you have to login to the administrator panel of your website and update the source content. However, you will have problems like visualizing the element with different colors or font sizes. The easy way is to edit the source HTML under “Elements” section or CSS styles under “Styles” section.
To edit HTML, first select the element under “Elements” tab and right click on it. Or you can click on the three dots icon showing at extreme left of the selected element. You can simply delete or hide the element by selecting that option from the context menu. If you want to edit, then select “Edit as HTML” option.
This will open the text edit and you can change the HTML tags in the editor or add additional CSS class to the element. After editing, click on any empty area in the DevTools to quit the editing. The editor will automatically validate and correct the tags. For example, if you change the starting tag as <h4> and forgot to change the ending tag and left as </h3>, it will automatically change back to the original <h3>…</h3> tags.
Similarly, you can change the CSS styles under “Styles” tab. For example, increase the font of the h3 heading to 40px and change the color to #c94608.
You can see the instant preview on the page to give you an idea of how it will look with the modified CSS and HTML. However, the changes are temporary and refreshing or reloading the page will restore the original content. You can do the changes in the backend to permanently apply them on the webpage.
Troubleshooting Webpage Errors
One of the major purposes of DevTools is to find the browser problems that prevent the page to display properly. As you can see in the above screenshots, Edge shows two numbers (34 and 33) in the DevTools menu bar.
- The first number icon shows the browser console errors and warnings that you can see under “Console” tab.
- Second number will show you the open issues if any in a separate window inside the DevTools that you can close independently.
Error, warning and tips are shown with labels to help you understanding the issue. Click on each item to get more details about the issue and the affected resource on your page. You have to modify the code and retest again to check if the errors are fixed.
View Source Files Independently
The “Sources” tab in Edge DevTools is something similar to viewing complete source code. However, it shows the resources loaded from each part of the domain and from external domains separately in a structure. You can select any file and preview the content within DevTools.
When you select a minified file, Edge will prompt you with a question “Pretty-print this minified file?”. Minification will remove all spaces and line breaks in the file and make it unreadable for users. You can use pretty printing to convert the minified files to a readable mode with line breaks and spaces. You can click on “Pretty-print” button or click on the { } showing at the status bar.
All other items like Network, Performance, etc. are useful for advanced analysis of page loading time, checking HTTP headers, finding security issues and test SEO performance score. You can close the DevTools once you are done with the analysis.
Final Words
The latest Edge Chromium version is powerful than any other browsers. You can use Microsoft Edge DevTools to view the webpage source code for troubleshooting and designing purposes. It is also possible to get the complete source code the view the files used on the page.
Leave a Reply
Your email is safe with us.