• Editor's Choice: Tech Gifts for Mom
  • New! iPad Air 6 Details

How to View HTML Source in Safari

If you want to see how a webpage was built, try viewing its source code.

  • University of California
  • University of Washington

What to Know

  • From Safari menu, select Develop > Show Page Source .
  • Or, right-click on page and Show Page Source from drop-down menu.
  • Keyboard shortcut: Option+Command+U .

This article shows how to view HTML source code in Safari.

View Source Code in Safari

Showing source code in Safari is easy:

Open Safari.

Navigate to the web page you would like to examine.

Select the Develop menu in the top menu bar. Select the Show Page Source option to open a text window with the HTML source of the page.

Alternatively, press Option+Command+U on your keyboard.

If the Develop menu is not visible, go into Preferences in the Advanced section and select Show Develop menu in menu bar .

On most web pages, you can also view the source by right-clicking on the page (not on an image) and choosing Show Page Source . You must enable the Develop menu in Preferences for the option to appear.

Safari also has a keyboard shortcut for viewing the HTML source: Hold down the command and option keys and hit U  ( Cmd + Opt + U .)​

Advantages of Viewing Source Code

Viewing the source to see how a web designer achieved a layout will help you learn and improve your work. Over the years, many web designers and developers have learned quite a lot of HTML by merely viewing the source of web pages they see. It's an excellent way for beginners to learn HTML and for seasoned web professionals to see how others used new techniques.

Remember that source files can be very complicated. Along with the HTML markup for a page, there will probably be significant CSS and script files used to create that site's look and functionality, so don't get frustrated if you can't figure out what's going on immediately. Viewing the HTML source is just the first step. After that, you can use tools like Chris Pederick's Web Developer extension to look at the CSS and scripts as well as inspect specific elements of the HTML.

Is Viewing Source Code Legal?

While copying a site's code wholesale and passing it off as your own on a website is certainly not acceptable, using that code as a springboard to learn from is actually how many people make advancements in this industry. You would be hard-pressed to find a working web professional today who has not discovered something by viewing a site's source!

Web professionals learn from each other and often improve upon the work that they see and are inspired by, so don't hesitate to view a site's source code and use it as a learning tool.

You cannot edit webpage source code in Safari. When viewing the source code in Safari, copy and paste it into an app that can export files as plain text (like TextEdit or Pages).

The iOS version of Safari doesn't directly support webpage source viewing, but you can set up a custom bookmark that will accomplish the same task. Create a new bookmark in Safari and name it "Show Page Source" (or something similar, so long as you can identify it). Then in the address text box, copy and paste a specific javascript code , then Save . Once the bookmark is set up, navigate to a webpage that you want to vide the source of, then open your bookmarks and select the new Show Page Source bookmark to view the webpage's source code.

Get the Latest Tech News Delivered Every Day

  • How to View the HTML Source in Google Chrome
  • How to Use Web Browser Developer Tools
  • How to View the Source Code of a Web Page
  • Add More Features by Turning on Safari's Develop Menu
  • 8 Best Free HTML Editors for Windows for 2024
  • What Is a Home Page?
  • How to Activate and Use Responsive Design Mode in Safari
  • How to Inspect an Element on a Mac
  • A Step-By-Step Guide to Editing the HTML Source of an Email
  • How to Save Web Pages in the Opera Desktop Browser
  • How to View and Type Emojis on a Computer
  • The Best Windows Web Editors for Beginners
  • How to Pin Sites in Safari and Mac OS
  • Keyboard Shortcuts for Safari on macOS
  • How to View the Source of a Message in Mozilla Thunderbird
  • How to View the Source of a Message in Apple Mail

How-To Geek

How to turn on the develop menu in safari on mac.

The Develop menu lets you view page source in Safari on Mac.

Quick Links

How to enable the develop menu in safari on mac, how to view page source in safari on mac.

When you right-click on any web page in Safari on Mac, it doesn't reveal the Show Page Source and Inspect Element buttons. To see these, you need to enable the Develop menu---we'll show you how to do that.

Once you've enabled the Develop menu, right-clicking a blank space on any website will reveal the Inspect Element and Show Page Source buttons. These allow you to take a look at the source code of any website, which is useful for things like downloading images from websites and debugging code or finding out what it looks like behind any site (for website designers).

You can easily turn on the Develop menu in Safari by following a couple of steps. Open Safari on your Mac and click the "Safari" button in the menu bar.

Next, select "Preferences." Alternatively, you can use the keyboard shortcut Command+, (comma). This will also open up Safari preferences.

Go to the "Advanced" tab.

Check the box for "Show Develop Menu in Menu Bar."

Now the Develop menu will appear between Bookmarks and Window at the top.

Apart from being able to view the page source, this will allow you to access developer-focused features, such as disabling JavaScript on any website.

Once you've enabled the Develop menu, there are a couple of ways to view the page source in Safari.

Open any website in Safari and right-click the blank space on the page. Now, select "Show Page Source." You can also get to this menu by using the keyboard shortcut Option+Command+u.

If you're looking for images or other media elements from any web page, Safari makes it easy to find these. In the left-hand pane, you will see various folders such as Images, Fonts, etc. Click the "Images" folder to quickly find the photos that you need.

After selecting an image, you can view its details easily by opening up the details sidebar. The button to open this is located at the top-right of the console, just below the gear icon. You can also open this with the shortcut Option+Command+0.

Click "Resource" at the top of the details sidebar to view details, such as the size of the image and its full URL.

You can change the position of the page source console easily, too. There are two buttons at the top-left of this console, right next to the X button. Click the rectangle icon to move the console to a different side within the browser window.

If you'd like to open the page source console in a separate window, you can click the two-rectangles icon. This will detach the console and open it in a separate window.

To check out the code for any specific element on the page, you can right-click that element and select "Inspect Element." This will take you directly to the code for the element that you selected.

Whenever you're done looking at the code, click the X button to close the page source console and return to browsing on Safari. You can also check out how to view a website's page source in Google Chrome  here.

Related: How to View the HTML Source in Google Chrome

Sign up for our daily newsletter

  • Privacy Policy
  • Advertise with Us

How to View the Source Code of a Webpage in Safari on Mac

Mahesh Makvana

Behind every beautiful webpage is a complex code called source code that serves the design and the functionality of that webpage to its users. Sometimes you may get curious and would like to see exactly what code builds a webpage. Viewing the source code of a webpage is possible in almost all web browsers, and the same applies to Safari for Mac.

Safari for Mac does allow you to view the source code of a webpage; however, it does not work like Chrome or Firefox. To view the source of a page in Safari you need to first unlock a hidden menu in the browser.

Here’s how to enable that menu and then see the source of a webpage using multiple ways.

View the Source Code of a Webpage in Safari on Mac

1. Launch Safari on your Mac.

2. When Safari launches, click on the “Safari” menu on the top followed by “Preferences…”

safarisource-pref

3. When the Preferences panel opens, click on the tab that says “Advanced”. It should be the last one in the menu on the top.

safarisource-advanced

4. Inside the Advanced tab you should see an option that says “Show Develop menu in menu bar.”

Checkmark the box for the option, and the menu should instantly be added to the menu bar in the browser.

safarisource-show

The Develop menu is now unlocked in Safari on your Mac. Here’s how you can use various options it gives you to access the source code of a webpage.

1. Using the Develop Menu

In the menu bar of Safari, you should now see a new option called “Develop” that has just been unlocked. To view the source of a page, click on the “Develop” menu and then choose “Show Page Source.”

safarisource-develop

Safari should instantly show you the full source code of the webpage.

2. Using a Keyboard Shortcut

If you plan to access the source code of a number of webpages, you may want to use a keyboard shortcut as it will be much faster than clicking an option in the menu bar and selecting another option.

safarisource-shortcut

While a webpage is open in Safari, press the “Option + Command + U” key combination, and Safari should let you see the source code of the webpage.

3. Using the Right-Click Menu

safarisource-context

If Safari is your primary browser, and you happen to be someone who is interested in viewing the codes behind various webpages, the guide above should help you do that without requiring you to leave your favorite browser.

Our latest tutorials delivered straight to your inbox

Mahesh Makvana

Mahesh Makvana is a freelance tech writer who's written thousands of posts about various tech topics on various sites. He specializes in writing about Windows, Mac, iOS, and Android tech posts. He's been into the field for last eight years and hasn't spent a single day without tinkering around his devices.

Open Folder Mac Terminal Featured 2

Chrunos is your current technology guide. Discover fascinating items on the internet and learn how to download media files.

5 Ways to View Page Source on iPhone or iPad [Inspect]

' src=

It is quite easy to view HTML page source code on Windows PC or Mac, but you don’t always hold your computer. For iOS users, you always have your iPhone around. It would be more convenient to view page source on iPhone or iPad. Actually, you can do it without third-party apps.

In this post, I will show you 5 ways to show webpage source code on iOS devices and even inspect elements. Sounds great? Keep reading to learn how. 

Method 1: Create a View Source Shortcut 

The first I recommend is to create a View Source shortcut that is available in Share Sheet, so you can easily access it from Safari. Shortcuts is a stock app in iOS 13 or new versions for automation. There are many amazing pre-made shortcuts that you can get from the internet. 

Here I will show you how to make one to view HTML source code step by step. You can refer to the steps below or the video.  If you don’t want to make it by yourself, you can also click this link to add it to your Shortcuts Library. 

Step 1. Open the Shortcuts on your iPhone or iPad. Tap on the “+” icon to create a new one. 

Step 2. Tap on the three-dot icon and enable the option “Show in Share Sheet”. Tap Done to go back to the new shortcut. 

Step 3. Type “html” in the search bar and drag the “Make HTML from Rich Text” action from the search results to the shortcut.

Step 4. Type “quick look” in the search bar and drag the “Quick Look” action to the shortcut. 

Step 5. Tap “Done” to save the shortcut and change the shortcut name to “View Source”.

Step 6. Go to Safari and open the web page where you want to view the source code. Tap the Safari Share button and select the “View Source” shortcut that you just created. 

Shortcuts only accept Safari web pages, so if you want to view source code on Chrome or other web browsers, keep reading to find other alternative methods. 

