開発者・ウェブ関係者必携。入れておきたいchromeアドオン
Chromeアドオンで開発を効率化したい
こんにちは、tkotです。私は普段のブラウジングや開発でMacのGoogle Chromeを使っています。最近はSafariのほうが電源の持ちが良いと聞き試していたんですが、いつの間にか戻っていました。
最近はクラッシュしたり妙に重くなったりして以前に比べて不満はあるものの、やはり機能面では一番充実していると思います。そこで私が使っているオススメアドオンを紹介します。
Meta SEO Inspector おすすめ度 ★★☆☆
title要素やmetaタグの有無、og:imageの設定が適切にできているかが確認できます。エンジニアやフロントエンドのコーディングを行う方、SEO担当の方にオススメです。
適切でないものが見つかればアイコンにエラーが表示されます。
HTML5 Outliner おすすめ度 ★★★☆
article要素やsection要素、h1~h6の見出し要素がどのようにマークアップされているかがひと目で分かります。
SEO上見出し構成は重要なので、ライターさんやSEO担当者、エンジニアは入れておくべきです。
EditThisCookie おすすめ度 ★☆☆☆
cookieを操作するのに使っています。ただ、最近のchromeは標準でcookie操作はできるようなので、インストールせず標準機能で足りるかも。
SimilarWeb おすすめ度 ★★★★
訪問したサイトがどのくらいのトラフィックか、similarwebのデータを使ってわかるようになります。 このアドオンがすごいのはクリックしなくてもサイトを読み込んで数秒待つとアイコンの満タン度でだいたいのアクセス数がわかるところです。 アドオンを導入している人がブラウジング中、ずっと情報を送ってるわけなのでどれだけのトラフィックをさばいているのか気になります。
このアドオンを入れていると測定値の取得以外に、常時閲覧情報が送られているのだと思います。公開前のサイトでほとんど自分しかアクセスしていなくても1Kとか2Kという数字になります。おそらくアドオンを入れてる人が訪問すると+100くらいのカウントになるのではないでしょうか。
Google Analytics Debugger おすすめ度 ★☆☆☆
Google Analyticsのデータ送信がうまくいってるかを確認できます。基本的にはそれだけなんですが、例えば以下のようなコードで
<a onclick="ga('send', 'event', 'cv', 'cv1', 'shiryo');">資料請求</a>
クリックなどをトラッキングする際、正しくデータが送れているかデバッグできて便利です。
React Developer Tools おすすめ度 ★☆☆☆
Reactを提供しているFacebookの公式アドオン。コンポーネントの配置やプロパティがビジュアルでわかるのでReactを使うディベロッパーには必須。
Vue.js devtools おすすめ度 ★☆☆☆
上のアドオンのVue.js版。こちらも公式。
iChrome おすすめ度 ★★★★
igoogleが終了し、my yahooも終了し、というタイミングで見つけたのがこのアドオンです。
ホーム画面にこのようにGoogle Driveやカレンダー、gmail、ニュースを並べることができます。
ポップアップブロッカー おすすめ度 ★★★☆
クリックすると広告に飛ばされるような動作をブロックしてくれます。
Block Yourself from Analytics おすすめ度 ★★★☆
Google Analyticsに自分のトラッキングを送らないように設定できます。 開発者が本番サイトを何度も利用するケースはよくあります。アクセス数が少ない場合、自分自身の滞在時間が非常に長かったりすると平均値などの数字が狂ってしまいますので、ブロックしましょう。
Vimium おすすめ度 ★★☆☆
vimのキーバインドがchromeで使えるようになります。 うれしいのはリンクにこのようにショートカットを表示できることです。
ウェブサイトでキーボードのfを押すと黄色いコードが出現するので、あとはクリックしたいリンクの通りコマンドを入力すると移動できます。マウスを使うシーンがぐっと減るので操作が早くなります。
逆にいらないアドオンは？
私の場合、iChromeのホームでカレンダーやメール、ニュースをすべてチェックしています。なので個別にgmailアドオンやgoogle driveアドオンは使っていません。 また、gmailはChromeにプッシュ通知が来るように設定できます。
あとはパスワード管理系のアドオンですが、これはセキュリティの観点から使用を見合わせています。
