In this tutorial, learn how to view the HTML source code of a web page.
Users can read the HTML source code of each web page they visit in any major Internet browser. The sections that follow describe the many ways to see source code in each of the major browsers. To continue, select an option from the list below and follow the on-screen instructions.
- Introductory information
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Microsoft Internet Explorer
- Safari
- Opera
- Android phone or tablet using Chrome
- iPhone or iPad using Safari
- How to close the source code page or tool
- Use an online tool to view the source code
Introductory information
The information and code handled by the server will not appear when inspecting the source code of a web page. A search engine, for example, processes data on a server and then shows the results on a web page. In other words, you can look at the code that makes up the results page, but not the source code of the search engine.
All server-side scripts, SSI, and programming code are subject to this rule. As a result, you won’t be able to see the source code of a script used in search engines, forums, polls, or chat. Additionally, copying data from the source code may result in problems or redirect you back to the page from which you copied the data.
Google Chrome
Use one of the ways below to read the source code of a web page in Google Chrome.
View source code only
Method one
Press Ctrl+U on your computer’s keyboard to see only the source code.
Method two
Select View page source from the pop-up menu that displays when you right-click a blank portion of the web page.
View page source with elements
- Navigate to the web page whose source code you want to see in Chrome.
- In the upper-right corner of the browser window, click the Customize and control Google Chrome settings icon.
- Select More tools from the drop-down menu that appears, then Developer tools.
- In the new section at the bottom of the screen, click the Elements tab in the top-left corner.
Tip: The interactive developer tool is also available in Chrome by hitting F12 or Ctrl+Shift+I. This tool allows users to engage with the source code and CSS settings in a much more interactive way, allowing them to see how changes in the code influence the web page right away.
Mozilla Firefox
Use one of the following methods to read the source code of a web page in Mozilla Firefox.
View source code only
Method one
Press Ctrl+U on your computer’s keyboard to see only the source code.
Method two
Select View Page Source from the pop-up menu that displays when you right-click a blank portion of the web page.
View page source with elements
- Navigate to the web page whose source code you want to see in Firefox.
- In the top-right corner of the screen, click the Menu icon.
- In the drop-down box, choose Web Developer, then Toggle Tools from the expanded menu.
- In the top-left corner of the section that shows at the bottom of the screen, click the Inspector tab.
Tip: The interactive developer tool can also be accessed by hitting F12 or Ctrl+Shift+I in Firefox. This tool allows users to interact with source code and CSS settings in real-time, allowing them to observe how changes in the code affect the web page.
View a section of the page’s source code
- You can inspect the source code for a part of a web page by highlighting it.
- Select View Selection Source from the context menu when you right-click the highlighted portion.
Tip: The Firebug add-on allows you to read and edit a page’s source code while simultaneously viewing the changes in the browser.
Microsoft Edge
Use one of the ways below to view the source code of a web page in Microsoft Edge.
View source code only
Method one
Press Ctrl+U on your computer’s keyboard to see only the source code.
Method two
Select View page source from the pop-up menu that displays when you right-click a blank portion of the web page.
View page source with elements
- Navigate to the web page whose source code you want to see in Microsoft Edge.
- In the upper-right corner of the screen, click the Settings and more icon.
- Select Developer tools from the expanded menu by moving your mouse over More tools in the drop-down menu.
- At the top of the window on the right side of the screen, select the Elements tab.
Tip: The interactive developer tool is also available in Microsoft Edge by hitting F12 or Ctrl+Shift+I. This tool allows users to interact with source code and CSS settings in real time, allowing them to observe how changes in the code effect the web page.
Microsoft Internet Explorer
Use one of the ways below to view the source code of a web page in Microsoft Internet Explorer.
View source code only
Method one
Press Ctrl+U on your computer’s keyboard to see only the source code.
Method two
Select View source from the pop-up menu that displays when you right-click a blank portion of the web page.
View page source with elements
- Navigate to the web page whose source code you want to see in Internet Explorer.
- In the upper-right corner, click the Tools icon.
- From the drop-down option, choose F12 Developer Tools.
- At the top-left corner of the developer tools menu, select the DOM Explorer tab.
Tip: The DOM tool is accessed by pressing F12 in Internet Explorer. This tool allows users to interact with source code and CSS settings, allowing them to immediately see how changes in the code influence the web page.
Safari
To read a webpage’s source code in Safari, you must first activate the developer settings. The sections that follow will show you how to enable this functionality and then how to read a web page’s source code.
Accessing developer options in Safari
1. Open the Safari browser on your computer.
2. From the menu bar in the top-left corner of the screen, choose Safari.
3. Select Preferences from the drop-down menu that opens.
4. Navigate to the Advanced tab, and check the box next to Show Develop menu in menu bar.
5. The Develop selector should now appear in the Apple menu bar at the top of the screen.
Viewing the source code
Note: For the next steps to work, you must have the developer options enabled.
Method one
1. Navigate to the web page whose source code you want to see in Safari.
2. Click the Develop selection in the Apple menu bar at the top of the screen, then Show Page Source from the drop-down menu.
3. Click the Elements tab at the top of the developer tools section in the center of the screen.
Method 2
Select Show Page Source from the pop-up menu that comes when you right-click a blank portion of the web page.
Tip: You may also view the source code of a page by pressing Command+option+U if the developer options are enabled.
Opera
Use one of the following methods to inspect the source code of a web page in Opera.
View source code only
Method one
Press Ctrl+U on your computer’s keyboard to see only the source code.
Method two
Select Page source from the pop-up menu that displays when you right-click a blank portion of the web page.
View page source with elements
- Navigate to the web page whose source code you’d like to see in Opera.
- In the upper-left corner of the browser window, click the Opera button.
- Select Developer tools from the expanded menu by moving your mouse over Developer in the drop-down menu.
- At the top of the window on the right side of the screen, select the Elements tab.
Tip: Choose More tools -> Show developer menu if you don’t see the Developer submenu. Then, select the button from the drop-down menu. again. The Developer entry should now be visible.
Tip: The interactive developer tool is also available in Opera by hitting F12 or Ctrl+Shift+I. This tool allows users to interact with source code and CSS settings in real-time, allowing them to observe how changes in the code effect the web page.
Android phone or tablet using Chrome
- On your Android phone or tablet, open the Google Chrome browser.
- Open the web page where you want to see the source code.
- Move the pointer to the front of the URL by tapping once in the address bar.
- Tap Enter or Go after typing view-source:.
Tip: To see the code for our webpage, for example, type view-source: https://windowsfreeapps.com
If the instructions above don’t work on your Android phone, use the method described in the section about using Safari on an iPhone or iPad. The only differences are the use of Chrome instead of Safari and the method for creating and editing bookmarks on Android phones.
Tip: If you’re having trouble navigating the source code on your mobile device using the manner described above, you might want to look into using an online tool.
In this video, we are gonna show you how to view source code or HTML code of any website on Android Mobile in Google chrome or any browser:
iPhone or iPad using Safari
It takes a little more effort to view the source code of a web page on an iPhone or iPad, but it is achievable. To read a web page’s source code, you must first build a bookmark, apply JavaScript code to it, and then use the bookmark on the page.
Note: If you’d rather read a web page’s source code using an app, you may get the free View Source app from the iOS App Store.
Create a bookmark to view source code
1. On your iPhone or iPad, open the Safari browser.
2. Any web page, such as www.computerhope.com, can be accessed.
3. At the bottom of the screen, tap the More icon.
Tip: Alternatively, tap and hold the Bookmark icon at the bottom of the screen until a menu displays.
4. Tap the Add Bookmark option in the menu that appears.
5. Enter “View web page source code” in the bookmark name field, then press the x on the right side to clear the current name.
6. To save the bookmark, tap Save in the top-right corner.
7. Copy the complete snippet of JavaScript code below.
javascript:(function(){var a=window.open('about:blank').document;a.write('Source code of '+location.href);a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();
8. By tapping the bookmarks symbol at the bottom of the screen in Safari, you may access your bookmarks.
9. Locate the bookmark you established earlier, then press and hold it until a menu appears at the bottom of the screen.
10. On the menu, select the Edit option.
11. Tap the URL and then the x to clear the URL on the Edit Bookmark screen, then enter the JavaScript code from step 7 into the URL field.
12. To save the bookmark modifications, tap Done in the bottom-right corner of the screen.
Use a bookmark to view source code
You can now read the source code for a web page after you’ve made the bookmark mentioned above.
1. Access the web page where you wish to see the source code in Safari.
2. At the bottom of the screen, tap the bookmarks symbol.
3. Tap the bookmark you made for View web page source code.
A new Safari surfing tab appears, exposing the web page’s source code.
Tip: If you’re having trouble navigating the source code on your mobile device using the manner described above, you might want to try using an online tool.
How to close the source code page or tool
You may wish to leave or close a web page once you’ve finished seeing the source code. The method you chose to open the source code determines how you close it.
- Close the new tab that opened at the top of your browser window if you used the Ctrl+U approach (except in Edge) or the right-click option.
- Press the same keys or click the Edge remove icon in the upper-right corner of the tools window if you used the developer approach (F12 or Ctrl+Shift+I).
Use an online tool to view the source code
There are various online programs that allow you to read the source code of any web page in addition to using a browser. Because most of these tools can format, stylize, and highlight the code to make it easier to read, they may be useful. Here’s a rundown of some of these tools:
