How to look at the code of a website
 |
| Image: Review the <code> on your website without logging in |
I have come across this need on many occasions: How do I look at the code on my website?
Why might you need to do this? There are a multitude of reasons you may need to review your code without editing it. A few scenarios I have come across are clients needing to review work a 3rd party has created.
Maybe you had someone else create your website and you aren't sure what color they used to for a particular button. Or, maybe you finally are getting around to editing a website that has gone through so many revisions by a multitude of people and colors are seeming the slightest bit off. Get your branding back on track with this option.
For these examples, I will be reviewing older pages of this blog. And for your viewing pleasure we will look over a vector illustration blog post. These 2 examples will be reviewed in Google Chrome.
Let's get to reviewing the code of a particular element on your website
This is usually helpful if you are wanting to pick out a particular element to review its styling.Step 1:
On the page you are reviewing, right click, "Inspect". This will pull up a nested window next to your website.
Step 2:
Locate the element you are looking to review, and click on the icon in the nested window that has a tool tip saying something like "Select an element in the page to inspect it".
Note: Make sure the icon is highlighted in order to select and inspect an element.
Review the invisible (but important code on your website)
This is especially helpful if you are part of a larger enterprise system (where you only have access to editing certain pages) and are editing through a WYSIWYG (What you see is what you get) editor. I have found that the larger enterprises tend to add additional code (for SEO purposes or to keep things cohesive) but it may not be relevant to the page content.
Step 1:
On the page you are reviewing, right click, "View Page Source". This will open up a new window, full of code that makes your page work.
Step 2:
This part may seem overwhelming but if you know what you are looking for (eg. "<head>") then you can search for it by using the keyboard shortcut command+f (on Mac) or control+f (on a PC). The pop-up allows for you to search for exact phrases in an overwhelming body of text.
If you are using Google Adwords or the like, you can search this area to verify the code that has been added to your site for tracking purposes.
I hope this made it a bit easier to refer your questions back to your marketing, design, or coding person.
Let Calyx Studio help you with your upcoming design projects!
Comments
Post a Comment