Method 2: Safari Bookmark Trick

Another way to view source code is via Safari bookmark. You can use bookmark to run a javascript and it will show the source code of any web page. 

Step 1. Copy the script. You can go to this Github page and copy the script or copy the script below. 

Step 2. Tap your browser (Chrome or Safari) Share button and select Add Bookmark. It doesn’t matter which web page you add. You just need to create a new bookmark for further usage. 

View Page Source iPhone

Step 3. Tap on the Bookmark icon and locate the new bookmark that you just created.

Step 4. From there, tap Edit and change the new bookmark name to “View Page Source” and the URL to the script that you copied before. 

Step 5. Go to the webpage where you want to view source code. Tap the Bookmark icon and select the View Page Source bookmark that you just saved. 

Then it will display the source code of that web page. If you use Chrome, it is even simpler because you can change the bookmark URL on Step 2. 

Method 3: DevTools Extension for Safari

If you also need to inspect elements, you can use a Safari extension for iPhone or iPad. There are a few of extensions that allows you to inspeact elements, including DevTools Extension, Web Inspector, and Achoo HTML Viewer & Inspector (Paid).

Let me take DevTools Extension as an example to show you how:

DevTools Extension for Safari

Step 1. Open AppStore and search for “DevToools Extension” or simply click on this link to install it.

Step 2. Once installed, go to Settings Safari > Extensions to enable DevTools Extension.

Step 3. Open Safari and visit any web page that you want to inspect. Tap on the AA icon from the address bar and select DevTools Extension.

Step 4. You will see a gear icon on the page. Tap on it and you will see the Developer Tools like on Desktop browser. When done, you can always click on the gear icon again to close Developer Tools.

Method 4: A Nice Browser That Spports View Source

Unfortunately, Chrome for iOS does not allow viewing page source. Alternatively, You can use Via Browser. It is a nice browser for iPhone and iPad that allows you to view page source and inspect elements.

Via Browser is also available for Android, so you can also use it to view page source on Android . Once you have the browser, you can tap the three bars icon on the bottom right and select Tools > View Source. It will open a new tab with the source code of your current page.

Via Browser iOS

In addition, Via browser enables you to run userscripts and change user agent. As you know, some web apps only works on Desktop. If you use Via browser to change user agent to MacOS or Windows, then you can use Desktop web app on your iPhone or iPad.

Method 5: View Source App for iOS

You can also download a dedicated app for viewing HTML source code. For that, I recommend the free app View Source , which is designed for iPhone. Once you installed this app, you will see an option View Source in your Web Browser (Safari or Chrome) Share Sheet. You can simply tap on it to see the source code. 

View Source App

In addition, it can also work as a standalone app. Within the app, you can input any webpage URL and the app will load its source code automatically. 

These 5 methods all work great on iOS devices. You can use any of them to view page source on iPhone or iPad based on your preference. For me, I prefer the Shortcuts method because Shortcuts allows you to customize it for all kinds of possibilities. 

By Cody Chrunos

Related post, 4 ways to download songs from apple music to mp3, 7 ways to download soundcloud music for free, 5 apple shortcuts alternatives for android [automation], one thought on “5 ways to view page source on iphone or ipad [inspect]”.

Thanks for this, shortcut now created, most useful.

Leave a Reply

Your email address will not be published. Required fields are marked *

You cannot copy content of this page

How to See the Source Code of a Website (Easy Methods)

Easy methods to view the source code of any webpage on a PC or a MAC using any of the popular web browsers.

Alex Chris

  • Academy Login
  • Online Courses
  • Get Free eBooks

How to view the HTML source code of a website on a Mac

How to view source code on a pc, how to view the html code of a particular page element, how to download an entire website source code.

  • Why is important to know how to view a website’s source code?

Key Learnings

It’s always useful to know how to view the source code of your website or any website. It’s a skill that can prove very handy when working on your SEO, troubleshooting problems, or just curious to see what the HTML source code of a website looks like.

In this post, you’ll learn easy methods on how to see the code of any website on any platform. Let’s get started.

To view the source of a website on a Mac using Safari, navigate to the page you want and use the following keyboard shortcut: Option+Command+U.

Alternatively, you can right-click anywhere on the page and select “Show Page Source” from the dropdown menu.

Google Chrome

To view the source code of a website on a Mac using Chrome, navigate to the page you want and use the keyboard shortcut: Option+Command+U.

Digital Marketing Training

You can also right-click on the page and select “View Page Source” from the dropdown menu.

View Website Source Code Using Chrome on a Mac

When using Firefox on a Mac, the keyboard shortcut to view the source code is: COMMAND + U

When using Google Chrome on a PC, you can view the source code of a website by using the keyboard shortcut: CTRL + U.

View Source Code Using Chrome on a PC

When using Firefox on a PC, the keyboard shortcut to view the source code is: CTRL + U

When using Opera on a PC, the keyboard shortcut to view the HTML source code of a page is: CTRL + U

Microsoft Edge

The keyboard shortcut to view the source code of a page when using the Microsoft Edge browser on a PC is: F12 & CTRL+SHIFT+I

Instead of viewing the HTML code of a whole page, you can view the code of particular page elements using the INSPECT ELEMENT option available in all popular browsers like Google Chrome, Firefox, and Safari.

The process is straightforward. Open the page in a new browser window and then highlight a section of the page using the mouse.

Right-click and then select INSPECT from the dropdown menu.

This will open the developer tools and show you the HTML code associated with the particular element or page section.

Here is a quick demo of how to do this using Google Chrome.

To download a website’s HTML source code, navigate using your favorite browser to the page, and then select SAVE PAGE AS from the FILE menu. You’ll then be prompted to select whether you want to download the whole page (including images) or just the source code.

The download options are common for all browsers.

Web Page, Complete:  Downloads the page source code and all images, CSS files, and js script associated with the particular page. All files are saved in a folder. This is useful when you need to download the images together with the HTML code.

Web Page, Single File:  Downloads the page in MHTML (short for MIME HTML). This is a form of HTML that includes both the website’s code and any external resources.

Web Page, HTML Only:  Downloads the HTML and any other elements (like embedded Java Script Code) found in the body of a page.

Why is important to know how to view a website’s source code?

There are many use cases where you might want to check the source code of a website, the most common are:

Check for the occurrence of H1 tags – Best SEO practices indicate a page should have only one H1 tag . To check if this is the case with your website, you can navigate to one of your posts, and using any of the methods described above, you can view the HTML source code of the page. You can then search for <h1> and see if there is more than one H1 tag on the page.

Check if links are nofollow – One of the ways to find out if a link has the nofollow tag added (which makes it less important for SEO rankings) is to view the HTML code of a page and check for the occurrence of the word ‘nofollow’ within the <a></a> element. You can do this to check the links on your website or any other website.

Optimize your website for speed – A good reason for analyzing your website’s source code is when optimizing your page speed . As a starting point, you can view the HTML of a page and try to identify elements (including JS and CSS files) that can be removed to make the page size smaller and faster to download. Then with the help of other tools (like Google’s PageSpeed Insights ), you can continue optimizing your code further.

It’s very easy to view or save the source code of a webpage. The process is the same for all browsers. The first step is to navigate to the page you want and then you can view the HTML using a keyboard shortcut.

You can optionally download the code in a text file. To view the HTML code of a particular page element, use the INSPECT function that is part of the developer’s tools.

Alex Chris

Alex Chris is a digital marketing consultant, author, and instructor. He has more than 18 years of practical experience with SEO and digital marketing. Alex holds an MSc Degree in eCommerce and has consulted with Fortune 500 companies in different industries. He blogs regularly about SEO and Digital marketing, and his work has been referenced by leading marketing websites. Connect with Alex on Twitter and LinkedIn .

Digital Marketing Full Course

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

safari view source shortcut

About Reliablesoft

Online training.

safari view source shortcut

How To See Source Code In Safari

Copy to Clipboard

  • Software & Applications
  • Browsers & Extensions

how-to-see-source-code-in-safari

Introduction

When browsing the web, have you ever come across a beautifully designed website and wondered how it was created? Or perhaps you encountered a webpage with a specific feature that piqued your curiosity. In such instances, being able to view the source code of a website can provide valuable insights into its structure and functionality. Understanding the source code can be beneficial for web developers, designers, and anyone interested in learning more about web technologies.

In this article, we will explore two methods for viewing the source code in Safari, Apple's popular web browser . By understanding these methods, you can gain a deeper understanding of how websites are constructed and learn from the coding techniques employed by web developers.

Whether you're a seasoned web developer or someone who is simply curious about the inner workings of the web, knowing how to access the source code in Safari can be a valuable skill. It allows you to peek behind the curtain and gain a better understanding of the technologies that power the websites we interact with on a daily basis.

Now, let's delve into the methods for accessing the source code in Safari and unlock the secrets that lie beneath the surface of the web.

Method 1: Using the Developer Tools

One of the most powerful features of Safari is its built-in Developer Tools, which provide a comprehensive set of utilities for web development and debugging. By leveraging these tools, users can not only inspect the source code of a webpage but also analyze its structure, diagnose issues, and experiment with various elements in real-time.

To access the Developer Tools in Safari, users can follow these simple steps:

Open Safari and Navigate to the Desired Webpage : Begin by launching Safari and visiting the webpage for which you want to view the source code.

Access the Developer Tools : Once the webpage has loaded, navigate to the "Develop" menu in the Safari menu bar. If the "Develop" menu is not visible, users can enable it by going to Safari Preferences > Advanced and checking the box next to "Show Develop menu in menu bar." After enabling the "Develop" menu, click on it and select "Show Web Inspector."

Explore the Web Inspector : Upon selecting "Show Web Inspector," a panel will appear at the bottom or right-hand side of the Safari window, displaying a wealth of information about the webpage. The "Elements" tab, in particular, allows users to inspect the HTML and CSS of the webpage, view and modify the DOM (Document Object Model), and analyze the layout and styling of individual elements.

Inspect Elements and Network Activity : Within the Web Inspector, users can click on specific elements of the webpage to view their corresponding HTML and CSS code. Additionally, the "Network" tab provides insights into the network activity associated with the webpage, including the loading times of various resources such as images, scripts, and stylesheets.

