こんにちは。
システムチーム/プログラマーのNです。
今回のブログは新メンバーに向けて、作業中にあると便利なツールについて紹介します。
便利なツールは今後も紹介していこうと思います。
Chrome拡張機能
「JavaScript Errors Notifier」
JavaScriptエラーを通知してくれるChrome拡張機能で、
エラーがあった場合に、アドレスバーの星アイコンのとなりに赤色で通知してくれます。
通常コンソールを開いて確認しなくてはなりませんが、ページを開いてすぐに確認できるので開発者にとって便利なツールです。
「Page load time」
https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig?hl=ja
ページにアクセスするだけで自動的に表示速度を計測してくれるので便利です。
何にどれくらいかかっているかも確認できるので、実際のコード上での速度計測時に参考になると思います。
「EditThisCookie」
https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=ja
保存されているクッキーを表示・編集するChrome拡張機能です。
今後、クッキーを操作する作業が発生した場合、削除・編集が素早くできるのでかなり時短になると思います。
私はデキテルSPページのリンクをクリックしたら「済」アイコンが付与されるタスクでこのツールを使いました。
「Edge: The Web Ruler」
https://chrome.google.com/webstore/detail/edge-the-web-ruler/njlkegdphefeellhaongiopcfgcinikh?hl=ja
画面上の要素のpx、cm値を定規で計れる拡張ツール。
デザインコーディング時のカンプ画像のサイズを測る場合に便利です。
目視では1px単位のズレはわからないので、計測する癖をつけましょう。
「Window Resizer」
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ja
ワンクリックで画面サイズ変更
最初から主要なデバイスサイズが登録されていて、さまざまな画面サイズの表示確認ができます。
自由にサイズの追加もできるので、登録しておけばクリックごとに素早く切り替えることができます。
「The QR Code Extension」
https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb?hl=ja
実機スマホでページを見るためのQRコードの生成と読み取りが可能ツール。
よく見るページはブックマークしておけばいいですが、初めてアクセスする場合は便利です。
いろんなサイトを見て、スマホではどうなっているのだろうと思ったときに素早くアクセスできます。
あくまでサポートツール
時間計測などでツールの値をそのまま信用してはいけません。
正確なものは実際にデバッグコードを書いて計測するようにしましょう。
探せば他にも便利なツールはたくさんあるので、いいものがあれば共有してもらえればと思います。
