Web制作者は使わないと損!Chrome 59でアップデートされたデベロッパーツールの便利な新機能

5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。

Chromeのキャプチャ

What's New In DevTools (Chrome 59)
Chrome 59 - What's New in DevTools -YouTube

ページの軽量化: 未使用のCSSとJavaScriptを見つける

新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。

  1. command + shift + P で、「Show Coverage」を入力して選択。
    ※「cov」まで入力すれば、上位に表示されます。
Chrome デベロッパーツールのキャプチャ

Show Coverageを入力

ページをロードまたは実行すると、タブに使用されたコードの量とロードされた量が表示されます。必要なコードだけにすることで、ページのサイズを縮小することができます。

Chrome デベロッパーツールのキャプチャ

未使用のCSSとJavaScriptを見つける

フルサイズのスクリーンショットをキャプチャ

デベロッパーツールを起動し、command+shift+Mでデバイスを選択し、そのデバイスでフルサイズのスクリーンショットを撮影することができます。

  1. command + shift + P で、「Capture full size screenshot」を入力して選択。
    ※「cap」まで入力すれば、上位に表示されます。
Chrome デベロッパーツールのキャプチャ

Capture full size screenshotを入力

スクリーンショットは、入力してreturnキーを押すとすぐに撮影されます。

リソースのロードをブロック

Block Request URLを使用すると、リソースのロードをブロックして、リソースがロードされていないときのWebページの動作をシミュレートできます。

  1. Networkパネルでリソースを右クリックして、「Block Request URL」を選択。
Chrome デベロッパーツールのキャプチャ

「Block Request URL」を選択

特定のスクリプトやスタイルシートがロードされていない時、どのように振る舞うか簡単に確認できます。

非同期コードの検証

下記のtest()ような非同期コードをステップごとにチェックするとき、デベロッパーツールは一貫性のある最初の行から最後の行までを実行します。

コマンドメニューの統一

コマンドメニューを開いた時に、デフォルトで「>」が表示されるようになりました。これはコマンドメニューがcommand+Oである「Open file」メニューで統一されているためです。

Chrome デベロッパーツールのキャプチャ

「>」を削除して、「?」を入力

top of page

©2018 coliss