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