Many software developers use the Mac as their primary computer, and all of them should have access to, and be able to modify, the software they use. This article covers some great tools that will make it easier for you to port your open source code from Windows to Mac OS X.
This guide is targeted toward people who have little or no experience with the open source process. More experienced users may also find it helpful as an overview of how to get started developing and releasing open source software on the Mac platform.
How to View Page Source in Safari for Mac
Here is how you can view a web pages source in Safari on MacOS:
- First, enable the Safari Develop menu by going to the Safari menu, choosing “Preferences”, going to “Advanced” and checking the box to enable the developer menu
- Next, in any Safari window, navigate to the web page whose source you wish to view and inspect
- Pull down the “Develop” menu at the top of the screen and select “Show Page Source” from the menu options
- The web web pages source will appear on screen in the web inspector Sources section, a web developer toolkit built into Safari
How to View Source Code
How to View Source Code.
The first step in checking your website’s source code is to view the actual code. Every web browser allows you to do this easily. Below are the keyboard commands for viewing your webpage source code for both PC and Mac.
- Firefox – CTRL + U (Meaning press the CTRL key on your keyboard and hold it down. While holding down the CTRL key, press the “u” key.) Alternatively, you can go to the “Firefox” menu and then click on “Web Developer,” and then “Page Source.”
- Internet Explorer – CTRL + U. Or right click and select “View Source.”
- Chrome – CTRL + U. Or you can click on the weird-looking key with three horizontal lines in the upper right hand corner. Then click on “Tools” and select “View Source.”
- Opera – CTRL + U. You also can right click on the webpage and select “View Page Source.”
- Safari – The keyboard shortcut is Option+Command+U. You also can right click on the webpage and select “Show Page Source.”
- Firefox – You can right click and select “Page Source” or you can navigate to your “Tools” menu, select “Web Developer,” and click on “Page Source.” The keyboard shortcut is Command + U.
- Chrome – Navigate to “View” and then click on “Developer” and then “View Source.” You also can right click and select “View Page Source.” The keyboard shortcut is Option+Command+U.
Once you know how to view the source code, you need to know how to search for things in it. Usually, the same search functions you use for normal web browsing apply to searching in your source code. Commands like CTRL + F (for Find) will help you quickly scan your source code for important SEO elements.
The title tag is the holy grail of on-page SEO. It’s the most important thing in your source code. If you’re going to take one thing away from this article, pay attention to this:
You know those results Google provides when you’re searching for something?
All of those results come from the title tags of the webpages they are pointing to. So, if you don’t have title tags in your source code, you can’t show up in Google (or in any other search engine, for that matter). Believe it or not, I’ve actually seen websites without title tags.
Now, let’s do a quick Google search for the term “Marketing Guides”:
You can see that the first result is for the KISSmetrics blog section on marketing guides. If we click on that first result and view the page source code, we can see the title tag:
The title tag is designated by the opening tag: <title>. It ends with the closing tag: </title>. The title tag is usually near the top of your source code in the <head> section.
And we can see that the content inside the title tag matches what is used in the headline of that first Google result.
Not only are title tags required in order to be included in Google search results, but Google identifies the words in your title tags as important keywords that they think are relevant to their users’ searches.
So if you want a certain webpage to rank for a particular subject matter, you’d better make sure words that describe the subject matter are in the title tag. There are a number of online resources where you can learn more about how keywords and title tags are important in your overall site architecture.
Here are some important things to remember about your title tags:
- Make sure you have only one title tag per webpage.
- Make sure every webpage on your website has a title tag.
- Make sure each title tag on your website is unique. Never duplicate title tag content.
How to View Page Source by Keyboard Shortcut in Safari on Mac
After you have the Develop menu enabled in Safari, you can also use a keyboard shortcut to quickly view any web page source in the Safari browser for Mac
- Navigate to the web page you wish to view the page source for
- Press Command + Option + U keyboard combination to view the page source
The keyboard shortcut for viewing page source will open the web inspector tool, just like accessing it from the Develop menu.
If you’re an advanced user of Safari, enabling the Develop menu is likely one of the first things you do when you launch the browser for the first time.
For what it’s worth, the Chrome browser and Firefox browsers also have similar web element inspector capabilities, but obviously we’re focusing on Safari for Mac here.
Learn how to open, edit and save other people’s code in a .zip file. This is a qucik overview of what you need to know to start contributing to open source software.