Experiment and Debug : The Developer Tools in Safari offer a range of features for experimenting with code, debugging JavaScript, and optimizing webpage performance. Users can modify CSS styles, execute JavaScript commands, and analyze console logs to identify and troubleshoot issues within the webpage.

By utilizing the Developer Tools in Safari, users can gain a deeper understanding of how webpages are constructed, identify opportunities for optimization, and learn from the coding techniques employed by web developers. Whether you're a web development enthusiast, a designer seeking inspiration, or a curious individual eager to unravel the mysteries of the web, the Developer Tools in Safari provide a gateway to the inner workings of the internet.

With the ability to inspect and manipulate the source code of webpages, users can embark on a journey of discovery, uncovering the building blocks that form the digital landscape we interact with each day. The Developer Tools in Safari empower users to not only view the source code but also to interact with it, fostering a deeper appreciation for the art and science of web development.

Method 2: Using the View Source Option

In addition to the powerful Developer Tools, Safari offers a straightforward method for viewing the source code of a webpage through the "View Source" option. This method provides a quick and convenient way to access the underlying HTML, CSS, and JavaScript code of a webpage without the need for advanced developer tools.

To utilize the "View Source" option in Safari, users can follow these simple steps:

Navigate to the Desired Webpage : Begin by opening Safari and visiting the webpage for which you want to view the source code. This could be a website that captures your interest, a page with a specific feature you'd like to explore, or a site you're curious to learn from.

Access the "View Source" Option : Once the webpage has loaded, navigate to the Safari menu bar and click on "View." From the dropdown menu, select "Show Page Source" or use the keyboard shortcut "Option + Command + U." This action will open a new window or tab displaying the complete source code of the webpage.

Explore the Page Source : Upon accessing the page source, users can delve into the raw HTML, CSS, and JavaScript code that forms the foundation of the webpage. This view provides a comprehensive look at the structure, content, and styling of the webpage, allowing users to gain insights into the coding techniques and design elements employed by the web developers.

Navigate and Analyze the Source Code : Within the "Page Source" view, users can navigate through the code to examine specific elements, styles, and scripts used in the webpage. This exploration can provide valuable learning opportunities for those interested in understanding how different features and functionalities are implemented through code.

Gain Insights and Inspiration : By viewing the source code of webpages through the "View Source" option, users can gain a deeper appreciation for the intricacies of web development. Whether it's observing the structure of a responsive layout, analyzing the implementation of interactive elements, or studying the use of external libraries and frameworks, the "View Source" option offers a window into the creative and technical aspects of web design and development.

The "View Source" option in Safari serves as a gateway for users to explore the inner workings of webpages, fostering a deeper understanding of the technologies that power the internet. Whether you're a budding web developer, a design enthusiast, or simply someone with a curiosity for the digital realm, the ability to access and analyze the source code through this method can be both enlightening and inspiring.

By embracing the "View Source" option in Safari, users can embark on a journey of discovery, uncovering the building blocks that form the digital landscape we interact with each day. This method provides a user-friendly approach to peek behind the curtain of web development, empowering individuals to learn, explore, and find inspiration in the code that shapes the online experiences we encounter.

In conclusion, the ability to view the source code in Safari opens a gateway to the inner workings of the web, providing valuable insights into the technologies and techniques that drive the creation of captivating and functional websites. By exploring the two methods outlined in this article, users can gain a deeper understanding of web development, design principles, and the intricate coding that underpins the digital landscape.

Through the utilization of Safari's Developer Tools, users can delve into the intricacies of web development, inspecting and manipulating the source code to gain a comprehensive understanding of how webpages are constructed. The Developer Tools empower users to not only view the source code but also to interact with it, fostering a deeper appreciation for the art and science of web development. Whether it's analyzing the structure of a webpage, debugging JavaScript, or optimizing performance, the Developer Tools provide a playground for exploration and learning.

Additionally, the "View Source" option in Safari offers a user-friendly approach to accessing the underlying code of webpages, allowing individuals to explore the raw HTML, CSS, and JavaScript that form the foundation of the digital experiences we encounter. This method provides a quick and convenient way to gain insights into the coding techniques and design elements employed by web developers, fostering a deeper appreciation for the creative and technical aspects of web design and development.

By embracing these methods for accessing the source code in Safari, users can embark on a journey of discovery, uncovering the building blocks that form the digital landscape we interact with each day. Whether you're a seasoned web developer, a design enthusiast, or simply someone with a curiosity for the digital realm, the ability to access and analyze the source code can be both enlightening and inspiring.

In essence, the knowledge gained from viewing the source code in Safari can serve as a springboard for learning, experimentation, and inspiration. It provides a window into the creative and technical aspects of web development, empowering individuals to gain a deeper understanding of the technologies that power the internet. As the digital realm continues to evolve, the ability to peek behind the curtain of web development equips individuals with the insights and skills to contribute to the ever-changing landscape of the web.

By mastering the art of viewing the source code in Safari, individuals can unlock the potential to create, innovate, and shape the future of the web, armed with a deeper understanding of the coding techniques and design principles that drive online experiences.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

  • Crowdfunding
  • Cryptocurrency
  • Digital Banking
  • Digital Payments
  • Investments
  • Console Gaming
  • Mobile Gaming
  • VR/AR Gaming
  • Gadget Usage
  • Gaming Tips
  • Online Safety
  • Software Tutorials
  • Tech Setup & Troubleshooting
  • Buyer’s Guides
  • Comparative Analysis
  • Gadget Reviews
  • Service Reviews
  • Software Reviews
  • Mobile Devices
  • PCs & Laptops
  • Smart Home Gadgets
  • Content Creation Tools
  • Digital Photography
  • Video & Music Streaming
  • Online Security
  • Online Services
  • Web Hosting
  • WiFi & Ethernet
  • Browsers & Extensions
  • Communication Platforms
  • Operating Systems
  • Productivity Tools
  • AI & Machine Learning
  • Cybersecurity
  • Emerging Tech
  • IoT & Smart Devices
  • Virtual & Augmented Reality
  • Latest News
  • AI Developments
  • Fintech Updates
  • Gaming News
  • New Product Launches

Close Icon

  • A Indstria 40 Realizing Isaac Asimov8217s Dream in the Age of Robots

Learn To Convert Scanned Documents Into Editable Text With OCR

Related post, how to make stairs planet coaster, how to rotate camera in planet coaster, how to make a good roller coaster in planet coaster, where is the minecraft folder, how to update minecraft windows, how to update minecraft education edition, related posts.

How To View Page Source On Tablet

How To View Page Source On Tablet

How To Inspect In Safari On IPad

How To Inspect In Safari On IPad

How To Debug In Safari

How To Debug In Safari

How To View Page Source On Safari

How To View Page Source On Safari

How To Inspect Page On Safari

How To Inspect Page On Safari

How To Download R Studio On Mac

How To Download R Studio On Mac

How To Download Video From Inspect Element

How To Download Video From Inspect Element

How To Remove Sidebar In Safari

How To Remove Sidebar In Safari

Recent stories.

A Indústria 4.0: Realizing Isaac Asimov’s Dream in the Age of Robots

A Indústria 4.0: Realizing Isaac Asimov’s Dream in the Age of Robots

Learn To Convert Scanned Documents Into Editable Text With OCR

Top Mini Split Air Conditioner For Summer

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Comfortable and Luxurious Family Life | Zero Gravity Massage Chair

Fintechs and Traditional Banks: Navigating the Future of Financial Services

Fintechs and Traditional Banks: Navigating the Future of Financial Services

AI Writing: How It’s Changing the Way We Create Content

AI Writing: How It’s Changing the Way We Create Content

How to Find the Best Midjourney Alternative in 2024: A Guide to AI Anime Generators

How to Find the Best Midjourney Alternative in 2024: A Guide to AI Anime Generators

How to Know When it’s the Right Time to Buy Bitcoin

How to Know When it’s the Right Time to Buy Bitcoin

Robots.net

  • Privacy Overview
  • Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

mactrast

How to “View Page Source” in Safari on Mac

How to “View Page Source” in Safari on Mac

Being able to “view page source” or “inspect element” on a webpage can be very helpful to advanced Mac users. You can troubleshoot webpage related issues, adjust styling in the HTML code, or even learn optimization tips from websites you consider the industry leaders.

This guide is meant to help users who are transitioning from Windows or other Mac browsers to Safari on macOS . If you’re anything like me, you use multiple browsers for different reasons (or even different projects to better manage yourself). While Chrome is fast and light, the Mac’s default browser is better integrated with the entire Apple eco-system allowing you to sync password keychain options.

Compared to other Mac browsers such as Chrome, Firefox, or Opera; Safari doesn’t have the option to “view page source” enabled by default. However, you can adjust the setting with a couple of steps.

  • Open your Safari browser
  • Click on “Safari” in the navigation bar and select “Preferences”
  • Go to “Advanced” tab
  • Check “Show develop menu in menu bar”

After you exit the preferences, you’ll be able to two-finger tap on your trackpad (or right click with your mouse) to see the options to “show page source” or even “inspect element.”

Find the step-by-step image guide below.

Step 1) In Safari, select Preferences

Step 2) Select “Advanced” tab and check “Show Develop menu in menu bar”

Step 3) Select “Show Page Source” or “Inspect Element”

flipboard-share

  • Privacy Policy
  • Terms of Service

CitizenSide

Viewing The HTML Source Code In Safari

Published: August 29, 2023

viewing-the-html-source-code-in-safari

Why View HTML Source Code in Safari?

Viewing the HTML source code of a webpage can provide valuable insights for developers, designers, and even curious users. Understanding the underlying code structure can help identify and troubleshoot issues, inspect elements and their properties, and gain a deeper understanding of how a website is built. Safari, the default web browser for Apple devices, offers several methods to view the HTML source code, each with its own advantages. Whether you’re a web professional or simply want to quench your curiosity, exploring the HTML source code in Safari can be a rewarding endeavor.

