コーディングを効率化できるChromeアドオンが知りたい
コーダー(フロントエンドエンジニア)においてGoogle chromeのアドオン(拡張機能)はかなり便利なツールが多いです。
今回は僕がコーディングのときに使っているアドオンとどんなときに使えるかなども踏まえてご紹介していきます。
ダウンロードリンクも一緒に貼っておきますので気に入ったツールがあればぜひ使ってみてください!
Chromeアドオンのインストール方法
Chromeのアドオンの追加はChromeウェブストアからインストール可能です。
- ウェブストアから「ストアを検索」
- お探しにアドオンの名前を入力
- アドオンが一覧で表示されるので目的のアドオンをクリック
- 「Chromeに追加」ボタンがあるのでクリックすればインストール完了です。
便利なChromeアドオン
Awesome Screenshot
今開いてくれているページのスクリーンキャプチャを撮ってくれるツールです。
キャプチャは「ページ全体」「表示部分」「選択部分」から撮ることができます。
また、Googleアカウントと連携すれば動画の撮影もすることができます。
どんなときに使うの?
ツールの説明などを書いているときに文字だけだと表現が難しいところ場所をキャプチャして貼り付ける。
実際の操作方法を動画形式で撮影する。
ColorPick Eyedropper
開いているページから調べたい箇所のカラーコードを抽出してくれます。
どんなときに使うの?
このページの見出しの文字色を自分のサイトでも使う
CSS3 Generator
グラデーションや吹き出しデザインなどのジェネレーターをひとまとめにしてくれているアドオンです。
自分でCSSを書く必要がないので時間短縮にも繋がります。
どんなときに使うの?
- ボタンの作成
- 吹き出しデザインの作成
Wappalyzer
他のサイトがどのようなウェブツールを使っているのかを調べてくれます。
どんなときに使うの?
- 他サイトがどんなCMSを使っているかを調べたい時
- JavaScriptはなんのライブラリ使ってるのか調べたい時
WhatFont
あなたが見ているサイトのフォント情報を見ることができます。
確認できる情報はこちら
- font-family:種類
- font-size:大きさ
- font-style:スタイル
- font-weight:太さ
- line-height:行間の高さ
- color:色
どんなときに使うの?
このサイトのフォントみたいにしてほしいなどデザイナーさんディレクターさんから指示があったとき
PerfectPixel
画像化したデザインカンプをブラウザ上で透過させながら重ねて表示させることができます。
どんなときに使うの?
デザイナーさんからもらったデザインカンプを透過してサイズの調整などに使います。
Responsive Viewer
レスポンシブデザインで作ったサイトを色々な画面幅で一括で確認することができます。
どんなときに使うの?
様々な画面幅でのページの見え方を一括で確認したいときに使います。
この手のツールはSizzyが有名でしたが今は有料になってしまいました。
Check My Links
開いているページのリンク切れをチェックしてくれます。色付きで教えてくれるのでどの部分がリンク切れしているのかが視覚
的に見つけやすいですし、リンク切れの数も教えてくれます。
また、リダイレクトされているリンクも教えてくれます。
どんなときにつかうの?
リンク切れをチェックしたいとき
Image Downloader
ページ内の画像を一括でダウンロードしてくれます。任意で選択してダウンロードすることもできます。
どんなときに使うの?
見ているページからいくつか画像素材として使いたい画像があるとき
Clear Cache
キャッシュをクリアしてくれます。
どんなときに使うの?
サイトを修正して更新したのに修正内容が反映されないとき
Page Ruler Redux
開いているページ上のサイズを測ってくれます。
どんなときに使うの?
ページ内のボタンサイズやコンテンツ幅などを知りたいとき
Web Develper
ページ内のJavaScriptやCSSを無効にできたり、画像を非表示にできたりとにかく色々なことができる万能ツールです。
どんなときに使うの?
正直できることがたくさんあるのでわかりません(ごめんなさい)
まとめ
以上、コーディング効率を爆上げできるプラグインの紹介でした。
ときにスピードが求められる作業だからこそ常に効率化を考えることが重要かなと思います。