メモ：What's New In DevTools (Chrome 81)

間が開いてしまったけど、YouTube版で最新のWhat's New In DevToolsをちゃんと見てみた。

元情報

メモ

Moto G4 support in Device Mode

デバイスツールバーのデバイスリストに「Moto G4」というのが追加された。これを選択し、バーの右端のメニューボタンで「Show device frame」を押すとMoto G4のフレームが表示される。

この状態で「Capture screenshot」を押したときもフレームが表示される。

試しに撮ったのだけど、開き方が悪かったのか、違和感のある見栄えになった。

Cookie-related updates

ApplicationパネルのCookiesペインまわりでいくつかアップデートがあった。
- Cookie一覧でブロックされたクッキーの背景色が黄色になるようになった
- CookieのPriorityの欄ができた。各Cookieの優先度を見られる。
- Size以外のすべての欄をDevtools上で編集できるようになった。

あとNetworkパネルでは、各リクエストのところで右クリックすると「Copy」というメニューが出るけど、そこで「Copy as Node.js」が追加された。下記のような感じのスニペットがクリップボードにコピーされる。

fetch("https://web.dev/", {
  "headers": {
    "upgrade-insecure-requests": "1"
  },
  "referrer": "https://web.dev/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors",
  "credentials": "omit"
});

More accurate web app manifest icons

Applicationパネルのマニフェストのところで、アイコン表示のところ、以前は独特な挙動をしていたけれど、今はChromeと同じマニフェストアイコンが表示されるようになった。

Hover over CSS content properties to see unescaped values

CSSのcontentプロパティ、Devtoolsでみるとエスケープされた値が表示されるけど、hoverするとエスケープなし版の表示が見られるようになった。

More detailed source map errors in the Console

Consoleでソースマップのロードやパースに失敗したとき、より詳細な原因を表示してくれるようになった。

Setting for disabling scrolling past the end of a file

デフォルトだと、Sourceパネルではコードが見えなくなるところまでスクロールできるんだけど、それが邪魔な人はSettingパネルの「Allow scrolling past end of file」のチェックを外すと余分にスクロールされなくなる。

Bonus tip

動画だとたまにTips紹介がある。ドロワーメニュー内の「More Tools」ボタンが結構便利だよという話。

たとえば「Quick Source」でSourceパネルを開いていないときでもSourceがみられるし、「Search」のところで関連ソースのグローバルなキーワードサーチができる。