Chrome拡張とかWebサービスとか
クライアントサイドに絞って紹介
ブラウザの画面のスクリ－ンショット
FireShot
範囲選択ができたりしてお手軽にキャプチャできる
Developer Toolsのキャプチャが取れないのが少し残念。まあしょうがないですが。
色を調べる
ColorZilla
1枚の画像のみがはられたURLが参考として送られてきたことがありました...
まあそんな特殊パターンじゃなくてもこのサイトどんな色使ってるかな？と調べるときに。
サイズを知る
Page Ruler
わかるやすくて便利
ショートカットキーが充実しているのも高ポイントです。
アクセス数を知る
SimilarWeb
精度はそこそこ高いとのこと（完璧ではない）
ブラウザごとの対応状況を調べる
Can I use ?
最新の機能を使いたい時などに便利。
最近はみんな足並みを揃えてきてるけどね。
ブラウザ上でコードを書く、そして共有する
いくつかありますが今はcodepenが最強かなと思います。
Html,css,js を動作を確認しながら書くことができ、URLを使って共有することができます。
更にブログへ埋め込むことも可能です。
導入方法は以前書いていたり。（説明の必要が無いくらい簡単だったけど）
Developer Toolsでできること
以下は何かを入れたりしなくてもChromeのDeveloper Toolsで十分かと思います。(拡張機能じゃないよ。F12だよ！)
タグのサイズを調べる
矢印をクリックするか Ctrl + Shift + C を押す。カーソルを当てるだけでサイズが表示されるようになります。
モバイル向けに表示する
スマホアイコンをクリックするか Ctrl + Shift + C を押す。デバイスやネットワークの状態などがエミュレートできます。
Html、Style、jsの変更
ElementsタブとSourcesタブで変更可能です。取得したリソースとかかった時間を調べる
Networkタブよりボトルネックなどを調べられる。
Httpヘッダなども確認できます。
デバッグ
Sourcesタブでブレークポイントの配置が可能。ステップ実行中に近くに変数が表示されて便利です。
Cookies・Storage・DBの確認編集
Resourcesタブより自由に削除追加編集が可能。
そしてこの3つはユーザが自由にできるいうことでもあります。
【Web開発で使う拡張機能xx選】とかよく見るんだけど情報が古かったりそれいらないだろって言うのがあったりしたので自分なりに抽出してみました。
他にもいろいろ便利なものが公開されているので必要に応じて調べてみてください。