By viewing the HTML source code, web developers can gain a comprehensive understanding of how a webpage is constructed. It allows them to analyze the code structure, identify potential errors or bugs, and make necessary modifications. This is particularly useful when troubleshooting layout issues, debugging JavaScript functions, or optimizing website performance. With Safari’s intuitive interface, developers can easily view and navigate through the HTML source code, making the debugging process more efficient.

For web designers, viewing the HTML source code in Safari enables them to inspect the styles applied to different elements. By examining the CSS properties, designers can better understand how the visual elements are defined and styled. This knowledge is crucial when designing responsive websites, as it allows them to fine-tune the layout for different screen sizes and ensure a consistent user experience across devices. Additionally, by analyzing the HTML structure, designers can optimize the code for search engine optimization (SEO) and improve the website’s visibility in search engine results.

Even for non-technical users, exploring the HTML source code can offer a glimpse into the inner workings of a website. It allows them to understand how different elements are organized, learn about the technologies used, and appreciate the complexity involved in building a web page. Furthermore, viewing the HTML source code can help users detect any malicious scripts or suspicious content hidden within a webpage. This knowledge can be empowering, as it enhances their online security and enables them to make informed decisions while browsing the internet.

Safari provides several methods to view the HTML source code, making it accessible to users with varying levels of technical expertise. Whether you’re a developer looking to troubleshoot issues, a designer seeking to refine your layout, or a curious user wanting to delve deeper into the web, Safari’s HTML source code viewing options offer a valuable toolset for exploring the digital landscape.

Method 1: Using the Develop Menu

Safari’s Develop menu offers a straightforward way to view the HTML source code of a webpage. Here’s how to access and utilize this method:

  • Open Safari and navigate to the webpage for which you want to view the source code.
  • Click on the “Develop” menu in the menu bar at the top of the screen. If you don’t see the “Develop” menu, go to Safari preferences, select the “Advanced” tab, and check the box next to “Show Develop menu in menu bar.”
  • In the Develop menu, hover over “Page Source” to reveal a submenu of options.
  • Select “Show Page Source” to open a new window displaying the HTML source code of the webpage.
  • In the HTML source code window, you can browse, search, and analyze the code to gain insights into how the webpage is built. You can also copy and paste sections of the code for further analysis or reference.

The Develop menu is a powerful tool for developers and designers, providing easy access to the HTML source code and allowing for efficient troubleshooting and debugging. It is particularly useful when analyzing complex webpages with dynamic content, as it enables you to inspect the underlying code that generates the page’s elements.

It’s worth noting that the Develop menu also offers additional options for advanced users, such as disabling JavaScript or CSS on the current webpage. These options can be valuable when testing and fine-tuning website functionality or performance.

By utilizing the Develop menu in Safari, you can quickly and effortlessly view the HTML source code of any webpage, empowering you with the knowledge to understand and manipulate the code as needed.

Method 2: Using the Keyboard Shortcut

If you prefer to use keyboard shortcuts, Safari offers a convenient way to view the HTML source code with just a few key presses. Follow these steps:

  • Press the Option + Command + U keys simultaneously. Alternatively, you can right-click anywhere on the webpage and select “Show Page Source” from the context menu.
  • A new window or tab will open, displaying the HTML source code of the webpage.
  • In the HTML source code view, you can scroll, search, and analyze the code to gain insights into the webpage’s structure and elements.

This keyboard shortcut provides a quick and efficient way to access the HTML source code, allowing you to bypass the menus and access the code with ease. It’s particularly helpful for users who prefer using keyboard shortcuts for their browsing tasks.

This method is suitable for developers, designers, and curious users who want a fast and accessible way to view the HTML source code without the need to navigate through multiple menus and options.

Using the keyboard shortcut in Safari provides a streamlined approach to view the HTML source code, presenting you with a detailed look into the inner workings of the webpage in just a few simple steps.

Method 3: Using the Right-Click Menu

If you prefer a more context-sensitive approach, Safari offers the ability to view the HTML source code directly from the right-click menu. Follow these steps:

  • Right-click anywhere on the webpage to open the context menu.
  • From the context menu, select the “Inspect Element” or “Inspect” option. This will open the Safari Developer Tools panel.
  • In the Developer Tools panel, you will see various tabs such as Elements, Console, and Network. Click on the “Elements” tab.
  • The Elements tab will display the HTML structure of the webpage, allowing you to view, explore, and make changes to the code as needed.

The right-click menu method is particularly useful for web developers and designers who want a more comprehensive set of tools to inspect and modify the code. It provides a more interactive and dynamic experience, enabling you to not only view the HTML source code but also make live changes and see the immediate results.

Using the right-click menu in Safari leverages the built-in Developer Tools feature, giving you granular control over the HTML source code and the ability to diagnose and fix issues with ease.

Whether you need to troubleshoot layout problems, inspect CSS styles, or delve into the code structure, the right-click menu method in Safari provides a convenient way to access and analyze the HTML source code of any webpage.

Method 4: Using the Inspector Tool

Safari’s Inspector tool offers a powerful and versatile way to view the HTML source code, inspect elements, and make live changes on the fly. Follow these steps to use the Inspector tool:

  • Open Safari and navigate to the webpage you want to inspect.
  • Right-click on any element on the webpage and select “Inspect Element” from the context menu. Alternatively, you can go to the “Develop” menu, choose “Show Web Inspector,” or use the keyboard shortcut Option + Command + I.
  • The Inspector tool will appear as a separate pane or sidebar, with the HTML source code displayed in the Elements tab.
  • You can explore the HTML structure by expanding and collapsing elements, revealing nested tags and attributes.
  • By hovering over an element in the code, the corresponding area on the webpage will be highlighted, providing a visual representation of the code.
  • Inspecting the Styles tab will reveal the CSS properties applied to each element, allowing you to understand and modify the visual appearance of the webpage.
  • The Inspector tool also provides additional tabs for examining the Network activity, JavaScript Console, and more, offering a comprehensive set of debugging and development tools.

The Inspector tool in Safari is invaluable for web developers and designers, providing a rich set of features to analyze and manipulate the HTML source code. It allows for real-time debugging, making it easier to identify and resolve issues with precision.

This method is especially beneficial for developers who need to closely examine specific elements, troubleshoot layout issues, or fine-tune the CSS styles of a webpage. Designers, too, can use the Inspector tool to gain insights into the structure and styling of a website, enabling them to refine the visual presentation with ease.

By utilizing the powerful capabilities of the Inspector tool in Safari, you can confidently navigate and manipulate the HTML source code, while fine-tuning the design and functionality of your webpages.

Method 5: Using Safari Extensions

Safari offers the flexibility to enhance its functionality through extensions, and there are several extensions available that can assist in viewing the HTML source code of a webpage. Here’s how to use Safari extensions for this purpose:

  • Open Safari and go to the Apple App Store or the Safari Extensions Gallery to search for HTML source code viewing extensions.
  • Install the desired extension by following the provided instructions.
  • Once installed, navigate to the webpage you want to examine.
  • Look for the Safari extension’s icon in the Safari toolbar or the browser’s menu.
  • Click on the extension’s icon to activate it and view the HTML source code of the current webpage.
  • The extension may display the HTML source code in a separate window or provide a panel within Safari.

Using Safari extensions to view the HTML source code adds flexibility and customization to your browsing experience. Extensions can provide additional features and options beyond what Safari offers by default, making them valuable tools for developers, designers, and curious users alike.

Extensions dedicated to HTML source code viewing may offer enhanced functionality, such as syntax highlighting, code formatting, and search capabilities, to help you analyze the code more efficiently. Some extensions may even provide additional tools, like debugging and live editing, to make your development or troubleshooting tasks easier.

When using Safari extensions, it’s important to choose reputable and trusted sources for downloading them to ensure your online security. Review the user reviews and ratings of the extension before installation to ensure it meets your requirements.

By leveraging Safari extensions specifically designed for viewing the HTML source code, you can enhance your browsing experience and gain deeper insights into the structure and functionality of webpages.

Avatar

Related Stories

How To View The Source Code Of A Web Page

How To View The Source Code Of A Web Page

How To Activate The IPhone Debug Console Or Web Inspector

How To Activate The IPhone Debug Console Or Web Inspector

Add More Features By Turning On Safari’s Develop Menu

Add More Features By Turning On Safari’s Develop Menu

How To Inspect An Element On A Mac

How To Inspect An Element On A Mac

HTC File (What It Is & How To Open One)

HTC File (What It Is & How To Open One)

What’s An MHT File And How Do You Open One?

What’s An MHT File And How Do You Open One?

What Is A Web Browser?

What Is A Web Browser?

Which Browser Should I Use For Watching Movies?

Which Browser Should I Use For Watching Movies?

The Magic of a Business Model: Successful Companies You Could Learn From

The Magic of a Business Model: Successful Companies You Could Learn From

A Comprehensive Guide to Choosing the Right Method of MFA for Your Business

A Comprehensive Guide to Choosing the Right Method of MFA for Your Business

Democratizing Access: How Cryptocurrency Exchange Aggregators Empower Traders

Democratizing Access: How Cryptocurrency Exchange Aggregators Empower Traders

Tips for Choosing the Best Cryptocurrency Wallet for You

Tips for Choosing the Best Cryptocurrency Wallet for You

How Do Workers’ Compensation Lawyers Maximize Your Benefits?

How Do Workers’ Compensation Lawyers Maximize Your Benefits?

Top 100 Christmas Songs for the Best Christmas Music

Top 100 Christmas Songs for the Best Christmas Music

The Life and Career of Dean Haglund: A Journey from Canada to the Paranormal and Beyond

The Life and Career of Dean Haglund: A Journey from Canada to the Paranormal and Beyond

16 Best Ad Blocker For Every Browser and Device

16 Best Ad Blocker For Every Browser and Device

Different Types of Aesthetics: 30 Outfit Ideas to Step Up Your OOTD Game

Different Types of Aesthetics: 30 Outfit Ideas to Step Up Your OOTD Game

Monopoly Man Monocle and 10 Other Popular Examples of the Mandela Effect

Monopoly Man Monocle and 10 Other Popular Examples of the Mandela Effect

Geek Instructor text logo

How to View Web Page Source Code on iPhone: 5 Ways

