Web制作者は使わないと損!Chrome 59でアップデートされたデベロッパーツールの便利な新機能
Post on:2017年6月7日
5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。

What's New In DevTools (Chrome 59)
Chrome 59 - What's New in DevTools -YouTube
ページの軽量化: 未使用のCSSとJavaScriptを見つける
新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。
- command + shift + P で、「Show Coverage」を入力して選択。
※「cov」まで入力すれば、上位に表示されます。

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

未使用のCSSとJavaScriptを見つける
フルサイズのスクリーンショットをキャプチャ
デベロッパーツールを起動し、command+shift+Mでデバイスを選択し、そのデバイスでフルサイズのスクリーンショットを撮影することができます。
- command + shift + P で、「Capture full size screenshot」を入力して選択。
※「cap」まで入力すれば、上位に表示されます。

Capture full size screenshotを入力
スクリーンショットは、入力してreturnキーを押すとすぐに撮影されます。
リソースのロードをブロック
Block Request URLを使用すると、リソースのロードをブロックして、リソースがロードされていないときのWebページの動作をシミュレートできます。
- Networkパネルでリソースを右クリックして、「Block Request URL」を選択。

「Block Request URL」を選択
特定のスクリプトやスタイルシートがロードされていない時、どのように振る舞うか簡単に確認できます。
非同期コードの検証
下記のtest()ような非同期コードをステップごとにチェックするとき、デベロッパーツールは一貫性のある最初の行から最後の行までを実行します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function wait(ms) { return new Promise(r => setTimeout(r, ms)).then(() => "Yay"); } // do some work in background. setInterval(() => 42, 200); async function test() { debugger; const hello = "world"; const response = await fetch('index.html'); const tmp = await wait(1000); console.log(tmp); return hello; } async function runTest() { let result = await test(); console.log(result); } |
コマンドメニューの統一
コマンドメニューを開いた時に、デフォルトで「>」が表示されるようになりました。これはコマンドメニューがcommand+Oである「Open file」メニューで統一されているためです。

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