How to View Source Code of Webpages in Safari iPhone on Mac?
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 MacBook and Windows based PC. 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 to look at the source code of webpages in Safari on 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 connector cable
- Your Mac computer or laptop
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
The Safari browser on Mac by default does not show the developer console and inspect element option. You need to manually enable the “Develop” menu in order to enable the developer console in Safari.
- Launch Safari and go to “Safari > Preferences…” section.
- Go to “Advanced” tab and enable “Show Develop menu in the menu bar” option.
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 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.
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 iPhone 11 or liver models, use your USB lightning cable to connect the phone to Mac. However, the latest iPhone 11 Pro models come with USB Type-C connector instead of the USB lightning connector cable. In such case, you can use the old USB cables or need an additional convertor to connect Type-C cable to your MacBook USB port.
If this is the first time you connect your iPhone then choose to “Trust” the device by entering your passcode.
Step 4 – View Source 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.
- Click on the website to open “Web Inspector” that will show the source code of the webpage opened in Safari iPhone.
- You can view elements, check sources and do all kind of analysis that you can do with Chrome Developer Tools.
- You can select the elements on the Web Inspector to view source code and the corresponding element will get highlighted on your Safari iPhone.
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 your iPhone models by default. Therefore, using Web Inspector to inspect elements is an effective method to directly get the relevant element’s source code.