WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

shima

2018/01/31

気になるページのソースコードをスマホで見てみよう

投稿者: shima
カテゴリー: マークアップ >サービス

最近、職場でWebサイトを見る際にパソコンで見ることはありますが、家で見るときはスマートフォンを使う事が多いのではないでしょうか。
その時にどうやってコードを書いているんだろう?と気になることがあります。
そんな時は…
気になるページのソースコードをスマホで見てみよう

Androidでみる

使用するブラウザにも寄りますが、PCと同様に【view-source:】とURLの最初に書くだけで表示されます。

chromeが一番おすすめです。
Androidではこんなに簡単に見ることができるのですが、iPhoneで確認するには少しややこしいかもしれません…

iPhoneでみる

ブックマークに登録

まずはじめに、ソースコードを確認したいサイトにアクセスしブックマークに登録します。

この画面が出たら、完了をタップします。

ブックマーク一覧で編集

次にブックマークの一覧に行きます。
しっかり登録されているのを確認したら

右下の編集をタップします。
登録されたものを選択しURL部分を完全に削除します。

挿入

削除したところに下記のコードを入れます。コピー&ペーストで貼っていきましょう。

javascript:(function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getElementById('snpy')%3Bif(typeof%20Snoopy!%3D'undefined')%7BSnoopy.toggle()%3Breturn%7Delse%20if(el)%7Bel.className%3D%2Fclosed%2F.test(el.className)%3Fel.className.replace('closed'%2C'')%3Ael.className%2B'%20closed'%3Breturn%7Ds%3Dd.createElement('link')%3Bs.setAttribute('href'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.css')%3Bs.setAttribute('rel'%2C'stylesheet')%3Bs.setAttribute('type'%2C'text%2Fcss')%3Bd.getElementsByTagName('head')%5B0%5D.appendChild(s)%3Be%3Dd.createElement('script')%3Be.setAttribute('src'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.js')%3Bd.getElementsByTagName('body')%5B0%5D.appendChild(e)%7D)()%3B

確認

最後にURL部分を書き換えたサイトに行きます。
すると上部分にソースコードが見られるようになっています。

まとめ

しっかりとソースコードを見たいときにはやはりパソコンが一番良いと思いますがちょっとした時間に確認してみたいコードがある時に、便利になる機能だと思います。皆さんも是非お試しみてはいかがでしょうか?

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