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.


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.


  • Nick Savov

    Nick is the Director of Support at OSTraining and you can find him in almost every area of the site, from answering support requests and account questions to creating tutorials and software.

0 0 votes
Article Rating
Notify of

Newest Most Voted
Inline Feedbacks
View all comments
9 years ago

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’.

9 years ago

Hi Peter,

good catch!
Thanks for sharing.

9 years ago

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. 🙂

8 years ago

How to find the source code in Wp editor

6 years ago

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?

Malith madusanka pradeep
Malith madusanka pradeep
3 years ago

Nice good work. I also like To  make websites.
please help me

Would love your thoughts, please comment.x