How to View the Source Code of a Website
WordPress, Joomla, and Drupal are primarily powered by PHP.
However, as a user on a website, we don’t actually see what’s going on behind the scenes in the server. We only get the final output from the server, which is in the form of HTML, CSS, and Javascript. That’s the code that creates the webpage that we see.
This tutorial will show you how to see the code behind the front-end design and nicely formatted page. It will show you the HTML, CSS, and Javascript that your browser uses to display a page nicely to a user.
And it’s quite easy. Let’s get started.
View Page Source
Go to the outer edge of a site (e.g. far left), then right-click and click on “View Page Source” (or the option that’s similarly named).
That will bring up all the HTML code, along with links to CSS files, Javascript, images, etc.
You can now read through it and see what that page is created with.
You can also use Ctrl + F (command + F in Mac) to search through it for certain key words.
Getting Specific
If you want to drill down on a specific part of a page, most browsers now come with built-in inspectors. Or you can use Firebug in Firefox.
Just right-click on the object you’d like to inspect, then click on Inspect Element (or the option that’s similarly named).
The respective code will be high-lighted in the left window. Then you can click on the tags outside of it or within it to drill down on those. As you do that, it will high-light the part of the page it controls.
On the right side, you’ll see the CSS styles that are applied to the HTML tag that’s high-lighted.
This is an extremely useful and quick way to inspect code.
Wappalyzer
If you just want a quick way to see which technologies a website uses without doing the manual investigation, then check out our Wappalyzer tutorial.
Just to add some info/insight:
The ‘Inspect Element’ (DOM inspector) doesn’t actually show the source HTML, but the generated DOM structure after JavaScript has had its go. So it will also show you elements that are generated through JavaScript. And won’t show you elements that have been removed via JavaScript.
So it is good to think about what you need to see. If you want to check the actual HTML output, use the ‘View Page Source’ and not the ‘Inspect Element’.
Hi Peter,
good catch!
Thanks for sharing.
Regards
Nice! I didn’t know that. Thanks for adding that info, Peter!
So is there an effective way via (steps that we can take), say Google Chrome inspect tools, to inspect the source, to turn off know injected javascript to see the source output before javascript manipulates the page source?
Does anyone know of a good tutorial for beginners on how to effectively troubleshoot possible javascript issues/conflicts, via Google Chrome Dev inspect tools, to help isolate possible issues, and gather info for dev’s like Peter, before opening up support tickets. I’ve yet to find a decent guide/how to.
Peter, if you compiled an Ebook on the matter, I would surely buy it… or say, make it available to members for free, that purchase a years subscription to your NoNumbers extensions. 🙂
How to find the source code in Wp editor
Hi Riaz,
Click the “Text” tab on the top right of the editor.
How to get access to images as well ????…..
Doing right click->view page source provides access only to the html,css and javascript code of the page…so what about the images?
Nice good work. I also like To make websites.
please help me