タイ研修いってきました
2020.12.23

作業効率UP!Chromeの便利なプラグイン

  • このエントリーをはてなブックマークに追加
イキツケ制作所

こんにちは!なかしです。

日頃から作業効率化できるツールをよく探しているのですが、
最近googleChromeの拡張機能にも色々なものがあることを知りました。

なので!今回は私が実際に使ってみて便利だと思ったGoogleChromeの
おすすめの拡張機能について紹介したいと思います。

OneTab

Chromeのタブって、あとで見返すこともあるので開きっぱなしにしている方も多いのではないでしょうか?
OneTabは消したくないタブを一括でまとめて取っておくことができる便利ツールです。
開いていたタブがどこにあったか探す手間が省け、

OneTab

Googleキーボードショートカット

Googleで検索する際にいちいちマウス操作するのが煩わしくて見つけたのがこちら。
有効化するとgoogleの検索結果の最初のリンクに『▶︎』が表示され、
キーボードの『J』で下、『K』で上のリンクを選択、Enterキーでサイト内に入ることができます。

下記が使用するショートカットキーになります。

・J → 一つ下のリンク選択
・K → 一つ上のリンク選択
・Enter → サイトの中に入る
・L → 検索結果の次のページへ進む
・H → 検索結果の前ページに戻る

※ちなみにGoogleキーボードショートカットの機能ではないですが、
macユーザーならcommand+Lでアドレスバーを選択できます。

Googleキーボードショートカット

diff

サイトのHTMLの差分をチェックしたい時に使えるツールです。
こちらを使えば別タブで開いているサイトのコードの差分を比較することができます。

ブラウザ上でテストサイトと本番サイトの差分を確認したい時におすすめです。

diff

Page Ruler Redux

ページ上で画像や要素のサイズを測りたいときに使えるツールです。
アイコンを選択すると「+」マークが起動し、画面の上部に幅や高さなどを表示するバーが現れ、
測定したい箇所を「+」で選択すると数値を測定することができます。

PageRuler Redux

CSS Peeper

サイトの配色が気にいった時など、サイト全体のカラーコードを取得したい場合に使えるのがこのツール。
有効化してだけでサイト上で使用されているカラーのコードを一覧で見ることができます。

CSS Peeper

ColorZeela

ピンポイントでカラーコードを取得したい時はこちら。
スポイトツールが起動するので、カーソルで選択した部分のカラーコードを取得できます。

ColorZeela

最後に

いかがでしたでしょうか?
今回紹介した拡張機能が、少しでも皆さんの役に立てたら嬉しいです!

ちなみに、レジットの過去記事でも別のChromeの拡張機能について紹介しているので、
ぜひこちらも合わせてご覧ください!

コーダー目線で推したいChromeの拡張機能5選

 
イキツケ制作所
この記事を書いた人

なかしなかし

レジットのコーダー。趣味は旅行と料理と商店街散策です。

小規模持続化補助金

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。
売れてるサイトはこんなに違う。
イキツケ制作所
小規模持続化補助金