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

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

関連記事

タグの機能

相対パスで記述されたURLのベース(基準)をhead内で指定すると画像やリンク先のパスがベース(基準)で指定されたURLを基準に表示されます。 今日初めて知りました。 <head> &lt …

SmartyでGoogleアドセンスを表示させる方法

7,8年前に制作したサイトをスマホ化対応させようと思ったら、 Googleアドセンスの表示でつまずいた。。。 まず、新規発行したアナリティクスコードを貼り付けると、画面が真っ白!!! すべての要素が表 …

Macでディレクトリ階層の一覧を作る方法

仕事をしていてよく納品ファイルの一覧が欲しいと言われることがあります。 ファイル数が少なければフォルダ内にあるファイルを選択肢てエディタに貼り付けるだけでいいのですが、 階層も深くファイル数も多い場合 …

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

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

iPhoneの画面をMacで録画する方法

iPhoneの画面を録画したい時ってありますよね? 例えばパズドラの画面をYouT­ubeにアップしたりなど! 今までは専用のアプリなどを使わないとできなかったことが、 MacのOS10.10(­Yo …