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

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

関連記事

iPadでマルチタスク用ジェスチャーを使えるようにする方法

今回、私用でiPad2を買って気になったことは、 マルチタスク用ジェスチャーはOSアップデートで使えると思ってたらそうじゃなかった。 僕の会社のiPadでは知らないうちにマルチタスク用ジェスチャーの機 …

続:Mac OSXでhostsファイルを編集する方法2014年版

4年ほど前に書いた記事が意外にアクセスが多かったので、最近のボクのhosts書き換えの方法を公開。 昔の記事:Mac OSXでhostsファイルを編集する方法 つい先日まではターミナルから昔の記事同様 …

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

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

Chromeのディベロッパーツールを別ウィンドウにする方法

最近PCを買い替えていつものようにディベロッパーツールを使おうと開いたら、ブラウザから分離できない。。。 調べてみたら、下右に移動させるアイコンを長押しすると別ウィンドウのアイコンが表示される。 わか …

iPhone Safariのsubmitボタンのデザインを変更する方法

通常CSSでbackgroundやborder-radiusをかけることによってスタイルを定義することができますが、 iPhoneSafariの場合は最初にリセットする必要があります。 #hdSear …