A source code is something that every developer is familiar with. In fact, they play with source codes every day. While carrying out your work on a PC or a laptop, it is easy as a pie to check the source code of any web page or website. Just right-click and you have the option right on your screen. Similarly, when you are using an Android phone, browsers like Chrome give the option to view the source code of any web page easily.

View source code of web pages on iPhone

But this is not the case when you are working with an iPhone or an iPad. If you own an iPhone, and you get an urgent requirement to check the source code of any web page, you feel helpless and you have to go through the whole process of opening your PC, visiting that web page, and then inspecting it. This whole process is irritating and surely takes a lot of time. And at that time you wish if it was possible to inspect the same web page using the Safari browser of my iPhone.

Well, to your surprise, yes it is possible to view the HTML source code of any web page right through your iPhone’s Safari app. Although it’s not as simple as in Android phones, we have shared some tips and tricks that will help you out. So use these methods and the next time some web page fascinates you and you want to inspect it, just do it using your iPhone or iPad.

Table of Contents

1. Use Web Inspector Safari extension on iPhone

There is a new Safari extension available for iPhone and iPad which comes by the name Web Inspector. It is recently launched after the iOS 15 update. This extension is the most advanced web inspector tool that has ever made for the mobile smartphones till now. Why we are saying this is because it gives you features which are available in the desktop browser inspector tool. You can not only view the source code of a web page but also inspect particular HTML elements in the DOM, run codes in the console, check network requests and resources used by the web page and much more.

Here’s how you can use the Web Inspector extension on Safari browser to view page source code on your iPhone or iPad –

  • First, install the Web Inspector from the App Store. It is available for free and would take just few seconds to download as the size is very small.
  • Once installed, you will see the app added to your home screen. Click on it to open and then it will ask to allow Safari extension from the settings.
  • Open the Settings on your iPhone or iPad and go to Safari .

Enable extension in Safari

  • To check the source code, open the Safari app and visit the web page.

Web Inspector extension

  • If you go to the Elements tab, there you can check more details of the element such as attributes, styles, and even computed style like you see on the desktop browsers. You can also make edits in the HTML source code of the web page, apply the changes and see the live preview.

2. Create a view source shortcut for Safari

In this method, we will using Shortcuts app on iPhone to create a shortcut for viewing the source code on Safari. This is very technical method and you will need to be attentive while following the steps. To start with, first find and open the Shortcuts app and tap the plus button at the top right corner. In the next screen, give a name to your shortcut like View source or whatever you want.

After that, tap the three dots in the upper right corner which will open a pop up box on your screen. Enable the Show in Share Sheet button and click the Done option.

Set the type of content you want to receive from the Share Sheet to Safari web pages only by clicking on the Any option on the Receive command. Make sure to clear all other inputs.

Now tap the + Add Action button and search for Make HTML from Rich Text . Click on it to add it to the shortcut.

Search for another action named Quick Look using the search bar at the bottom and add it also. This is how the final page will look like –

Create shortcut for view source

Now you have successfully create a shortcut for viewing source code of any web page on Safari browser. To use it, visit the web page you want to inspect and click the share button at the bottom. Swipe it up and click on the View Source option that you created with the Shortcuts app. This will open a pop up box where you will see the HTML source code of the web page.

3. Safari bookmark trick to view page source

This is the old school method which used to the only way to view the source code on iPhone before when there are no extensions available for Safari browser. This method would require you to use a script code and save it as bookmark on Safari. Then you simply need to open the bookmark on the web page you want to inspect. Here’s a detailed guide on this method –

First of all, open the Safari browser on your iPhone or iPad and visit any web page. Click on the share button (a square with an arrow pointing upward) at the bottom. Next, click on the Add bookmark option and then save it. Now you need to go to the Bookmarks, click the Edit option and then choose the bookmark you have recently saved. Change it name to something like “ View source ” and replace the address field with the below code.

Now all the technical part is done. Whenever you want to view the source code of a web page, simply open it, go to the Bookmarks and click on the new bookmark you have created to run the script. You will then see the code all over your screen. The drawback of this method is that it doesn’t highlight the HTML elements in different colors so it become little difficult to find what you are looking for.

View source using bookmark script

4. Use Google’s webpage cache to view source

If you don’t want to install a third party extension on your phone or don’t use any method that involves script to view the source code of a webpage on your iPhone or iPad then this method is for you. Here will use the Google’s cache version of the web page to view its HTML source code.

For those who don’t know, Google save a cached copy of all web pages that are indexed on it. You can publicly access this cached version by adding cache: before the address of the web page. This is all what you have to do in this method.

Simply, open the Safari browser on your iPhone or iPad and visit the web page or website whose source code you want to view. After that, click on the URL tab and add cache: at the starting. As you visit the link, it will take you to Google’s cache page. Make sure there is no space after cache: otherwise you will land on Google search page instead. The next thing you have to do is to click on the View source option.

View source Google's cache

Please note that this method will only show the web page as it appeared the last time when Google crawled it. In the meantime, the current page could have changed so you won’t get to see the updated HTML source code with this method until the Google crawl the web page again.

5. Use View Source application

Although we have shared enough methods for this topic but this last one is for those people who wants to use a specific application for viewing the source code of the web pages on their iOS device. There is an app named View Source which you can find on the App Store. You simply need to install this app on your phone, open it and enter the URL of the web page you want to inspect. It will then instantly show the HTML source code. As simple as that!

Use View Source app on iPhone

Another feature that this app has is the direct integration with the Safari browser. When you browsing on Safari and instantly need to view the source of a web page, just click on the share button and swipe the pop up to reveal all options. You will find View Source there. Clicking on that will open a pop-up window where you will see the source code of the web page.

So these are some methods which you can use to view the page source in Safari browser on your iPhone or iPad. Out of all these, using the Web Inspector extension is the best one as it gives you other useful features also which are available on desktop browser. Other than that, you can also use Google’s cache method to quickly view the source code of any web page without installing any app or extension on your device. Let us know which method your personally liked that you will use. If you are facing any problem, feel free to share it in the comments below.

Vivek Chaudhary

Vivek Chaudhary Author

Related Posts

Take screenshot on iPhone

How to Take a Screenshot on iPhone: 6 Ways

Change App Store location on iPhone

How to Change App Store Country on iPhone

Fix flickering iPhone slow motion videos

How to Fix Flickering in iPhone Slow-Motion Videos

Fix incoming call busy problem

10 Ways to Fix Incoming Call Busy Problem [Solved]

Leave a comment cancel reply.

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

OS X Daily

Tips & Tricks

Troubleshooting, 31 useful safari keyboard shortcuts for mac.

Safari icon

Safari is the fast and lean default web browser bundled with every Mac and Mac OS X. You probably already know a keyboard shortcut or two, but there are tons of shortcuts in Safari worth remembering that can really improve your experience browsing the web.

We’ll cover 31 different keystrokes for Safari on Mac, they are grouped into different sections based on use case, and we’ve also included a few multi-touch gestures for those of us with multitouch capable Macs. You’ll get a grand total of 31 keyboard shortcuts for Safari on Mac, and 4 Safari gestures too!

8 Safari Shortcuts for Navigating Tabs & Web Pages

  • Switch to Next Tab – Control+Tab
  • Switch to Previous Tab – Control+Shift+Tab
  • Scroll Down by Full Screen – Spacebar
  • Scroll Up by Full Screen – Shift+Spacebar
  • Go to Address Bar – Command+L
  • Open New Tab – Command+T
  • Open Link in New Tab – Command+Click a link
  • Add Linked Page to Reading List – Shift+Click link

7 Safari Shortcuts for Reading & Viewing Pages

  • Strip Styling and View in Reader – Command+Shift+R
  • Increase Text Size – Command+Plus
  • Decrease Text Size – Command+Minus
  • Default Text Size – Command+0
  • Enter or Exit Full Screen – Command+Escape
  • Open Home Page – Command+Shift+H
  • Mail Link to Current Page – Command+Shift+I

5 Safari Shortcuts for Caches, Loading Pages, Source, and Pop Ups

  • Empty Browser Cache – Command+Option+E
  • Reload Page – Command+R
  • Stop Loading Page – Command+.
  • View Page Source – Command+Option+U
  • Disable Pop Up Windows – Command+Shift+K

3 Safari Shortcuts for Finding and Navigating Found Items

  • Find Text on Page – Command+F
  • Navigate Found Items Forward – Return
  • Navigate Found Items Backwards – Shift+Return

8 Safari Shortcuts for Toolbars, History, and Reading List

  • Hide or Show Toolbar – Command+i
  • Hide or Show Bookmarks Bar – Command+Shift+B
  • Hide or Show Status Bar – Command+/
  • Hide or Show Tab Bar – Command+Shift+T
  • Show Top Sites – Command+Option+1
  • Show History – Command+Option+2
  • Show Reading List – Command+Shift+L
  • Show Downloads – Command+Option+L

Bonus: 4 Safari Multi-Touch Gestures

  • Go Back – Two Finger Swipe Left
  • Go Forward – Two Finger Swipe Right
  • Zoom Out / Decrease Font Size – Pinch
  • Zoom In / Increase Font Size – Spread / Reverse Pinch

There are even more keyboard commands, but the above lists recommend the most useful. If you’re looking through the menus and wondering what some of those symbols are, our recent post on Mac keyboard symbols should help decipher some of the peculiar looking glyphs.

Want to learn more keystrokes for other apps? Browse through our other keyboard shortcut lists , you’ll notice there are often similarities between the shortcuts and apps, particularly those created by Apple.

Enjoy this tip? Subscribe to our newsletter!

Get more of our great Apple tips, tricks, and important news delivered to your inbox with the OSXDaily newsletter. 

You have successfully joined our subscriber list.

.

Related articles:

  • How to Automatically Change iPhone Wallpaper with Shortcuts
  • How to Find Mac Keyboard Shortcuts
  • How to Install Third-Party Shortcuts on iPhone & iPad
  • 14 Keyboard Shortcuts for Files App on iPad

18 Comments

» Comments RSS Feed

Thanks for sharing

Try command + [ for back command + ] for forward

Thank you very much.

