Google Chrome/Firefoxで使える開発スニペット集「DevTools Snippets」
DevTools SnippetsはGoogle Chrome/Firefox用のソフトウェアです。
このソフトウェア（？）を試すまで知らなかったのですが、Google Chromeのデベロッパーツールにはスニペット管理機能が備わっています。よく使うJavaScriptを登録しておけば開発がよりスムーズになります。そこで今回は便利なスニペットを多数登録しているDevTools Snippetsを紹介します。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-01 11.49.10.1372811513.png)
例えばこれはjQueryが読み込まれていないサイトでjQueryを読み込むスニペット。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-01 11.49.50.1372811517.png)
スニペット編集中。DevTools Snippetsにあるものを貼付けるだけです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-01 11.50.01.1372811523.png)
後は登録してあるものの中から右クリックしてRunを押すだけです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-01 11.52.28.1372811526.png)
これまた知らなかったのですが、consoleでテーブル表示。こちらはクエリストリングを分割してテーブル表示してくれます。
DevTools Snippetsではその他ログ、HTTPヘッダー表示、dataURI、全ての色表示、パフォーマンス表示、CSS整形、ハッシュリンクといったスクリプトが登録されています。いずれもGoogle ChromeでWeb開発を行う上でとても便利に使えるでしょう。
MOONGIFTはこう見る
Web開発においてWebインスペクタやデベロッパーツールを使わない時はないくらいです。なければデバッグが相当苦痛で大変なものになるでしょう。それはスマートフォンでのWeb開発でも度々感じます（最近は随分緩和されましたが）。
DevTools Snippetsではオープンソースという訳ではありませんが、役立つTipsをオープンにすることでノウハウを共有する素晴らしい仕組みです。自分たちは知っていても意外とみんなは知らない事は多いものです。そういった観点で見れば、自分たちのノウハウを公開するのは誰かにとって役立つ情報になりえるのです。