🔰【Win/Mac】Google Chromeの設定とおすすめブラウザ拡張

https://www.google.com/intl/ja_jp/chrome/

Google Chromeのおすすめ設定手順です。
時々に更新するかもしれません( ˘ω˘ )

## 1. 既定のブラウザに設定する

1. Google Chromeを起動する
2. 「**設定**」を開く
3. 「既定のブラウザ」の「**デフォルトに設定**ボタン」をクリック
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/8e949d88-b00b-1da5-62ab-82625efd1c84.png)

Windows10の場合は「既定のアプリ」画面が開きます。
「Web ブラウザー」から「Google Chrome」を選び、「強制的に変更」をクリックします。

## 2. Googleアカウント同期の有効化

1. ブラウザ右上のアイコンをクリック<br>
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/2492733e-d446-0849-85bc-eec4a28b7b73.png)
2. メニューから「**同期を有効にする**ボタン」をクリック
3. Googleアカウントにログイン
4. 「**有効にする**ボタン」をクリック<br>
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/5ad599b7-752b-6107-4e4c-76c4aa0c2441.png)

以降は別のPCでも同期しているアカウントにログインするだけで、Google Chromeの設定が反映されます。

## 3. ブックマークバーの活用

`Ctrl＋Shift＋B`キーを押下するとブックマークバーが表示されます（Macでは`Ctrl`の代わりに`Command`キーを使います）。
ブックマークバーに登録しておきたいWebページのうち、[Favicon](https://ja.wikipedia.org/wiki/Favicon)が設定されているものは「名前」を空にしておくともっと便利です！
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/27d4adec-d529-52bf-0991-37dbc1bb705e.png)
具体的な手順は次の通りです👀

1. 好きなWebページを開く
2. `Ctrl`＋`D`キーを押下（Macでは`Ctrl`の代わりに`Command`キーを使います）
3. ボックス内の「名前」を**空**にする
4. ボックス内の「フォルダ」から「**ブックマークバー**」を選択
5. 完了をクリック<br>
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/2e02c8fe-ece8-0799-d97b-99bf91b17fd9.png)

### おすすめのWebページ

フロントエンドWeb制作者向けにおすすめのWebページを紹介します。

- [GitHub](https://github.com/)
- [Qiita](https://qiita.com/)
- [Can I use](https://caniuse.com/)
- [CodePen](https://codepen.io/)
- [npm](https://www.npmjs.com/)
- [npm trends](https://www.npmtrends.com/)
- [TechFeed](https://techfeed.io/)
- [HTML](https://html.spec.whatwg.org/multipage/)
- [All Standards and Drafts - W3C](https://www.w3.org/TR/)
- [WAI-ARIA Authoring Practices](https://w3c.github.io/aria-practices/)

ほかにも業務で使う社内Webサービスやイントラ系、SNSなどなど、
faviconで判断できる系はページ名を省略しておくとすっきりするのでおすすめで☀️


## 4. ブラウザ拡張の活用

フロントエンドWeb制作者向けにおすすめのブラウザ拡張（Extensions）をご紹介します。
★印がついているものはピン止め推奨です。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/fab2d050-facc-97ed-53fc-9ed8023c208c.png)

### 制作向け

- [Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb)：ブラウザ標準のWeb開発者ツールにアクセシビリティに関連する機能を追加する
- [axe - Web Accessibility Testing](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)：アクセシビリティの機械的なチェックができる
- [ChromeLens](https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd)：様々な視覚特性のシミュレーションや、フォーカス移動のトラッキングができる
- [HTML5 Outliner](https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo)：アウトラインアルゴリズムの計算結果を確認できる★<br>※参考程度に使っています
- [PerfectPixel by WellDoneCode (pixel perfect)](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi) ：デザインカンプをページに重ねられる必須ツール★
- [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)：Web制作便利ツールよくばりセット ★
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)：Reactマン向け
- [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)：Vueマン向け

### その他便利系

- [Check My Links](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf)：ページ内のリンク切れを検出できる★
- [Ghostery – プライバシー広告ブロッカー](https://chrome.google.com/webstore/detail/ghostery-%E2%80%93-privacy-ad-blo/mlomiejdfkolichcflejclcbmpeaniij)：広告ブロックによってページロードの高速化が期待できる
- [Google翻訳](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb)：選択したテキストを和訳できる
- [Linkclump](https://chrome.google.com/webstore/detail/linkclump/lfpjkncokllnfokkgpkobnkbkmelfefj)：複数のリンクをまとめて開ける
    1. オプションから「Actions」の「**Edit**」をクリック
        - ない場合は「Add Action」をクリックします
    2. 「Mouse button」から「**Right**」を選びます
    3. 「+ key」から「**ctrl**」を選びます
    4. `Ctrl`キーを押しながら右クリックドラッグで複数リンクを開けるようになります
        - ドラッグ中に`Ctrl`キーを話せば開かなくなるので、リンクの数を数えるときにも便利
- [Pasty](https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf)：クリップボードにコピーした複数のURLを開く★
- [simpleGestures](https://chrome.google.com/webstore/detail/simplegestures/flfminafiamnggnldfpilnfnmbgmiegn)：マウスジェスチャー
- [Super Highlight Search](https://chrome.google.com/webstore/detail/super-highlight-search/mnnlboenenpikhopbchpjikllhibfocl)：正規表現も使えるページ内検索
- [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) ：そのページで使われている技術を確認できる★
- [Web Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=ja)：今見ているWebページのスコアをチェックできます★
    - 参考：<https://web.dev/vitals/>
- [ウェブページ全体をスクリーンショット - FireShot](https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg)：ページをサクッとキャプチャしたいときに便利
- [重複したタブを閉じるやつ](https://chrome.google.com/webstore/detail/close-duplicate-tab/ollnnjepahcgphpjjhcfohpelmpldghj)：手前味噌ですが、現在のウィンドウでURLが重複しているタブを閉じる便利なやつです★

#### Super Highlight Search

次に以下のURLにアクセスします。

> chrome://extensions/shortcuts

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/8a91b9a0-8d59-b64c-6b30-ff2ebf447412.png)
「Super Highlight Search」を「Ctrl+Shift+F」で起動するようにするのがおすすめです！
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/427dd70e-0acd-a6d6-7bdf-c91260cd1c1f.png)

## おまけ

### Full accessibility tree view in the Elements panel を有効化する

アクセシビリティツリーの全体像をElementsタブの中で確認できるようになります。
FYI：https://developer.chrome.com/blog/new-in-devtools-90/?utm_source=devtools#accesibility-tree

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/3f918c35-d893-8890-ab3b-4c1dc45a470d.png)

1. 開発者ツールの設定を開く
1. Experimentsを選ぶ
1. **Enable full accessibility tree view in the Elements panel** のチェックを入れる

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/0c64e658-4ddb-3992-24e8-ff26a4b299b7.png)