1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

最近知ったChrome DevToolsの便利な機能4つ

数年ぶりにフロントエンドアプリケーションの開発を行うことになり、その際に知ったDevToolsの機能を紹介します。

過去の開発でデバッキングやNetworkタブでのアクセス検証など、DevToolsの基本的な操作は把握していましたが、ひさしぶりに触ると様々な機能が追加されており、DevToolsの進化を感じられました。

1. Command Menu

Visual Studio Codeライクに、DevTools上でリソースの検索やコマンドパレットなどのショートカットメニューが利用できる機能です。

  • リソースの検索 [cmd+p]
    表示しているアプリケーション上に存在するリソースの検索を行うことができます
    search.gif

  • コマンドパレット [cmd+shift+p]
    DevToolsに存在する機能を検索し、ジャンプすることができます
    pallet.gif

2. Logpoints

ソースコードを修正することなく、DevTools上の任意の行でコンソール出力を仕込むことができる機能です。

  1. 任意の行の右側(行番号部分)で右クリックし、Add logpointを選択
    logpoint_add_logpoint.png

  2. 出力する内容を入力します
    単純な文字列のほか、定義済みの変数やテンプレートリテラルなどが使用できます
    logpoint_input.png

  3. 該当行に到達するとログ出力されます
    logpoint_output.png

3. Request Initiator

(※ 執筆時点では、Request Initiator chainはChrome Canaryのみで提供されています)
画像やcss、jsファイルリソースの読み込み元と依存関係が明らかになる機能です。
そのリソースがどのような処理またはライブラリに由来しているのか、コールスタックとリクエスト元からわかって便利です。

  1. NetWorkタブを選択し、依存関係を追跡したいリソースを表示します Initialtorを表示すると、リソースの依存関係が示されます。 request_initiator.png

4. Audits

パフォーマンスやSEO, PWAなどの指標で開いているページのスコアリングをします。

  1. Auditsタブを開き、スコアリングの対象としたい指標を指定します
    Screen Shot 2019-12-17 at 8.49.27.png

  2. Run Auditsをクリックするとスコアリングが行われます
    項目ごとに詳細なメトリクスが表示されるので、それを元に対策を行うことでスコアの改善が見込めます
    Screen Shot 2019-12-17 at 8.58.54.png

終わりに

作成したアプリケーションでは利用する事ができませんでしたが、jsファイルやスタイルシート内のカバレッジを計測する機能など、他にも面白い機能が多数あります。

フロントエンドやそのライブラリが進化しているのと同様に、DevToolsも進化し様々な機能追加が行われているようです。
知っておいて損はないので、今後もキャッチアップしていきたいですね。

Global Mobility Serviceでは、フロントエンドエンジニアを募集しています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?