Look inside the Safari.app folder. There’s a file called: Shortcuts.html

file:///Applications/Safari.app/Contents/Resources/Shortcuts.html

Great to make a Bookmark of, and to keep all the shortcuts close. :)

A four finger swipe gives you the last program opened consecutively.

If you use several web browsers, it may be helpful to standardize your keyboard commands across all applications using System Preferences. I set “Switch to Next/Previous Tab” to command+option+left/right arrow. Also, I used the System Preferences pane “BetterTouchTool” to perform those actions with three-finger left/right swipes.

It’s one finger swipe for go forward/back. Two finger swipe makes you go to dashboard or change despktop/full screen app.

This depends on input method and also on your settings. It can be a one finger swipe, two finger swipe or even a three finger swipe.

Hide or Show Toolbar – Command+i

Hide or Show Toolbar – Command+| (vertical divider)

Mail Current Page – Command+i (mails contents)

Hide or Show Toolbar does not work.

Every page I go to has this shortcut listed and it doesn’t. work.

The two finger dragging direction is counter-intuitive. Just as dragging up a page in Lion pulls the page up, I’d prefer to drag the page from left to right to pull in the previous page.

Navigate Found Items Forward – Return

Also, Command + G

Look up in dictionary ctrl + command + d when hovering a word with the cursor.

the three-finger tap can be used for this as well.

That’s great. Thanks!

Great list but Safari has some features I can’t stand right now, mainly the automatic refresh thing and other iOS inspired elements that make it difficult to use. I’m using Chrome for the time being since Firefox crapped the bed and never recovered from it’s mishap. Hopefully Apple fixes Safari, I like it a lot.

Yes the fact that Safari refreshes the page every time you hit the back button is very annoying. I don’t see any benefit in it either and it means you download the page contents again unnecessarily.

I Like Chrome .

Leave a Reply

Name (required)

Mail (will not be published) (required)

safari view source shortcut

Subscribe to OSXDaily

Subscribe to RSS

  • - How to Enable Screen Sharing in MacOS Sonoma & Ventura
  • - How to Find Your Phone Number on iPhone
  • - How to Import Google Chrome Data into Microsoft Edge
  • - How to Convert Photos to Videos on iPhone & iPad
  • - How to Hide iPhone Keyboard When It’s Covering Buttons & Won’t Go Away
  • - New M4 iPad Pro, M2 iPad Air, Apple Pencil Pro, & Magic Keyboard Released by Apple
  • - The Apple Pirate Flag – A Fun Story from Apple History, and a Free Wallpaper
  • - Beta 3 of iOS 17.5, macOS Sonoma 14.5, iPadOS 17.5, Available for Testing
  • - Apple Event Set for May 7, New iPads Expected
  • - Beta 2 of iOS 17.5, iPadOS 17.5, macOS Sonoma 14.5, Available for Testing

iPhone / iPad

  • - How to Use the Latest GPT 4 & DALL-E 3 Free on iPhone & iPad with Copilot
  • - How to Bulk Image Edit on iPhone & iPad wth Copy & Paste Edits to Photos
  • - Beta 4 of macOS Sonoma 14.5, iOS 17.5, iPadOS 17.5, Available for Testing
  • - How to Customize the Finder Sidebar on Mac
  • - How to Uninstall Apps on MacOS Sonoma & Ventura via System Settings
  • - Make a Website Your Mac Wallpaper with Plash
  • - What Does the Number Badge Mean on Microsoft Edge Icon?
  • - What’s a PXM File & How Do You Open It?
  • - Fixing Apple Watch False Touch & Ghost Touch Issues

Shop on Amazon to help support this site

About OSXDaily | Contact Us | Privacy Policy | Sitemap

This website is unrelated to Apple Inc

All trademarks and copyrights on this website are property of their respective owners.

© 2024 OS X Daily. All Rights Reserved. Reproduction without explicit permission is prohibited.

View Source for Safari on iOS with Shortcuts

I love view-source , it's a nifty super power of the web that nearly all mobile browsers are trying to kill. Not exactly sure why. View-source is what got me into web development because I could see how other people structured their pages, and at the time I started web development it was pretty much the only way to debug web pages.

I've also been using my iPad Pro whilst I am not at work for the next month or so... It's a great device, and it appears to be locked down in a way that restricts me from doing exactly what I want... this is until I found out about the Shortcuts app that is built in to iOS.

Shortcuts let you build small utilities, programs and automations that perform actions on certain user gestures like "Share a Page", or "Open an app", or "Connect to WiFi".

Now that I can share URLs to an "app", I can do a lot of things that are not really possible on mobile devices.

I created this "View Source" shortcut that you can use (if you trust me) to Share a page from Safari or Chrome and quickly view the source.

Here it is in action:

View Source in the Share Sheet

There is one major caveat. It doesn't inspect the exact instance of the page you are running, it has to the page in a 3rd party site that I built ( https://www-source.glitch.me ) / source - this means that if you are logged in, or there is any state that is shared (such as cookies) then it will not display the same content that you are viewing.

It's kinda hard to share the source code of a Shortcuts, so here is a screenshot:

View Source Code

I really hope that Safari (and Chrome) can deprecate the need for this shortcut.

Subscribe to feed

  • Sorry Safari team
  • Creating a quick launcher for Android using the web
  • Shiming Request.formData in Safari
  • Twitter is using PWA shortcuts
  • Ricky Mondello: Adoption of Well-Known URL for Changing Passwords

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev , contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation .

I'm trialing a newsletter, you can subscribe below (thank you!) Enter your email

RSS

WebNots

Home » Tech Tips » iPhone » How to View Webpage HTML Source in iPhone?

How to View Webpage HTML Source in iPhone?

On desktop computers, you can use the developer console on the browsers to check the source code of websites. This is a very easy task when using Google Chrome browser both on Mac and Windows based computers. However, viewing source code is a lengthy process when using Safari browser on MacBook . And, that’s a kind of hidden feature with the Safari on your iPhone. If you ever wonder how to look at the HTML source code of webpages in your iPhone, here is how you can do that.

Can I View Source Code of Webpages in Safari iPhone?

The answer is no. You can’t view the source code of webpages directly on your iPhone. It also does not make sense to do such analysis with a small screen devices. However, Apple allows you to view the source code of mobile webpages and do all the Developer Console related stuffs from your Mac.

What You Need?

You need the following things to view the source code of iPhone Safari webpages on your Mac?

  • Your iPhone with the the latest iOS version
  • Lightning or USB-C connector cable
  • Your Mac computer or laptop
  • Safari browser in both iPhone and Mac

How to View Source Code of Webpages in Safari iPhone?

Follow the below steps to view the source code of webpages in Safari iPhone on your Mac.

  • Add “Develop” menu in Mac Safari
  • Enable “Web Inspector” in Safari iPhone
  • Connect iPhone to Mac
  • View source and inspect elements

Step 1 – Add Develop Menu in Safari Mac

By default, Mac Safari does not show the developer console and inspect element options. You need to manually enable “Develop” menu in order to use developer console in Safari.

  • Launch Safari and go to “Safari > Settings…” section.
  • Go to “Advanced” tab and enable “Show Develop menu in the menu bar” option.

Show Developer Features in Mac Safari

Learn more on how to add “Develop” menu in Safari and do the responsiveness testing of website.

Step 2 – Enable Web Inspector in Safari iPhone

Similar to enabling “Develop” menu in Safari Mac, you also need to enable an option called “Web Inspector” in Safari iPhone.

  • Tap on the “Settings” app and go to “Safari” settings page on your iPhone.
  • Scroll down to the bottom and tap on “Advanced” option.
  • On the next screen, you can enable “Web Inspector” option.

Advanced Safari Settings iPhone

Step 3 – Connect iPhone to Mac

Now that you have setup your iPhone and Mac. Next step is to connect the iPhone to your Mac. If you have old iPhone / Mac models, use your USB lightning cable to connect the phone to Mac. However, the latest iPhone / Mac models come with USB Type-C connector instead of lightning cable. If you have one old model device and one new model device (either iPhone or Mac), you need an additional convertor to connect your iPhone and Mac.

If this is the first time you connect your iPhone, then choose to “Trust” the device by entering your passcode. Otherwise, you will not see the webpages opened in iPhone from Mac.

Trust Mac

Step 4 – View Source HTML Code

Launch Safari browser on iPhone and open the website you want to view the source code and inspect elements.

  • Go to your Mac and launch Safari browser. Navigate to “Develop > Your iPhone Name” to view the webpages that you have opened on your phone.

Open iPhone Page in Mac Safari

  • Click on the website to open “Web Inspector” that will show the source code of the webpage opened in Safari iPhone.

iPhone Page Source in Mac

  • You can view elements, check source HTML / CSS and do all kind of analysis that you can do with Chrome Developer Tools .
  • You can select the HTML elements in Mac Web Inspector (first column) to view source code and the corresponding element will get highlighted on your Safari iPhone.

Highlighted Element in iPhone

Final Words

Note that you can also do the responsive site analysis on Safari Mac. However, selecting mobile relevant elements may be difficult in responsive design mode and Mac may not have your iPhone models by default. Therefore, using Web Inspector to inspect elements is an effective method to directly get the relevant mobile element’s source code.

About Nagasundaram Arumugham

Naga is the founder and chief content editor of WebNots. He has over 20 years of experience in technology field and published more than 2000 articles.

You also might be interested in

How to Install and Uninstall Extensions in Mac Safari?

How to Install and Uninstall Browser Extensions in Safari Mac?

Extensions or add-ons are essential part of using browsers like[...]

Translate Entire Webpage in Safari iPhone

How to Translate Webpages in Safari iPhone?

It is easy to find the content in English language[...]

Top 10 Software Development Tools

Top 10 Software Development Tools

The field of software development has been changing at a[...]

DOWNLOAD EBOOKS

  • SEO Guide for Beginners
  • WordPress SEO PDF Guide
  • Weebly SEO PDF Guide
  • Alt Code Emoji Shortcuts PDF
  • Free ALT Code Shortcuts PDF
  • View All eBooks

