このページ内容は2021年1月21日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。

link
Chrome DevTools

2021の間にChrome88から97βまでがリリースされました。Chrome88から94までの間は6週間ごとのリリースでしたが、94からは4週間ごとのリリースになりましたchrome_release_span。Chrome APIについて追うのは大変なので、Chrome DevToolsの追加機能のうち便利なものを独断と偏見でフィルタリングして紹介します。

link
FlexBoxやGridレイアウトのデバッグ強化

Chrome90からはFlexBoxのデバッグもやりやすくなりました。HTML上にdisplay: flexdisplay: inline-flexがあると、以下のようなバッジが表示されるようになりました。このバッジをクリックすると、FlexBoxの並べ方を変更できますflexbox。また、Chrome92からGridレイアウトのデバッグもできるようになりましたgrid

バッジ

バッジ

FlexBoxのデバッグ

FlexBoxのデバッグ

Gridレイアウトのデバッグ

Gridレイアウトのデバッグ

link
constの上書きをサポート

Chrome92からコンソールでのconstの上書きができるようになりましたconst_override。これでconsoleでの実験がやりやすくなりました。

console上でのconstの上書き

console上でのconstの上書き

link
Networkタブのフィルタリング

Chrome92からXHRがFetch/XHRに変更され、XMLHttpRequestとFetch APIの両方のネットワークリクエストを含むことがよりハッキリするようになりましたnetwork。また、新しくWasmボタンが追加され、Wasmのネットワークリクエストをフィルタリングできるようになりましたwasm

Chrome94からはFilterにinvertチェックボックスが追加され、チェックを入れると入力した項目を除外してフィルタリングできるようになりました。例えば、以下ではステータスが200のものを除外して表示させています。

Networkタブのフィルタリング

Networkタブのフィルタリング

その他嬉しい変更点として、リクエスト時のpayloadがタブとして表示されるようになりました。前まではHeadersの一番下にあり、リクエストで送ったパラメーターなどの確認が少し面倒でしたが、別タブで簡単に見られるようになりました。

payloadタブ

payloadタブ

link
CSS-in-JSの形式でコピー

Chrome96からDevToolsのCSSをコピーするときの形式として、CSS-in-JSがサポートされましたcss_in_js

CSS-in-JSでのコピー

CSS-in-JSでのコピー

link
カラーピッカーのアップデート

Chrome89からDevToolsで下図のような矢印部分をクリックすると、カラーピッカーが表示され、色を見ながら編集できるようになりましたcolor_picker。またShiftを押しながら、矢印部分をクリックするとカラーフォーマットを (RGBA, HSLA, 16進数などに) 変更できるようになりました。

DevToolsのElementsタブのStyles

DevToolsのElementsタブのStyles

DevToolsで確認できるカラーピッカー

DevToolsで確認できるカラーピッカー

link
その他

その他にも言語切り替えやCSSの長さの単位を切り替える機能が追加されました。言語切り替えはコンソールのエラーなども一部日本語で表示されるようになりますdefault_lang。CSSの長さ切り替えはどういう単位が使えるかの確認ができますlength。ただ、長さの単位に合わせて値を変換しません。

また実験機能ですが、画面の操作を登録できる機能も追加されましたrecorder。コンテンツの表示崩れなどの確認で使える機能です。前までは画面の操作をpuppeteerのコードにエクスポートできる機能でしたが、こちらは使えなくなりましたrecorder2

詳しく紹介しませんが、Chrome89からはimport mapも追加されました。この機能はブラウザ上でESModuleのようなimport文が利用できる機能で、Rails7でもフロント側のコア機能として利用されていますimport_map。詳しい使い方などはDegitalOceanのチュートリアルがわかりやすいですimport_map_tutorial


自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
最近の活動
技術書典13 (2022.9.10 - 2022.9.25) で本を出しました。
2022年の1月から8月ぐらいまでに登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2023part1
XMind8ファイルをMarkdownファイルに変換するツールを作りました。
公式のxmind-sdk-jsのバージョンを下げて作ってます (最新版だと一部メソッドが削除されてるため)。
技術書典12 (2022.1.22 - 2022.1.30) で本を出しました。
2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2022
サイトマップ
Notes
業務や趣味での気づき・メモ
Scraps
雑記。ネットで見つけた面白い記事やニュース
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