2013年6月28日金曜日

Chrome の console で jQuery を使いたい

Web開発者たるもの、Webブラウジング中にちょっとDOM要素を弄りたくなって「Chrome のconsoleでjQueryが使えたら楽なのに」と思うことがあります。もし見ているWebページが http://www.takkyuuplayer.com/ のようにjQueryをインポートしているのであればconsole上でもjQueryを使うことができますが、そうでない場合は使えません。

そのようなときは Include jQuery in the Javascript Console - Stack Overflow のようにしてjQueryを入れれば良いのですが・・・

この方法には致命的な欠点があります。それは

  • 常に同じバージョンのjQueryが使えるわけではない
  • そもそもインポート用のスクリプトを覚えられない
ことです。すでに閲覧中のサイトがjQueryをインポートしている場合「サイトのjQueryを使う」か「新しくjQueryをインポートしてサイト上のjQueryを上書きする」かの二択を迫られてしまいます。

どちらもやりたくはないので、既存のjQueryは置き換えずにいつも同じjQueryを使うためのChrome拡張を作りました。chebo.crxをインポートすればconsole上にて、次のようにしてjQueryにアクセスできます。 withCheboの引数として関数を渡してやれば、その中でjQueryが使えるようになります。便利ですね。

Underscore.jsBackbone.jsも使えるようになっているので、ちょいちょいウェブブラウジング中にDOM要素を弄りたくなる方は使ってみてください

0 件のコメント:

コメントを投稿