TRENDING TECH ARTICLES

  • 600+ Windows Alt Codes for Symbols
  • Fix Chrome Resolving Host Problem
  • Fix Slow Page Loading Issue in Google Chrome
  • View Webpage Source CSS and HTML in Google Chrome
  • Fix Safari Slow Loading Pages in macOS
  • Fix Windows WiFi Connection Issue
  • ROYGBIV or VIBGYOR Rainbow Color Codes
  • Fix I’m Not A Robot reCAPTCHA Issue in Google Search
  • Structure of HTTP Request and Response

POPULAR WEB TUTORIALS

  • Move WordPress Localhost Site to Live Server
  • Move Live WordPress Site to Localhost
  • Move WordPress Media Folder to Subdomain
  • Fix WooCommerce Ajax Loading Issue
  • Create a Free Weebly Blog
  • Edit Weebly Source Code HTML and CSS
  • Add Scroll To Top Button in Weebly
  • Add Table in Weebly Site
  • How to Add Advanced Data Table Widget in Weebly?
  • Up to $500 Free Google Ads Coupon Codes

FREE SEO TOOLS

  • Webpage Source Code Viewer
  • HTTP Header Checker
  • What is My IP Address?
  • Google Cache Checker
  • Domain Age Checker Tool
  • View All Free Web and SEO Tools

© 2024 · WebNots · All Rights Reserved.

Type and press Enter to search

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

LuckyMan999

Shortcut for Show Reader View on Safari (MacOS 10.14.3) . I have typed "Command + Shift + R" but it's impossible.

Shortcut for Show Reader View on Safari (MacOS 10.14.3) . I have typed "Command + Shift + R" but it's impossible. Thanks for your help!

MacBook Air 13", 10.14

Posted on Feb 18, 2019 3:07 AM

VikingOSX

Posted on Feb 18, 2019 3:21 AM

You must be on a web page that already triggers the presence of the Reader icon in the browser address field. Then the keyboard shortcut is lit on the View menu, and the shortcut itself works just fine.

Similar questions

  • Adobe reader Plug in MISSING safari 10.14 with updated Acrobat Adobe Reader but no reader plug in available to activate for use on some webpages. I've read the steps to take in Safari preferences but those plugin options are MIA. See screenshots: thanks! 672 5
  • reader gone from safari with latest update my per in safari is missing is there a way to get it back. I'm running macOS 12.6.thanks in advance 142 3
  • What happened to "View Source" (of web page code) in Safari 14.1.1 in Big Sur 11.4? In older versions of Safari, under the "View" menu, there was a command called "View Source" (option-command-U keyboard shortcut) that revealed the underlying html/css/etc. code of whatever web page that was on the screen. However, after I upgraded to Big Sur 11.4, the 'View Source" menu option is gone in the recent versions of Safari, and the keyboard command no longer works. Why was View Source removed, and how can I create a workaround to quickly view the source code of any web page being displayed in Safari, as formerly was possible? (I realize that I can in theory "Save As" a Safari page as a "Web Archive' and then later open that file in a web page editing program, and see the code that way, but that's too time-consuming and complicated. I just want to be able to hit a keyboard shortcut or choose a menu option within Safari itself for a quick instant view of the page's underlying code. Perhaps there is some kind of add-on or widget that restores this functionality?) 6122 6

Loading page content

Page content loaded

Feb 18, 2019 3:21 AM in response to LuckyMan999

vladimir_sol

Apr 6, 2019 12:37 PM in response to LuckyMan999

The accepted solution didn't solve it for me.

Since one of the most recent updates (10.13 or 10.14) the reader view shortcut in Safari has stopped working, and now produces a high pitched short sound. The shortcut for the Show Reader menu in Safari is "Shift-Command-R" as it used to be, however now the following support article https://support.apple.com/en-ca/HT201236 lists "Shift-Command-R" as the "Open the AirDrop window" shortcut on the macOS level.

Clearly Apple has let a collision through, and then they wrongly prioritize the AirDrop shortcut even when Safari is in focus and full screen.

As a user, I personally use the Reader view on and off a multitude of times a day as I go about my browsing, and rarely every use AirDrop, not to mention need a global shortcut for it.

Feb 20, 2019 5:06 AM in response to VikingOSX

Thanks for your help!

Join 3,000,000+ Professionals who use AIOSEO to Improve Their Website Search Rankings!

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

view page source

How to View Page Source: See Any Web Page’s HTML Code (Plus: SEO Uses)

author image

Looking for a simple way to view page source?

Anyone can access a web page’s code by using the view page source method. And there are some good reasons why this can be useful in SEO.

In this article, you’ll learn easy ways to view page source and some practical uses for doing so.

In This Article

What’s the Source Code of a Web Page?

How to view page source in google chrome.

  • How to Use Line Wrap and Search Code

How to Use Chrome Developer Tools to View Page Source

Common uses for view page source, optimize meta tags with all in one seo (aioseo).

AIOSEO is the best WordPress SEO plugin. Get it for free!

Web pages are code files. And websites are collections of code files organized into folders.

This code provides the format, style, and interactivity for the page.

For example,

  • HTML provides formatting such as headings and paragraphs.
  • CSS provides styling, including colors and layout.
  • JavaScript provides interactive elements like pop-ups.

Browsers instantly load and interpret these code files, rendering a visible web page.

Anyone can view the source code of a website. Marketers and web developers are among those who use “view page source.”

You can use it too for some simple SEO checks.

We’ll use Google Chrome for our example since it has the largest market share of any browser. And the keyboard shortcuts we’ll share for Chrome also work for most other browsers, including Apple Safari and Brave.

There are several ways to view a web page’s code in Chrome. Here are 3 listed with the quickest method first.

Method 1: Keyboard shortcut

  • Mac: ⌘ + option + u
  • Windows/Linux: Ctrl + U

Method 2: Right-Click, Select

  • Right-click on a web page. (On a Macbook, press the touchpad with both fingers.)
  • Select View Page Source from the pop-up window that appears.

Method 3: Apple App Menu

  • With Chrome open, navigate to the Apple App Menu and select View. From that drop-down menu, select Developer » View Source

Use Line Wrap and Search Code

When the code page opens in a new tab, tick the box marked “ line wrap ” at the upper left. This will ensure you don’t have to scroll horizontally to view the code.

view page source line wrap tick box

Use ⌘ + f to open a search box for the code.

In addition to seeing a single page of source code, you can access Chrome developer tools from any web page to get more detailed code information. Web designers and developers use these tools.

To access Chrome Developer Tools, use Chrome to navigate to a web page.

Then use the appropriate keyboard shortcut:

  • Mac: ⌘ + option + i
  • Windows/Linux: F12 or Control + Shift + I

That will open a new window in the same browser tab, revealing the code behind the page.

chrome dev tools window

This view displays CSS and JavaScript event listeners, among other things.

Tip: All major web browsers, including Mozilla Firefox and Microsoft Edge, offer a “dev tools” window, and the same Chrome shortcut works for these.

There are 2 common reasons non-developers want to see the source code of a page.

One is to check guest post backlinks. And the other is curiosity: to see what meta tags look like in HTML.

Use 1: Check Guest Post Backlinks

Backlinks, links from other sites to yours, are a ranking factor .

A common way websites get backlinks is by writing guest posts for other sites in return for a link.

This backlink strategy helps individuals elevate their online presence and communicate expertise.

It’s important to check the code for every single link you get, though. Why? Sometimes a site owner will accidentally add a link attribute, like “ sponsored ” or “nofollow,” which will negate any SEO value.

These link attributes, also called tags, can only be seen in the page’s source code .

nofollow attribute example in view page source window

How to Check HTML for Link Attributes: Method 1

  • Navigate to the page that is linked to yours.
  • Right-click on any area of the page.
  • Select “View Page Source.”

The HTML code for the page will open in a new window.

Search the anchor text and check the surrounding link for nofollow , sponsored , or UGC link attributes .

As an example, we’ll use a ReadWrite.com article.

Scrolling to the bottom of this article, we see the guest author’s bio includes a link back to his website, Ditto Transcripts.

readwrite author bio

Right-click anywhere on the page and select View Page Source .

That will open the HTML code for the page in a new tab. (Remember to tick the “line wrap” box.)

Now, you can search the page for “Ditto Transcripts.” This is what we see.

safari view source shortcut

The link is a “dofollow” link, which is optimal for SEO. Notice the lack of any nofollow, sponsored, or UGC attributes in the link code.

How to Check HTML for Link Attributes: Method 2

You can also access the link code by using Chrome Developer Tools. However, be aware that this tool displays more detailed code, which could be confusing to beginners.

Here’s how to check a link using Chrome Dev Tools.

  • Right-click on the backlink.
  • Select Inspect from the small pop-up that appears.

This will open Chrome Developer Tools.

Conveniently, this action will highlight the link (in blue), so you know exactly where to look.

Here we’ll use the same ReadWrite.com as our example.

To view the link’s code, we’ll right-click on it and select “Inspect” from the pop-up.

safari view source shortcut

Selecting “Inspect” will cause Chrome Developer Tools to open. The link will be highlighted in blue.

chrome dev tools view page source code

Let’s zoom in on that highlighted portion.

chrome developer tools html code source example

While this link code may contain things you don’t understand, you can see that there isn’t a nofollow , sponsored , or UGC tag there.

Use 2: See What Meta Tags Look Like

The second reason non-developers may use view page source is that they’re curious to see what meta tags look like in code.

You may have heard that title tags and meta descriptions are important for SEO.

And plugins, like All in One SEO (AIOSEO) , make it easy to edit and optimize these.

But you might wonder what these 2 meta tags look like in the source code.

To find out,

  • Navigate to a page.
  • Go to View Page Source.
  • Tick the “line wrap” box at the upper left.
  • Use ⌘ + f to search for <title or <meta name=”description”.

Here’s an example of a title tag.

html title tag example

And here’s the meta description for the same article.

html meta description example

Optimizing these meta tags is easy with the All in One SEO (AIOSEO) plugin for WordPress.

And you won’t need to view the page source to check meta tags.

aioseo homepage

This established plugin has thousands of 5-star reviews on WordPress.org and over 3 million users.

