niwadesign

ホームページ制作のネタ発信

html iPhone mac Safari

スマホサイト(iPhone)のソースコード(htmlソース)MacのSafariで確認する方法

投稿日:

前回ブックマークレットを使ってのソースコードの確認方法を紹介しましたが、
今回はMacのSafariを使ってのソースコードの確認方法をご紹介します。

■iPhoneの設定

設定 > Safari > 詳細 > Webインスペクタをオンにします。

iPhoneの設定画面

次にiPhoneをUSBケーブルでMacに接続します。

■MacのSafariの設定

Safari > 環境設定 > メニューバーに”開発”メニューを表示にチェックをします。

Mac Safariの設定画面

次にiPhone側でSafariを立ち上げ、ソースを確認したいサイトを表示させます。

MacのSafariに戻って、開発 > iPhone名 > 表示されているURLをクリックします。

Mac Safariの設定画面

そうするとWebインスペクタが表示されソースコードを確認することができます。

Webインスペクタ

-html, iPhone, mac, Safari
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

スマホサイト(iPhone)のソースコード(htmlソース)確認方法

スマホサイトを制作する時に、たまに実機でjsの挙動などソースコード(htmlソース)を確認したい時があります。 そんな時、役に立つ小技をご紹介。 Bookmarklet(ブックマークレット)を使った方 …

MacBook Airを1日使ってみたレビュー

今まで丸3年使ってきたMacBoook黒(MB063J/B)からの乗り換え。 今回僕が買ったのはMacBook Air 11インチ(MC506J/A)。 まず最初に感じたのは軽い、小さい、速い!!! …

MacのMail(メール)で添付画像が縮小されるのを回避

Macを使っているお客さんからたまに添付画像を送られてくるのですが、その添付画像が極端に小さい時があります。 そんな時は添付ファイルをドロップしてから「イメージサイズ」のところを実際のサイズになってい …

Mac SafariでのSSL証明書確認方法

ブラウザ右上にある小さな鍵マークをクリック。 小さすぎて分かりにくい。。。 Mac SafariでのSSL証明書確認方法 Mac SafariでのSSL証明書確認方法 ちなみに、 EV SSL証明書の …

Macで同階層のFinder(ファインダー)をもう一つ開く方法

Macを使っていてFinderで深い階層まで行った時、隣り合わせに同じ階層のFinderをもう一つ表示させたい時がある。 今までは新規でFinderを開いて奥の階層にドンドン進んでいったが、すごく面倒 …