DevTools の新機能 (Chrome 94)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, Pусский

翻訳者の yoichiro さん、レビュアーの technohippy さんと lacolaco さんに感謝いたします。

DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。

好みの言語での DevTools の利用

Chrome DevTools は 80 言語以上をサポートするようになりました。あなたの好みの言語で使用することができます!

Settings を開き、Preferences > Language ドロップダウンから好みの言語を選択して、DevTools を再読み込みしてください。

Change language in Settings > Preferences

Chromium issue: 1163928

新しく Nest Hub デバイスがデバイスリストに

Device mode にて、Nest Hub および Nest Hub Max の寸法をシミュレートできるようになりました。

Toggle Device Toolbar   Toggle Device Toolbar   をクリックして、デバイスリストから Nest Hub または Nest Hub Max を選択してください。

Nest Hub device in the Device mode

Chromium issue: 1223525

フレーム詳細ビューの Origin trials

Application パネルのフレーム詳細ビューにて、サイトの origin trials についての情報を得ることができるようになりました。

Origin trials は、新規または実験的な機能へのアクセスを提供します。これはその機能が誰でも利用可能になる前に、期間限定でユーザーに試してもらえる仕組みを作るためのものです。

Origin trials を使っているページを開きます(例. デモページ)。 Application パネルにて、 Frames セクションまで下にスクロールして、トップフレームを選択してください。

Origin trials in the Frame details view

Chromium issue: 607555

新しい CSS コンテナクエリバッジ

新しい container バッジがコンテナ要素(@-規則 @container の条件に一致する上位の要素)の隣に追加されます。そのバッジをクリックして、選択されたコンテナとそのクエリを実行している全ての下位要素のオーバーレイ表示を切り替えることができます。

CSS container queries badge

Chromium issue: 1146422

ネットワークフィルタを反転するための新しいチェックボックス

新しい Invert チェックボックスを使うことで、Network パネルのフィルタを反転することができます。

例えば、ステータス 404 を持つネットワークリクエストにフィルタするために、"status-code: 404" とタイプすることができます。その Invert チェックボックスを有効にすると、フィルタが反転します(ステータス 404 を持たない全てのネットワークリクエストが表示されます)。

Invert the network filters

Chromium issue: 1054464

Console サイドバーが今後非推奨に

フィルタの UI をツールバーに移動させることを優先して、Console サイドバーは削除される予定です。何か懸念やフィードバックはありますか?ここ( issue tracker )経由で私達に知らせてください。

Console sidebar deprecation message

Chromium issue: 1232937

Issue タブや Network パネルでの未加工の Set-Cookie ヘッダーの表示

DevTools は、 Issues タブにて、未加工の Set-Cookie ヘッダを表示するようになりました。

以前は、DevTools は Network パネルにて不正なクッキー(正しくない Set-Cookie ヘッダ)を表示しませんでした。 Network パネルに追加された新しい response-header-set-cookie フィルタを使って、ユーザは未加工の Set-Cookie ヘッダレスポンスをフィルタすることができます。DevTools は、Issues タブにて未加工の Set-Cookie ヘッダを Network パネルにリンクすることになります。

Raw 'Set-Cookie' headers in the Issues tab and Network panel

Chromium issue: 1179186

Console での自身のプロパティとしてのネイティブアクセサの一貫した表示

Console は、ネイティブアクセサをそれら自身のプロパティとして一貫して表示するようになりました。

例えば、Console にて new Int8Array([1, 2, 3]) という式が評価される際に、 lengthbyteOffset のようなネイティブアクセサは、プレビュー内で表示されていませんでした。この最新のアップデートにて、ネイティブアクセサはプレビュー内で表示され、展開された際に値が積極的に評価されます。

Consistent display native accessors as own properties in the Console

Chromium issues: 1076820, ​​1199247

#sourceURL を使ったインラインスクリプトの適切なエラースタックトレース

DevTools は #sourceURL を使用してインラインスクリプトを適切に解決し、デバッグ向けの正しいエラースタックを表示するようになりました。

以前の DevTools では、#sourceURL を使ったインラインスクリプトの間違った位置(<script> 開始タグに対してではなくむしろ周囲のドキュメントに対して)が表示されていました。

Proper error stack traces for inline scripts with #sourceURL

Chromium issues: 1183990, ​​578269

Computed ペインでのカラーフォーマットの変更

カラープレビュー上で Shift + クリックすることで、Computed ペインで任意の要素のカラーフォーマットを変更することができるようになりました。

Shift+Click the color preview to change color format

Chromium issue: 1226371

カスタムツールチップをネイティブの HTML ツールチップに置き換え

DevTools は、全てのコンポーネントでネイティブの HTML ツールチップを採用するようになりました。ネイティブの HTML ツールチップのスタイルが欠如していたために、DevTools は長い間カスタムツールチップの実装を持っていました。

残念なことに、カスタムツールチップ実装のメンテナンスは複雑であり、定期的に複雑な不具合に遭遇していました。

カスタム実装の利点を再評価しましたが、ネイティブの HTML ツールチップは DevTools にとって十分であり、ツールチップを採用することでユーザの様々な問題を防ぐことができると考えています。

DevTools tooltip

Chromium issue: 1223391

[実験的] Issues タブでの問題の非表示

実験的な機能を有効にするには、 Settings > Experiments にある Enable hide issues menu をクリックしてください。

hide issues menu 実験的機能を有効にすることで、Issues タブにて問題を非表示にすることができます。これにより、あなたにとって重要な問題にフォーカスすることができるようになります。

Issue タブにて、問題にカーソルを合わせて、問題の右にあるメニュー   More   をクリックし、それを非表示にするために Hide issues like this を選択します。

Experimental hide issue context menu

Chromium issue: 1175722

プレビューチャンネルのダウンロード

Chrome CanaryDevBetaをデフォルトの開発ブラウザとして利用することを検討してください。これらのプレビューチャンネルでは DevTools の最新機能を利用でき、最先端のウェブプラットフォーム API をテストして、ユーザーが遭遇するよりも先にあなたのサイトの問題を見つけることができます。

Chrome DevTools チームとの交流

新しい機能や、この投稿の変更、その他 DevTools に関することであれば何でも、意見があれば以下のいずれかを使用してご連絡ください。

  • 私たちへの提案やフィードバックはcrbug.comから投稿してください。
  • DevTools の問題は DevTools の More options   More   > Help > Report a DevTools issues を使用してレポートしてください。
  • @ChromeDevTools 宛にTweetしてください。
  • What's new in DevTools YouTubeビデオにコメントを残してください。

More DevTools features

関連する機能の完全なリストは、What's New In DevTools の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.