アクトインディ開発者ブログ

子供とお出かけ情報「いこーよ」を運営する、アクトインディ株式会社の開発者ブログです

Chromeの設定+α

この記事は actindi Advent Calendar 2017 の12月3日の記事です

Web系のエンジニア、デザイナーにとって最も利用する仕事道具といえば、Webブラウザだと思います。 その中でもGoogle Chromeを使うことが多いのではないでしょうか。

今回はChromeの便利な設定などについて紹介します。

Chromeの環境を複数持ちたい

私はChromeに拡張を結構インストールしています。便利なんですが、時にそれらが全くないクリーンなChromeを使いたいことがあります。拡張の影響を受けたくないだけなら、シークレットモードを使、うのが、最も手っ取り早いです。 が、すべての拡張をOFFにするのは困る場合、シークレットモードではなく別の環境を持ちたくなることがあります。
また、開発中には複数のアカウントで同時にログインして動作の違いなどを確認したいこともあるのではないでしょうか。

そういう場合には次の方法があります。

Chrome canaryをインストールする

手っ取り早い方法のひとつとして Chrome canary版をインストールすることです。

これはChromeの開発者向けバージョンで、まだ、通常のChromeに入っていない新機能が含まれているものです。 通常版のChromeとは全く独立で動作するので、普段使いのChromeにインストールしている拡張や設定の影響を受けません。 通常リリース版より不安定な可能性はあるのですが、使っている感想としては困ったことはありません。 ちなみに、canary版にはAndroid版もあります。 新しいJavaScriptやCSSの機能をいち早く試せたりするのでインストールしておいて損はないと思います。

別ユーザ(プロファイル)を使う

Chromeには複数のユーザ(プロフィール)を管理する機能が備わっています。 ユーザごとにChromeのバージョン以外は拡張・設定が独立しています。 Chromeの設定(chrome://settings/)を開いて、「他のユーザを管理」をクリックすると 次のような画面が表示されます。

ユーザ管理

この画面の右下「ユーザを追加」をクリックすると、次のようなユーザ名とアイコンを入力する画面が開くので 適当に入力します。

ユーザ登録

入力したら「追加」ボタンをクリックすると新しいChromeのウィンドウが開きます。 それが新たに追加したユーザで起動したChromeです。 ウィンドウの右肩に利用しているユーザの名前が表示されるので区別できます。 これまで使ってきたChromeとは別にブックマークと拡張が管理されますで、 用途別にユーザを作ってそれに応じた拡張をインストールしたりすると便利です。 あるいはまっさらな状態のままにしておいてもいいでしょう。

また、ChromeはGoogleアカウントへのログインを求めてきますが、 ユーザごとに別のアカウントが使えるので複数のアカウントを同時に利用したい場合にも便利です。 別Chromeユーザならば、Googleにかぎらず他のWebサービスでも同時に複数アカウントでログインすることが可能です。

登録したユーザを切り替えるにはウィンドウの右肩をクリックすると一覧が表示されるのでそこで選択できます。

ユーザ登録

Dev Tool

Web系のエンジニア・デザイナーにとって、Chrome Dev Toolもよく使うツールだと思います。 Dev Toolでの便利な設定や機能を紹介します。

コマンドメニューを開く

Dev Toolを表示します。そこで、macならば command+shift+p、Windowsならばctrl+shift+p(win)を押します。 するとatomエディタやsublimeを使っている人にはおなじみのコマンドメニューが開きます。 ここにChrome Dev Toolの機能・設定のすべてがリストアップされます。 あちこち探し回るよりも効率よく機能を呼び出したり設定を変更できます。 コマンドの一部を入力すると、候補を絞り込んでくれるので、うろ覚えの機能でも探しやすいです。

コマンドメニュー

以下にコマンドメニューを眺めていて、こんな機能があったのか! と思った機能を幾つか紹介します。

サードパーティコンテンツにマークを付ける

ネットワーク広告やその他計測ツールなど、他社のJavaScript、CSS等を自社サイトで読み込んでいる場合も多いかと思います。 Dev ToolのNetworkタブではそれらも一緒に表示されるので、どれがどこのものなのかわかりにくいです。 そんなときにはコマンドメニューでshow third party badges を選択すれば、サードパーティのコンテンツには 次のようにマークが表示されます。

Third party badges

マウスオーバーするとサードパーティのサービス名も表示されます。 同様の表示はNetworkタブの他、Consoleでも表示されます。

カバレッジ

開発を続けていると、使われなくなったJavaScriptやCSSが出てきます。変更がはっきりしていると その時に削除するのですが、いつの間にか使わなくなってしまったというものもあるのではないでしょうか。 害がなければ放置されることも多いのではないかと思うのですが、ムダも積み重ねると開発効率や 表示速度の低下の元になったりします。 使われていないJavascriptやCSSを特定するのは時に困難です。そんな時役立つのがカバレッジ機能です。 表示するにはコマンドメニューで show coverage を選択します。

coverage

上のキャプチャで示した円を描いた矢印のボタンをクリックするとページをリロードして計測を開始します。 結果は画面の下にそのページで実行されているJavaScriptやCSSがリストアップされ、 それぞれコードの何%が実行されているかが表示されます。 そのリストから1つを選択すると、画面上部にコードが表示されます。 実行されている部分は緑、実行されていない部分は赤く表示されます。

Railsだとアセットパイプラインで複数のファイルがまとめられます。 したがって該当のページだけではすべてのコードを実行しない場合もあります。 計測は止めるまで継続されるのでこの状態から続けて操作を行えば実行されたコードは緑に変わっていきます。 ページ遷移など操作を続ければ使われていないコードを絞り込んでいくことができます。
利用頻度の低い機能で実は使っていたというリクスがあるので、これだけで削除を判断するのは早計かもしれませんが、 削減候補を探すときには役立ちます。

時々、この機能を使って、使われてなさそうなコードをチェックしてはどうでしょうか。

レイヤー

Firefoxの開発ツールにもあったのですが、Quantumになってからなくなってしまったので残念に思っている方もいるのではないでしょうか。 Chromeにも実は同様の機能があります(内容がペイントされないのでFirefoxのものより見劣りはしますが)。 コマンドメニューから show layers を選択すると次のように表示されます。

layer

キャプチャは私が個人的に公開している防災に関わる「言い伝え」MAP のものですが、パンとローテートで表示を調整するとWebページのレイヤーの重なり具合を確認できます。 レイヤをクリックして選択すると、サイズやメモリ消費量などが表示されます。 これを使えば何故か表示されない要素の重なり順を確認したり、隠れていて見えない無駄要素を見つけることができるでしょう。

最後に

Chrome を活用していこーよを改善していきたいエンジニアを募集していますので、よろしくお願いします。