Webデザイナー兼フロントエンドエンジニアが実務で使っている便利ツールまとめ

2013年締めくくり。
普段使ってる便利ツールたちをまとめてみたよ！！

Chromeプラグイン

もともとはFirefoxラバーだった癖に、最近はめっきりChromeだよ！
Chromeプラグインたちはマジで毎日使っています。

web color picker

https://chrome.google.com/webstore/detail/webcolor-picker/dhkcagaebpnckdoifoehbflnaimhakea?hl=ja

Webサイトを開いたまま、ブラウザ上だけで色を拾えます。
とにかく便利すぎる。過去の履歴も残ります。
わざわざキャプチャを撮って、Psから色を拾ってのは昔の話ですよ。

Window Resizer

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh[ogp] 広大なモニタで作業していると、ついつい忘れがちな画面サイズ。時々思い出してはResizer一発で切り替えます。任意のサイズも登録しておけるから超便利。 Windowリサイズ時に現在のサイズも表示してくれます。 Awesome screeshot [ogp]https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=ja

スクショ系は渡りに渡り歩いてこれが一番便利でした。
全スクロールして1画面キャプチャがあります。

jsoff

https://chrome.google.com/webstore/detail/jsoff/kjhbibcocglfnpllfodaiabanmmegomm

Javascriptを一発でOFFにできます。
開発中は本当に便利。

W3C HTML5 & CSS3 Validator

https://chrome.google.com/webstore/detail/w3c-html5-css3-validator/kobpbiokkobnmnaefmpcodeeficgbfkg

ボタン一発バリデーション。わたくし、わっくはvalidなコードを書きますよ。いつでもお仕事ください。

英辞郎 on the WEB 拡張機能

英辞郎 on the WEB 拡張機能
https://chrome.google.com/webstore/detail/%E8%8B%B1%E8%BE%9E%E9%83%8E-on-the-web-%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD/oonalfdoahlmjaoloddjenihohbfodme

アルクが公開している英和・対訳オンライン検索サービス「英辞郎 on the WEB」を、その場で便利に検索できる拡張機能です。「英辞郎 on the WEB Pro / Pro Lite」にも対応。※「英辞郎」は道端早知子氏の登録商標です。

イミフな英単語を選択→右クリックメニューで英辞郎で検索できる、何気に便利なプラグインです。

IEプラグイン

Debug bar

DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer
http://www.debugbar.com/download.php

クs…もとい貧弱なIEの開発ツールを強力にしてくれるデバックツール。

ブラウザテスト

IE Tester

IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 11 | My DebugBar
http://my-debugbar.com/wiki/IETester/HomePage

ietester is an application that allows to test on multiple ie versions at the same time in the same application

これ、時々Javascriptが変なところでコケる。ほかにいいのないのかなー。
もうあれじゃね、7とか8とかみんな使うのやめればいいじゃない？

BrowserStack

Most Reliable App & Cross Browser Testing Platform
http://www.browserstack.com/

Instant access to 3000+ browsers and real iOS and Android devices for cross browser testing. Ship apps and websites that work for everyone, every time. Get Free Trial.

今使ってるままのブラウザで、各種ブラウザのシュミレーションができます。
ちょい重い。

その他Webツール

もじばけらった

文字化け解読ツール「もじばけらった」
http://lab.kiki-verb.com/mojibakeratta/

文字化け解読ツール「もじばけらった」は、文字化けして読めないメールなどの文書を解読するためのデコードサービスです。

うっかりやっちまった！文字化けしちゃった！
なんて時はこれを使ってみるとちょっと良いことが起こる。かもしれない。

color lovers

Color Trends + Palettes :: COLOURlovers
http://www.colourlovers.com/

COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love