フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方

# はじめに

昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。

Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。

ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。

思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。

# 基本系

## キーボードショートカットを覚える

[Chromeのキーボードショートカットの一覧](https://support.google.com/chrome/answer/157179?hl=ja)

キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。

## Chrome Canaryを使う

Chromeの開発者向けプレビュー版

[Chrome Canary](https://www.google.co.jp/intl/ja/chrome/browser/canary.html)

正式版にはない便利な機能を先取りできます。

DevToolsのアップデートによるちょっとした変化に気づいた時は思わずニヤリとしてしまうフロントエンドエンジニアも多いんじゃないでしょうか。

最終的な動作確認は正式版でやりましょう。

## シークレットモードを使う

拡張を色々入れたり、開発と関係のないセッション情報を引きずった状態でデバッグや動作確認を行うと、それらの情報がノイズィーに感じることが多々ありました。

ということで基本はシークレットモード(プライベートブラウズ)使って開発をしています。

![141130-0001.png](https://qiita-image-store.s3.amazonaws.com/0/31639/f10bd00a-edaf-0247-f33c-e1837219dbd9.png)

`CMD+SHIFT+N`で開きます。

シークレットモードではデフォルトですべての拡張が無効化され、ノーマルウィンドウのセッション情報も引き継がずにクリーンな環境を手に入れることができます。

### シークレットモードで拡張を使う

シークレットモードで使いたい拡張がある場合は拡張の設定で実行を許可します。
![141130-0003.png](https://qiita-image-store.s3.amazonaws.com/0/31639/9d147d81-1ec9-1ee9-c490-29114840ece6.png)

## タブの切り替え方

ほとんどショートカットキーで切り替えてます。
かなり使用頻度は高いです。

左のタブに切替：`CMD+[`
右のタブに切替：`CMD+SHIFT+]`

## ページ遷移履歴を辿る

ショートカットキーで。

戻る：`CMD + ←`
進む：`CMD + →`

戻る／進むボタンをクリック長押しで履歴から選択できます。

![back_nagaoshi.png](https://qiita-image-store.s3.amazonaws.com/0/31639/17edb59c-2568-04bc-0a98-715b0aa88bca.png)

## アドレスバーにフォーカスする

ショートカットキーで。

`CMD+L`

## ページ内検索から該当キーワードにフォーカスする

`CMD+F`で検索して、複数のキーワードが該当した場合に
`CMD+G`で次のキーワード、
`CMD+SHIFT+G`で前のキーワードに移動します。

## 拡張にショートカットキーを割り当てる

![kakuchou_01.png](https://qiita-image-store.s3.amazonaws.com/0/31639/17c23640-2d1f-535c-ca1a-0fdc5bb87519.png)

ブラウザ設定の`拡張機能`の一番下にキーボードショートカットの設定があります。


![kakuchou_02.png](https://qiita-image-store.s3.amazonaws.com/0/31639/334c5313-d2fc-8ecd-ee76-615492d5c480.png)

キーボードショートカットに対応した拡張に任意のキーを割り当てる事ができます。

[Google翻訳](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb?hl=ja)、[1Password拡張](https://agilebits.com/onepassword)、[Clearly](http://evernote.com/intl/jp/clearly/)を愛用しています。

## DevToolsの開き方

DevToolsの開き方は3つあります。
目的によって使い分けると捗ります。

## 要素を選択できる状態で開く

![open_1.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/45ffd939-a590-6202-57f5-9d49b7e99999.gif)

この開き方が一番多いです。
DevToolsのElementsパネルで中身を見たい要素を見つけたら

`CMD+SHIFT+C`

そして目的の要素をマウスで選択。

## Javascriptをすぐに実行できる状態で開く

![open_2.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/3ee56050-4e0f-dbfa-e38c-d65f0c2ac54f.gif)

無性にJavascriptを検証したくなったりするときにこの開き方をします。

`CMD+OPTION+J`

DevToolsのConsoleペインで開くのでインスタントにJavascriptを実行することができます。

Consoleにログが溜まっていて邪魔な場合は即座に

`CTRL+L`

でConsoleをクリアします。

macだけかも知れませんがConsoleではGNU readline的なショートカットが使えるようです。

## 普通に開く

`CMD+OPTION+I`

# DevToolsの使い方

## Consoleを開く/閉じる

![esc.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/005a4795-9bc2-6294-d0ac-a7a103baf42b.gif)

`ESC`で表示／非表示をトグルできます。

## Grepでファイルを開く

![search.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/2b4c1be8-2cba-f74b-ecd1-166e86f6ff08.gif)

キーワードを頼りにソースコードを絞りたいときはGrepを使います。

`CMD+OPTION+F`

マッチした結果の行部分をクリックするとその場所にジャンプした状態でファイルを開くことが出来ます。

## ファイル名を曖昧検索してSourcesタブでファイルを開く

![cmds.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/8f2df2fa-de5b-fb07-9168-e82193fd002d.gif)

Sublime Textの`Go to Enything`のように`CMD+P`でファイル名を絞るための検索ボックスが表示されます。

一部のキーワードを入れても曖昧に絞り込んでくれます。

`Enter`キーで確定してファイルを開きます。

## DevTools内のタブの操作

![tab3.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/8ddc5294-4bd6-5b3e-8c93-b65cbe7bd8dd.gif)

DevTools内のタブの切替え頻繁に行うのでショートカットキーを覚えておくと捗ります。

`CMD+1~9`：
それぞれ左から数えた順番にタブが対応します。
DevToolsの設定から有効にする必要があります。

`Settings` -> `General` -> `Appearance` -> `Enable Cmd+1-9 shortcut switch to panels`にチェック

左のタブに切替：`CMD+[`
右のタブに切替：`CMD+]`
履歴的に前に切替：`CMD+OPTION+[`
履歴的に後に切替：`CMD+OPTION+]`

## Elementsタブ

### 画面上隠れている要素を画面内に表示されるところまでスクロールする

![scrollintoview.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/3f74c19f-ae00-4291-f1f5-17236427aa10.gif)

要素を選択して右クリックメニューから`Scroll into View`を選択します。
地味に便利です。

### 要素の編集

#### 選択した要素全体をテキスト編集する

![edit.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/cdc83d08-551d-f2b0-fffd-87998c422b18.gif)

要素を選択して`F2`で編集モードに入ります。
改行は`ENTER`で行い、確定は`CMD+ENTER`、`ESC`でキャンセルします。

#### 選択した要素の属性を効率よく編集する

![editattr.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/5ede84cb-bb71-248c-019c-3bab2ea31609.gif)

`ENTER`で編集モードに入ります。
`TAB`/`SHIFT+TAB`で属性間を移動します。
属性の追加は右端の空白部分までTABで移動し、空白にフォーカス行ったところ新規属性を入力することができます。

`ENTER`で確定、`ESC`でキャンセルします。

#### 属性の数値をインクリメンタルに増減する

![countup.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/0997a41d-46b0-16e7-582a-a0670eadabf1.gif)

スタイルのプロパティのうち、サイズやカラーコードなどの数値系のプロパティは0.1、1、10の単位で増減ができます。
`↑`:1増加
`↓`:1減少
`SHIFT+↑`:10増加
`SHIFT+↓`:10減少
`OPTION+↑`:0.1増加
`OPTION+↓`:0.1減少

### カラーコードの表示形式を切替え

Sytlesペインのカラー系のプロパティに表示されているカラーアイコンを`SHIFT`を押しながらクリックすると`カラーコード` -> `RGB` -> `HSL`の形式に切り替わります。

### アンドゥ、リドゥする

編集した内容をアンドゥ、リドゥできます。

`CMD+Z`：アンドゥ
`CMD+SHIFT+Z`：リドゥ

### 要素の表示、非表示を切り替える

要素を選択した状態で`h`キーで表示状態をトグルできます。

`visiblity: hidden !important`が設定されるのでトルママになります。
個人的にはdisplay:noneしてくれるやつも欲しいです。

トルツメして表示を確認したい場合は、`DEL`で要素を削除して`CMD+Z`でアンドゥしています。

### CSSプロパティ名でフィルタリングして効率よく継承元の要素を特定する

![style.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/348b14ae-d5c2-22f3-8740-6bb1582543f5.gif)

要素を選択してStylesペインで設定されているスタイルを確認する際、親要素から継承されるタイプのCSSプロパティ(`color`など)はStylesペインに表示されないため親要素を辿って定義元を特定します。

Stylesペイン下部に、小さくて分かりにくいのですがプロパティ名でフィルタリングするためのテキストフィールドがあります。

ここで目的のプロパティ名を入力してStylesペイン内のプロパティをフィルタし、`←`で親要素を辿ると非常に効率よく定義元のプロパティを特定することができます。

floatさせた要素の基準となる`position:relative`な要素を特定するときにもよく使っています。

また、Stylesペインの右のComputed Styleを表示したペインにも同様のフィルタリングが可能です。

よく`display:`をキーワードとして打ち込んでいます。（未だにタグのdisplayタイプうろ覚え…）

## Sourcesタブ

### javascriptのfunction、cssのclass定義にジャンプする

![func.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/a8a83d01-02d1-2e49-827b-bf02b364482d.gif)

`CMD+SHIFT+P`

`CMD+P`でファイルを選択してからの連携でよく使います。

### フォーマットする

![source.png](https://qiita-image-store.s3.amazonaws.com/0/31639/613305c8-3c5e-b371-d529-32591f452217.png)

`{}`アイコンをクリック

昨今のサイトはminifyされていることがままあるので重宝しています。

## Networkタブ

### Filterでリソースタイプを複数選択して効率良く絞り込む

![network.gif](https://qiita-image-store.s3.amazonaws.com/0/31639/06a77712-5fa4-e93b-cf01-0ae2ffb4524e.gif)

`CMD`を押しながらリソースタイプをクリックすると前の選択状態はそのままに複数のリソースタイプを選択することができます。

しばらくこれには気づきませんでした。

# 後で書く

なんだか終わらなくなってきたのでメンテしていきます。

* レスポンシブレイアウトの確認をする
* 低速回線をシミュレートする
* UserAgentを切り替える
* AndroidのWebViewをデバッグする
* MV*系のライブラリ使う場合は専用の拡張を活用する
* jQuery Debbugerを使う

# 最後に

Chromeとは関係ありませんが、フロントエンドエンジニアをやり始めて非常に重宝しているCharlesというツールの紹介記事を書いています。
特にモバイルネイティヴアプリのWebViewのデバッグに便利なツールです。
興味のある方は是非。

[俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜まとめ〜](http://qiita.com/dayoshix/items/035c5e44dad8219bf001)