View the Source Code The net page you’re reading is made from, among other things, supply code. That’s the information your web browser downloads and translates into what you’re analyzing proper now.
Most net browsers provide the capacity to see the supply code of an internet web page with out a additional software required, irrespective of what sort of device you’re on.
Some even offer superior capability and structure, making it less complicated to peruse HTML and other programming code at the page.
View the Source Code Why Would You Want to See the Source Code?
There are numerous motives why you can need to peer a page’s source code. If you are an internet developer, perhaps you would like take a peek below the covers at any other programmer’s specific style or implementation. Maybe you are in quality warranty and are seeking to confirm why a positive a part of an internet web page is rendering or behaving the manner it is.
You can also be a newbie looking to learn how to code your personal pages and are searching out a few real-global examples. Of course, it is possible that you don’t fall into any of those categories and just need to view source out of sheer curiosity.
Listed below are commands on how to view supply code in your browser of choice.
View the Source Code of a Web Page Google Chrome
Running on: Chrome OS, Linux, macOS, Windows
The computing device version of Chrome gives 3 exclusive techniques for viewing a page’s supply code, the primary and most effective by the use of the subsequent keyboard shortcut: CTRL + U (COMMAND + OPTION + U on macOS).
When pressed, this shortcut opens a brand new browser tab showing HTML and other code for the active web page. This supply is shade-coded and dependent in a way that makes it less complicated to compartmentalize and discover what you are searching out. You also can get there via entering the subsequent textual content in Chrome’s address bar, appended to the left-hand aspect of the internet page’s URL, and choosing the Enter key: view-supply: (i.E., view-supply:https://www.Lifewire.Com).
The third technique is via Chrome’s developer tools, which permit you to take a deeper dive into the page’s code as well as tweak it on-the-fly for trying out and improvement purposes. The developer gear interface can be opened and closed by using the usage of this keyboard shortcut: CTRL + SHIFT + I (COMMAND + OPTION + I on macOS). You also can launch them by way of taking the following direction.
- Select Chrome’s foremost menu button, located within the higher proper-hand nook and represented by 3 vertically-aligned dots.
- When the drop-down menu appears, hover your mouse cursor over the More tools alternative.
- When the sub-menu seems, pick Developer equipment.
Android
Viewing an internet page’s source in Chrome for Android is as easy as appending the subsequent text to the front of its address (or URL) and filing it: view-supply:. An instance of this would be view-source:https://www.Lifewire.Com. HTML and different code from the web page in query might be right away displayed inside the energetic window.
iOS
While there are no native methods for viewing supply code the usage of Chrome for your iPad, iPhone or iPod touch, the most effective and most effective is to make use of a 3rd-party solution along with the View Source app.
Available for $zero.Ninety nine within the App Store, View Source activates you to go into the web page’s URL (or copy/paste it from Chrome’s deal with bar, that’s now and again the only path to take) and that’s it. In addition to displaying HTML and different supply code, the app additionally has tabs that show person page property, the Document Object Model (DOM), as well as page length, cookies, and different thrilling information.
Microsoft Edge
Running on: Windows
The Edge browser lets you view, analyze and even manage the present day page’s supply code via its Developer Tools interface. To access this handy toolset you may use this sort of keyboard shortcuts: F12 or CTRL + U. If you’d decide upon the mouse instead, click on on Edge’s menu button (three dots placed in the top right-hand corner) and pick the F12 Developer Tools option from the list.
After the dev equipment are run for the primary time, Edge provides two extra alternatives to the browser’s context menu (accessible by way of right-clicking anywhere within an internet page): Inspect element and View supply, the latter which opens the Debugger portion of the dev gear interface populated with source code.
Mozilla Firefox
Running on: Linux, macOS, Windows
To view a page’s source code within the desktop version of Firefox you may press CTRL + U (COMMAND + U on macOS) for your keyboard, so that it will open a new tab containing HTML and different code for the lively internet web page.
Typing the following text into Firefox’s deal with bar, immediately to the left of the page’s URL, will reason the identical supply to expose up inside the contemporary tab alternatively: view-supply: (i.E., view-source:https://www.Dotdash.Com).
Another way to access a web page’s supply code is thru Firefox’s developer gear, accessible by using taking the subsequent steps.
- Select the main menu button, placed inside the top proper-hand corner of your browser window and represented with the aid of 3 horizontal strains.
- When the pop-out menu seems, click on on the Developer “wrench” icon.
- The Web Developer context menu ought to now be visible. Select the Page Source option.
Firefox also helps you to view the source code for a particular portion of a web page, making it easy to isolate problems. To accomplish that, first, spotlight the area which you are inquisitive about with your mouse. Next, proper-click and choose View Selection Source from the browser’s context menu.
Android
Viewing source code in the Android model of Firefox is conceivable with the aid of prefixing the net web page’s URL with the subsequent textual content: view-supply:. For instance, to view the HTML source for Dotdash you’d publish the subsequent text within the browser’s cope with bar: view-source:https://www.Dotdash.Com
iOS
Our recommended technique for viewing internet web page source code on your iPad, iPhone or iPod contact is through the View Source app, to be had inside the App Store for $0.99. While no longer incorporated directly with Firefox, you can easily copy and paste a URL from the browser into the app in an effort to unveil the HTML and other code associated with the page in query.
Apple Safari
Running on iOS and macOS
iOS
Although Safari for iOS does not encompass the capability to view page source by using default, the browser does combine instead seamlessly with the View Source app, available in the App Store for $zero.99.
After putting in this third-birthday celebration app go back to the Safari browser and tap at the Share button, placed on the lowest of the display and represented via a rectangular and an up arrow. The iOS Share Sheet should now be seen, protecting the lower half of of your Safari window. Scroll to the proper and pick the View Source button.
A coloration-coded, dependent illustration of the lively page’s supply code ought to now be displayed, along with other tabs which permit you to view page property, scripts and extra.
macOS
To view the source code of a web page inside the computing device version of Safari, you first want to permit its Develop menu. The steps underneath walk you through activating this hidden menu and displaying a page’s HTML supply.
- Select Safari within the browser menu, positioned at the top of the screen.
- When the drop-down menu seems, pick the Preferences alternative.
- Safari’s Preferences must now be seen. Click on the Advanced icon, positioned on the some distance proper-hand aspect of the top row.
- Towards the bottom of the Advanced section is an option categorized Show Develop menu in menu bar, followed with the aid of an empty checkbox. Select this field as soon as to location a take a look at mark in it, and near the Preferences window by clicking on the purple ‘x’ determined in the top left-hand corner.
- Select the Develop menu, positioned at the pinnacle of the screen.
- When the drop-down menu appears, pick Show Page Source. You can also use the subsequent keyboard shortcut as a substitute: COMMAND + OPTION + U.
Opera
Running on: Linux, macOS, Windows
To view source code from the active net web page in the Opera browser use the following keyboard shortcut: CTRL + U (COMMAND + OPTION + U on macOS). If you’ll opt for loading the supply inside the cutting-edge tab as a substitute, type the subsequent text to the left of the page’s URL inside the address bar and hit Enter: view-supply: (i.E., view-source:https://www.Lifewire.Com).
The desktop version of Opera also permits you to view HTML supply, CSS, and different factors by means of the use of its incorporated developer gear. To launch this interface, which by way of default will appear at the right-hand side of your predominant browser window, press the following keyboard shortcut: CTRL + SHIFT + I (COMMAND + OPTION + I on macOS).
Opera’s developer toolset is likewise handy through taking the following steps.
- Select the Opera logo, positioned within the higher left-hand corner of your browser window.
- When the drop-down menu seems, hover your mouse cursor over the More tools choice
- Click on Show developer menu.
- Select the Opera brand once more.
- When the drop-down menu appears, hover your cursor over Developer.
- When the sub-menu seems, pick out Developer Tools.
Vivaldi
There are multiple methods to view web page supply in the Vivaldi browser. The most effective is through the CTRL + U keyboard shortcut, which offers code from the energetic page in a new tab.
You can also add the subsequent text to the the front of the page’s URL, which shows the supply code within the present tab: view-source: An example of this will be view-supply:http://www.Dotdash.Com.
Another technique is through the browser’s integrated developer equipment, accessible with the aid of pressing the CTRL + SHIFT + I mixture or through the Developer Tools option in the browser’s Tools menu — observed through selecting the V emblem within the top left-hand corner. Using the dev gear lets in for a far more in-depth evaluation of the web page’s source.