すべての開発者が知るべきGoogle Chromeの隠れた機能5選

本記事は、[Yasas Sri Wickramasinghe](https://yasassri.medium.com/)氏による「[Google Chrome Hidden Features Every Developer Should Know](https://blog.bitsrc.io/google-chrome-experimental-features-for-developers-a9a7cc9d1b30)」（2021年10月11日公開）の和訳を、著者の許可を得て掲載しているものです。

#すべての開発者が知るべきGoogle Chromeの隠れた機能5選
>試した方がいいGoogle Chrome experiments

![](https://miro.medium.com/max/1400/1*PFJ5UGke-8gze_lcmzX5fw.jpeg)

##はじめに

Chromeデベロッパーツールは、ウェブ開発者間で最も使われているツールの1つです。しかし、ほとんどの開発者が知らない素晴らしい機能があります。

この記事では、すべての開発者が試すべきChromeデベロッパーツールの実験的機能トップ5について説明します。

##1. CSS Overview - すべてのスタイルの詳細情報を表示する

>###CSS Overviewは、ウェブページで使われているすべてのスタイルの概要を表示します。

この機能は、色、フォント、メディアクエリ、未使用の宣言に関する詳細情報を含んでいます。UIにCSSの修正を加える時に便利で、カラーピッカーなどのサードパーティツールを使う必要がなくなります。

![](https://miro.medium.com/max/2000/1*2UARjBrielEWvEQGmNRB3w.png)
>ChromeデベロッパーツールのCSS Overviewタブ

**この機能を有効にするには**

-   Google Chromeで**デベロッパーツール**を開く
-   **Settings**を開く
-   **Experiments**タブに移動する
-   **CSS Overview**をチェックする
-   **デベロッパーツール**のウィンドウを閉じ、再度開く
-   デベロッパーツールに**CSS Overview**パネルが新しく表示される

このCSS Overviewパネルは実験的機能ですが、一度使うと決してオフにはできません。とても便利で、CSSの作業が格段に楽になります。

##2. CSP Violations -- 想定されるセキュリティの脆弱性を警告する

>###CSP violation breakpointsは、想定されるCSP違反関連の例外を検出し、コード内で指摘します。

この機能を有効にすると、アプリケーションにセキュリティ層が追加され、クロスサイトスクリプティング（XSS）などの脆弱性が減少します。

![](https://miro.medium.com/max/2000/1*oaTaMGZS1zKot8dJ5vsi3w.png)
>Chromeが想定されるCSP違反を自動検出し、エラーコードをハイライト表示する

**この機能を有効にするには**

-   Chrome デベロッパーツールの**Experiments**タブに移動する
-   **Show CSP Violations view**をチェックする
-   **デベロッパーツール**のウィンドウを閉じ、再度開く
-   Sourcesパネルの**CSP Violations Breakpoints**で**Trusted Type Violations**と違反の種類をチェックする

Chromeデベロッパーツールは、検出された脆弱なコードブロックの直前に、修正のための詳細情報を表示します。

![](https://miro.medium.com/max/2000/1*HrihXX130xF58XDmYGZ3ug.png)
>ChromeデベロッパーツールでCSP Violation Breakpointsを有効にする

##3. New Font Editor Tool - フォントスタイルを瞬時に入れ替える

>###コードを触らずに、ウェブサイトのすべてのフォントを瞬時に入れ替えて、表示を確認できることを知っていますか？

Chromeデベロッパーツールには実験的なフォントエディタツールがあり、フォントの設定が変更できます。これを使って、フォントファミリー、サイズ、ウエイト、高さのスペースを変更し、変更をリアルタイムで確認できます。

![](https://miro.medium.com/max/700/1*qMUCY5GN6DplhkiOOz9lOA.gif)
>ChromeのStylesペインでフォントスタイルを変更する

**この機能を有効にするには**

-   Chromeデベロッパーツールの**Experiments**タブに移動する
-   **Enable New Font Editor Tool within the Styles Pane**をチェックする
-   **デベロッパーツール**のウィンドウを閉じ、再度開く
-   変更するフォントプロパティを含むHTML要素を選択する
-   **Styles**ペインに**Font Editor**アイコンが表示される

##4. Dual Screen Mode - 折りたたみ式デバイスのデュアルスクリーンをエミュレートする

>###Dual Screen Modeによって、Chromeデベロッパーツールエミュレータのデュアルスクリーンデバイスで、ウェブアプリケーションをデバッグできます。

この機能は、Surface Duoなどのデュアルスクリーンデバイスのデバッグで救世主となります。

![](https://miro.medium.com/max/2000/1*l_TbtiYfm_xaNVHJk9bCYg.png)
>Chrome experimentsのデュアルスクリーンエミュレーション

**この機能を有効にするには**

-   Chromeデベロッパーツールの**Experiments**タブに移動する
-   **Emulation: Support dual screen mode**をチェックする
-   **デベロッパーツール**のウィンドウを閉じ、再度開く
-   **デベロッパーツール**ウィンドウの左上にある**Toggle device toolbar**オプションから、テストするウェブページを開く
-   エミュレータをSurface Duoデバイス（または利用可能な他の折りたたみ式デバイス）に切り替える
-   **Toggle dual-screen mode**をクリックして、ウェブアプリケーションをデュアルスクリーンモードでエミュレートする

##5. Full Accessibility Tree View - アクセシビリティの情報で要素を検証する

>###Accessibility Treeによって、DOM要素ごとに作成されたアクセシビリティオブジェクトを検証できます。

この機能は、**Inspect Elements**タブと少し似ていますが、ウェブアプリケーションのアクセシビリティの詳細をより深く掘り下げて調べることができます。

![](https://miro.medium.com/max/2000/1*KRikkliMonM5WaFfWJDG7w.png)
>ChromeデベロッパーツールのElementsパネルのFull Accessibility Tree View

**この機能を有効にするには**

-   Chromeデベロッパーツールの**Experiments**タブに移動する
-   **Enable full accessibility tree view in the Elements panel**をチェックする
-   **デベロッパーツール**のウィンドウを閉じ、再度開く
-   **Elements**パネルに表示されている新しいアクセシビリティボタンをクリックして、**Elements view mode**を**Full Accessibility Tree View**に切り替える

##独立したコンポーネントで構築し、スピードとスケールを実現する

巨大なアプリケーションを構築するのではなく、まず独立したコンポーネントを構築し、それを機能やアプリケーションに組み立てます。これにより、開発が高速化され、より一貫性のあるスケーラブルなアプリケーションを構築できます。

[Bit](https://bit.dev/)のようなOSSツールは、独立したコンポーネントを構築し、アプリケーションを組み立てるための優れた開発体験を提供します。多くのチームは、独立したコンポーネントを使って、設計システムやマイクロフロントエンドを構築することから始めます。
[試してみてください。](https://github.com/teambit/bit)

![](https://miro.medium.com/max/2000/0*b0i6WoehKT5NQzAf.png)
>独立してソース管理、共有されているcardコンポーネント。右はBitが自動生成した依存関係グラフ。

##おわりに

この記事では、強力なのにあまり知られていないChromeデベロッパーツールの実験的機能を5つ取り上げました。あなたはいくつ知っていましたか？意見を聞かせてください。

Chromeデベロッパーツールであなたの開発生活が楽になったら嬉しいです。読んでくれてありがとう！

##もっと読む

>**効果的なデバッグのためのChromeデベロッパーツールElementタブ機能9選**
>フロントエンドアプリケーションのデバッグ方法が変わります
>[blog.bitsrc.io](https://blog.bitsrc.io/9-element-tab-features-in-chrome-devtools-for-effective-debugging-1b02aa8f000a)

### 

>**Chromeデベロッパーツールを使って生産性を向上させる10のヒント**
>開発体験を向上させるChromeデベロッパーツールの機能
>[blog.bitsrc.io](https://blog.bitsrc.io/10-tips-to-improve-productivity-using-chrome-dev-tools-7918fc8203f3)

### 

>**ChromeデベロッパーツールでPerformance Web APIを使う**
>ChromeデベロッパーツールがJavaScriptのPerformance Markのログと可視化に対応しました
>[blog.bitsrc.io](https://blog.bitsrc.io/using-the-performance-web-api-with-chrome-devtools-f4c59564b3d4)

##翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: [Yasas Sri Wickramasinghe](https://yasassri.medium.com/) ([Bits and Pieces](https://blog.bitsrc.io/))
Original Article: [Google Chrome Hidden Features Every Developer Should Know](https://blog.bitsrc.io/google-chrome-experimental-features-for-developers-a9a7cc9d1b30)
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

##ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。[Twitter](https://twitter.com/BabyDegu?lang=ja)でもご意見を受け付けております。
皆様のメッセージをお待ちしております。