niwadesign

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

html iPhone Safari

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

投稿日:

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

Bookmarklet(ブックマークレット)を使った方法

1.iPhoneのSafariを起動。

2.Snoopyのサイトにアクセス http://snoopy.allmarkedup.com/

3.「2. Copy all of the code in the following textarea to the clipboard: 」のjavacsriptをコピー

snoopy

4.どのサイトでもいいので新規でサイトをブックマーク(その際わかりやすくするためにタイトルを変更)

ブックマーク
※タイトルをソースコードに変更

5.4番で登録したブックマークを編集(URLが入っているとことに先程コピーしたjavascriptをペースト)

ソースを貼り付け

以上で準備が完了しました。

次にhtmlのソースコードを見たいサイトにアクセスし、ブックマークから先程保存したブックマークをタップすると、下の画面のようなボックスが表示され、ソースコードを確認することができます。

ソースコード

次回はMacのSafariを使った方法をご紹介。

-html, iPhone, Safari
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

バンカーリングを1年半使ってみた感想

約1年半前にiPhone6 Plusを購入した際にあわせてバンカーリングを購入しました。 今でもPlusのサイズに馴染めず後悔しているが、バンカーリングのおかげである程度使用感がマシになった。 次回は …

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

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

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

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

iPhoneのフォームでフォーカスがズームされるのを防ぐ方法

スマホ用のサイトを作っている時にフォームのテキストフィールドやセレクトをタップすると、画面がズームされることはありませんか? そんな時はフォントサイズを16px以上にするとズームされるとこなく、入力す …

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

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