How to view the source code (HTML & CSS) of a web page in Safari
"When I try to view the source code of a web page in Safari, I can't see it!"
I thought so, but there was a way to see it properly, so here's a memo.
Display "Development" on the menu bar
For some reason, Safari doesn't display "Developer" in the menu bar by default, so first display it.
Click "Safari" > "Preferences..." in the menu bar. ↓
Next, open the "Advanced" tab and check "Show 'Developer' in menu bar" at the bottom. ↓
"Development" has been added to the menu bar, allowing you to view the page source.
Now you're ready to go.
View page source
Now let's take a look at the source code.
On any page, click "Development" > "View page source" on the menu bar, ↓
Alternatively, you can right-click > "View page source". ↓
If you want to use shortcut keys, you can use "command + option + U".
The window will then be split vertically and the page source will be displayed at the bottom. ↓
Click on the separate window icon, ↓
It will be displayed in a separate window like this, and you can view it spaciously and comfortably. ↓
Afterword
In this way, I was able to check the source code of a web page with Safari without any problems, and I was able to check the important points in terms of element verification, etc., and it seemed pretty good.
So I thought I'd play around with it a little more and use it for development.
