View Source Code

If you have ever wanted to see what makes a website tick, viewing the source code can give you a glimpse of how it all works. Every web browser will allow you to examine the source code of any website you visit. Follow this guide to view the source in all the major web browsers.

Steps

Internet Explorer

  1. Open the webpage. You can view the source code for any website.
  2. Click the View menu. Select Source from the menu. The website’s source code will open in a new tab in your browser window.
  3. Learn the keyboard shortcut. Pressing Ctrl + U will open the source code for the page you are viewing. This only works in Internet Explorer 10.
  4. You can also view by Right click in the window

Chrome

  1. Open the webpage. You can view the source code for any website.
  2. Click the Menu button. This is the square button with three horizontal bars, located in the top-right corner of the browser window.
  3. Select the Tools submenu. Click “View source”. The source code will open in a new tab.
  4. Learn the keyboard shortcut. Press Ctrl + U (Windows, Linux) or Command + Alt + U (Mac).
  5. Enter the source into the address. Add “view-source:” to the beginning of any URL to directly view the source of that website. For example “view-source:https://www.wikihow.com”.

Firefox

  1. Open the webpage. You can view the source code for any website.
  2. Click the Firefox menu. This is located in the top-left corner of the window. If you can't see it, press ALT. Select the Web Developer submenu.
  3. Click Page Source. The source code will open in a new window.
  4. Learn the keyboard shortcut. Press Ctrl + U (Windows, Linux) or Command + U (Mac).
  5. Enter the source into the address. Add “view-source:” to the beginning of any URL to directly view the source of that website. For example “view-source:https://www.wikihow.com”.

Safari

  1. Open Safari.
  2. Click on Safari in the top left corner. Select Preferences from the dropdown menu that appears.
  3. In Preferences, go to the Advanced section on the far right. On the very bottom, toggle on Show Develop Menu.
  4. Close Preferences and find the webpage you'd like to to view the source code of.
  5. Once you get to the webpage, click on the new Develop option, and select from the dropdown menu View Source. If you want, copy and paste the code to a program like Evernote or TextWrangler.
    • Be aware that you cannot edit the source code from the webpage.

Tips

  • Accessing the page source code for a web page is the easy part. Reading that code can be pretty difficult. A detailed HTML tutorial can help a beginner recognize a lot of the tags and language in a page source code view, and learning more about new web coding technologies like XML (Extended Markup Language) and CSS (Cascading Style Sheets) will make what’s written in the page source code even more transparent.
  • Page source code can be difficult enough to read let alone parse what is being viewed. Page code readers might find it helpful to add a little white space into their page view. Copy and paste the page source code into a word processing document, and then break the code up into little modules by inserting paragraph breaks and empty lines in between code portions. This will make it easier to identity what’s going on in each part of the code.
  • Be aware that not all the code may be HTML. There might be CSS, XML, and/or JavaScript mixed in.

Related Articles

Retrieved from "https://kipkis.com/index.php?title=View_Source_Code&oldid=283484"