iOSでHTMLソースコードをハイライト表示するブックマークレット『Snoopy』

Snoopy

外出先でHTMLのソースコードを確認したい時ってありませんか?

ボクは頻繁ではありませんがそういう機会はあります。

調べてみると、iOSだとHTMLソースコードを見るにはブックマークレットを使うしかなさそうなんですが、何種類かあるようなんです。

今日はその中でMOONGIFTさんで紹介されていたこの『Snoopy』をご紹介します。

Snoopyでできること

Snoopyを使うと、

  • サイトのプロパティ
  • Doctypeや文字コード、jQueryのバージョンやGoogle Analyticsを使っているかどうか

  • HTMLソースコード
  • 受け取ったコードと、実際にレンダリングされているもの

の2つを確認することができます。

導入方法

Snoopyの導入方法ですが、

  1. まずは配布先にアクセス。
  2. テキストエリアのコードをコピー。
  3. コードコピー

  4. このページをブックマークに追加して適当な名前(Snoopyとか)に変更して保存。
  5. ブックマークを開き、編集をタップ。
  6. 先程保存したブックマークのURLを削除して、コードを貼り付け。
  7. ブックマークに登録

とそんなに手間ではありません。

使い方

Snoopyの使い方はとても簡単。

保存したブックマークレットを起動するだけ。

実際に起動すると、

Snoopyプロパティ

まずはサイトのプロパティが表示されます。

WordPressのバージョンやコメントシステムまで分かっちゃうんですね、これ…。

次に「view source」をタップすると、

SnoopyHTMLソースコード

こんな感じでHTMLソースコードを確認できます。

見た目に分かりやすい!

フォルテ色分けされていてパッと見た目に分かりやすいのは、非常にありがたいですね。

先日のエントリー、@donpyさんにモブログでのエントリーを採点しろと脅されたので僭越ながら過去3回の[どん食]を分析してみる。でも、

[どん食]画像ソース比較

のように活躍してくれました。

使う頻度としてはそんなに多くないとは思いますが、もしものために準備しておいても損はないブックマークレットだと思いますよ。

ここでお知らせ!

当ブログ公式アカウント@fp_tweetで、ブログ更新情報を発信しています。

まだフォローしていないという方はこの機会にぜひ@fp_tweetのフォローをお願いします。

当ブログのある意味メインコンテンツ、フォルテのFacebookページができました。ブログにアップする前の画像や動画をいち早くお届けしています。当ブログFacebookページではブログ更新後日談を掲載しています。

フォルテのFacebookページ当ブログFacebookページともに『いいね!』していただけるとうれしいです(^^)

Posted from SLPRO Blog Editor for iOS on iPhone.

この投稿へのコメント

コメントはありません。

メッセージをどうぞ!!

この投稿へのトラックバック

  1. […] iOSでHTMLソースコードをハイライト表示するブックマークレット『Snoopy』 | … うわぉ、これは凄い。Σ(゚д゚ )モブログは書くだけじゃなくて、確認・調整にも伸びて行きそう。 […]

  2. […] ▼ iPhoneでソースコードをハイライト表示できる ◆ iOSでHTMLソースコードをハイライト表示するブックマークレット『Snoopy』 ( via Feelingplace ) […]

トラックバック URL