Chromeのsnippetsを使う、全てのサイトにjQueryを適用する。

jQueryは便利だ。

サイトコンテンツの中身を覗いて解析したりする時、jQueryがあればCSSセレクターがそのまま使えたり、その場でアニメショーンさせたり、DOM要素を追加したり削除したりするのは楽だし、他所が使うテクニックも解析し易くなったりする。

ですが、jQueryが普及してるとは言え、全てのサイトではjQueryを利用しているとは限らない。
でもjQueryが使いたい！の時は最も一般的にやり方としては、ブラウザのコンソールにjQueryのソースコードをコピペしてそのサイトで実行する方法だ。

でもこれは面倒くさい、ページがリロードすればまたコピペしないといけないし、サイトごとにコピペしないといけないですし。

ここではchromeのsnippetsを利用しよう！

chromeでctrl + shift + cを同時に押すと、developer toolパネルが開ける、この感じですね。


次は実際にsnippetsを追加してみよう.
1, developer toolからsourcesパネルを開く
2, sourcesパネルからSnippetsパネルを開く
3, Snippetsパネルで新しいsnippetを追加



snippetsを追加したら、snippetsの内容も追加して実行してみる
1, snippets名を変更
2, snippets内容を追加、jQueryのソースコードをコピペする。
3, snippets実行



もちろん、ctrl + sで保存することもお忘れなく。

ここまですると、今開いているサイトにjQueryが適用された。
そして、ブラウザを閉じたり他のサイトを開いたりしても、保存したsnippetsは消えない、保存したsnippetsを適用する場合はsnippetsを選択して実行だけすればいいので、かなり便利になる。

でも、snippetsに潜めた力はそれだけではなく、もうちょっと見てみよう

実際、snippetsはjQueryだけではなく、もちろん世の中にある全てのJavascriptライブラリに適用することが可能だ。
さらに、目に見えるレイアウトの解析はまだ簡単かもしれませんが、目に見えない裏側の通信処理や操作処理を解析するのは大変面倒ですが、そこでもsnippetsが活躍できる。

このように、通信処理の解析やイベント解析を行える
1 全種類のAjax処理を追跡・監視する
2 全種類のEvent処理を追跡・監視する


...ということで、開発の時に手助けてくれる便利ツールsnippetsの紹介は以上です。
まぁ、簡単な内容ですが、誰かの役に立てばいいかと思いながら、今日の記事を終わらせていただきます。