While it’s easy for beginners to use AIOSEO, it delivers pro results.

You can download All in One SEO here .

You’ll see a preview of your title and meta description in Google Search results.

aioseo snippet preview

And you get easy ways to optimize these tags, such as keeping your meta description within a set length.

aioseo meta description

In addition, All in One SEO provides recommendations for improving the SEO of your individual web pages.

aioseo seo recommendations

Other benefits include

  • Easy setup for local SEO (for small businesses).
  • Recommendations on focus keyword use.
  • Turn your pages into rich snippets with a few button clicks.

rich snippets example

Q&A on View Page Source

How do i view page source in safari.

To view page source in Safari, right-click on the page and choose Show Page Source . Or, in the browser menu, select Develop » Show Page Source .

Using Option + Command (⌘) + U will open the Developer Tools window.

How do I find the HTML and CSS code of a website?

There are several ways to find the HTML and CSS code of a website. To find the HTML you can use various view page source methods outlined here .

To see the HTML and CSS code you can use the Developer Tools feature in your web browser.

You can also find the clickable CSS code file(s) for a website in the head element of the HTML.

What’s Next?

We hope this article helped you understand how to view a page’s source code and why people use it.

You may also want to learn more about the role of backlinks in SEO and get insights into paid links and link building . And don’t forget to capture those leads .

If you found this article helpful, please subscribe to our YouTube channel for SEO tutorials. You can also follow us on Twitter , LinkedIn , or Facebook to stay in the loop.

Want to Try AIOSEO for Free?

Enter the URL of your WordPress website to install AIOSEO Lite.

safari view source shortcut

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

author avatar

Add a Comment Cancel Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your Comment

Your Real Name

Your Email Address

Save my name, email, and website in this browser for the next time I comment.

IMAGES

  1. View Source for Safari on iOS with Shortcuts

    safari view source shortcut

  2. View Source for Safari on iOS with Shortcuts

    safari view source shortcut

  3. View Source for Safari on iOS with Shortcuts

    safari view source shortcut

  4. How to View Web Page Source on iPhone/iPad: 7 Methods

    safari view source shortcut

  5. How To View Page Source In Safari Browser On Your Mac [Guide]

    safari view source shortcut

  6. How To View Page Source In Safari Browser On Your Mac [Guide]

    safari view source shortcut

VIDEO

  1. Safari View in Bandhavgarh National Park and Tiger Reserve, Wildlife Sanctuary

  2. Safari Shortcuts in Mac

  3. Как открыть ссылку в новой вкладке iPhone Safari

  4. SAFARI VIEW ☺️☺️☺️

  5. Gir national park safari view

  6. How to view history in safari [easy]

COMMENTS

  1. Viewing the HTML Source Code in Safari

    View Source Code in Safari. Showing source code in Safari is easy: Open Safari. Navigate to the web page you would like to examine. Select the Develop menu in the top menu bar. Select the Show Page Source option to open a text window with the HTML source of the page. Alternatively, press Option+Command+U on your keyboard.

  2. How to Turn on the Develop Menu in Safari on Mac

    Open Safari on your Mac and click the "Safari" button in the menu bar. Next, select "Preferences." Alternatively, you can use the keyboard shortcut Command+, (comma). This will also open up Safari preferences. Go to the "Advanced" tab. Check the box for "Show Develop Menu in Menu Bar." Now the Develop menu will appear between Bookmarks and ...

  3. How to View the Source Code of a Webpage in Safari on Mac

    View the Source Code of a Webpage in Safari on Mac. 1. Launch Safari on your Mac. 2. When Safari launches, click on the "Safari" menu on the top followed by "Preferences…". 3. When the Preferences panel opens, click on the tab that says "Advanced". It should be the last one in the menu on the top.

  4. How to View Page Source in Safari on 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.

  5. 5 Ways to View Page Source on iPhone or iPad [Inspect]

    View Page Source on iPhone or iPad without Third-Party App. Watch on. Step 1. Open the Shortcuts on your iPhone or iPad. Tap on the "+" icon to create a new one. Step 2. Tap on the three-dot icon and enable the option "Show in Share Sheet". Tap Done to go back to the new shortcut. Step 3.

  6. How to view page source in Safari browser on an iPhone?

    Mobile Safari can call other programs to "View Source" via the share functionality in iOS / iPadOS. To transform your web page into source, install an app that has this functionality (e.g. View Source - HTML, JavaScript and CSS), click the share button in the middle of screen footer (the icon depicts an arrow out from a square). This will open ...

  7. How to See the Source Code of a Website (Easy Methods)

    How to view the HTML source code of a website on a Mac. Safari. To view the source of a website on a Mac using Safari, navigate to the page you want and use the following keyboard shortcut: Option+Command+U. Alternatively, you can right-click anywhere on the page and select "Show Page Source" from the dropdown menu.

  8. How to view HTML source code in Safari

    You may want to view the HTML source of a web page. This short tutorials explains how to view the source of a webpage: 1. Safari menu > Preferences > Advanced. 2. Check "Show Develop menu in menu bar". Close Safari's preferences. 3. Develop menu > Show Page Source OR right click your mouse and select "Show Page Source".

  9. How To See Source Code In Safari

    Access the "View Source" Option: Once the webpage has loaded, navigate to the Safari menu bar and click on "View." From the dropdown menu, select "Show Page Source" or use the keyboard shortcut "Option + Command + U." This action will open a new window or tab displaying the complete source code of the webpage.

  10. How to View Webpage Source CSS and HTML in Safari Mac?

    Once the " Develop " menu is enabled, open the webpage you want to view the source. Similar to other browsers just right click and chose "Show Page Source" or " Inspect Element " option. This will open the Web Inspector console at the bottom of the page. Note: Web inspector can also opened using the shortcuts " Option + Command ...

  11. How to "View Page Source" in Safari on Mac

    Step 1) In Safari, select Preferences. Step 2) Select "Advanced" tab and check "Show Develop menu in menu bar". Step 3) Select "Show Page Source" or "Inspect Element". Next Up How To: Livestream Super Bowl LI on Almost Any Device. Topics how to Mac safari. Share Tweet. Flip Flip It.

  12. How to view source code in Safari?

    Following are steps to view source code in Safari browser. Open your Safari browser and navigate to the web page you wish to view. From the top menu bar, select Develop > Show Page Source. You can also press Option+Command+U on your keyboard. If the Develop menu is not visible, go to Preferences > Advanced, and choose the Show Develop menu in ...

  13. Viewing the HTML Source Code in Safari

    If you prefer to use keyboard shortcuts, Safari offers a convenient way to view the HTML source code with just a few key presses. Follow these steps: Open Safari and navigate to the webpage for which you want to view the source code. Press the Option + Command + U keys simultaneously.

  14. How to View Web Page Source Code on iPhone: 5 Ways

    2. Create a view source shortcut for Safari. In this method, we will using Shortcuts app on iPhone to create a shortcut for viewing the source code on Safari. This is very technical method and you will need to be attentive while following the steps. To start with, first find and open the Shortcuts app and tap the plus button at the top right ...

  15. 31 Useful Safari Keyboard Shortcuts for Mac

    8 Safari Shortcuts for Navigating Tabs & Web Pages. Switch to Next Tab - Control+Tab. Switch to Previous Tab - Control+Shift+Tab. Scroll Down by Full Screen - Spacebar. Scroll Up by Full Screen - Shift+Spacebar. Go to Address Bar - Command+L. Open New Tab - Command+T. Open Link in New Tab - Command+Click a link.

  16. How to View Web Page Source on iPhone/iPad: 7 Best Methods

    View source code shortcut on share sheet on Safari. Touch the Share button on the Safari app and scroll down to find the View Source Code shortcut. Tap the shortcut and you get the HTML source code in Quick Look. 2. View Page Source Using a Bookmark Script. In this method, you'll create a bookmark and the URL will be a view source script.

  17. View Source for Safari on iOS with Shortcuts

    Here it is in action: There is one major caveat. It doesn't inspect the exact instance of the page you are running, it has to the page in a 3rd party site that I built ( https://www-source.glitch.me) / source - this means that if you are logged in, or there is any state that is shared (such as cookies) then it will not display the same content ...

  18. Shortcut to view (pretty) source code on iOS : r/shortcuts

    An existing shortcut. That method allows to add a button to Safari which is far faster, but code still a pain to look at. So, I made shortcut which adds a "View source" button to Safari and sends user to a page which processes the source code, so it looks nice and easy to work with (or, at least as easy as possible with that screen size)

  19. How to View Webpage HTML Source in iPhone?

    Go to your Mac and launch Safari browser. Navigate to "Develop > Your iPhone Name" to view the webpages that you have opened on your phone. Open iPhone Page in Mac Safari. Click on the website to open "Web Inspector" that will show the source code of the webpage opened in Safari iPhone. iPhone Page Source in Mac.

  20. What happened to "View Source" (of web pa…

    What happened to "View Source" (of web page code) in Safari 14.1.1 in Big Sur 11.4? In older versions of Safari, under the "View" menu, there was a command called "View Source" (option-command-U keyboard shortcut) that revealed the underlying html/css/etc. code of whatever web page that was on the screen.

  21. Shortcut for Show Reader View on Safari (…

    What happened to "View Source" (of web page code) in Safari 14.1.1 in Big Sur 11.4? In older versions of Safari, under the "View" menu, there was a command called "View Source" (option-command-U keyboard shortcut) that revealed the underlying html/css/etc. code of whatever web page that was on the screen.

  22. How can I improve/replace View Source in Safari?

    It's similar to the view source in Chrome in a lot of ways: It has syntax highlighting and line numbers; It's opened in a tab instead of a window; Uses the default monospace font specified in preferences instead of Monaco 12; Limitations: Line numbers are included in selections; The source view cannot be opened with a shortcut

  23. How to View Page Source: See Any Web Page's HTML Code (Plus: SEO Uses)

    How to Check HTML for Link Attributes: Method 1. Navigate to the page that is linked to yours. Right-click on any area of the page. Select "View Page Source.". The HTML code for the page will open in a new window. Search the anchor text and check the surrounding link for nofollow, sponsored, or UGC link attributes.