DevTools の新機能 (Chrome 107)

公開日

翻訳先言語: English, Español, Português, 한국어, 中文, Pусский

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

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

DevTools のキーボードショートカットのカスタマイズ

DevToolsで、好きなコマンドのキーボードショートカットをカスタマイズできるようになりました。

Settings > Shortcuts を開き、コマンドにカーソルを合わせて Edit ボタン(ペンのアイコン)をクリックすると、キーボードショートカットをカスタマイズできます。コード(複数のキーを押すショートカット)を作成することもできます。

DevTools のキーボードショートカットのカスタマイズ

Chromium issues: 1335274, 174309

キーボードショートカットでのライトテーマとダークテーマの切り替え

キーボードショートカットを設定して、ライトテーマとダークテーマを便利に切り替えられるようにします。デフォルトでは、このアクションはどんなキーボードショートカットも設定されていません。

キーボードショートカットでのライトテーマとダークテーマの切り替え

Chromium issues: 1280398, 1226363

Memory Inspector で C/C++ オブジェクトをハイライト表示

Memory Inspector は、 C/C++ メモリオブジェクトの全てのバイト列をハイライト表示します。

周囲の WebAssembly メモリの中からオブジェクトのバイト列を認識するのは面倒でした。オブジェクトのサイズを把握し、オブジェクトの先頭からバイト列を数える必要があります。

この機能があれば、周囲のメモリとの区別が楽になります。変更点については、 C/C++ デバッグのための Memory Inspector の拡張 を参照してください。

Memory Inspector で C/C++ オブジェクトをハイライト表示

Chromium issue: 1336568

HAR インポート時の完全な Initiator 情報をサポート

HAR インポート 時に、完全な Initiator 情報を利用できるようになりました。以前は、インポート時に Network パネルに Initiator 情報の一部しか表示されませんでした。

Initiator 情報は、開発者がネットワークリクエストの発信元を追跡し、ネットワーク関連の問題を特定するのに役立ちます。

HAR インポート時の完全な Initiator 情報をサポート

Chromium issue: 1343185

Enter を押した時にのみ DOM 検索を開始

Search as you type の設定を無効にして、 Enter を押した時にのみ DOM 検索を開始できるようになりました。

Elements パネルで、 Control または Command + F を押して検索バーを切り替えます。検索テキストボックスにクエリを入力すると、 DOM ツリーは最初にマッチした要素にジャンプし、デフォルトでハイライト表示されます。

ユーザー、特に長い検索クエリを常に扱うテスターにとって、この動作は理想的ではありません。長い検索クエリ(例: //div[@id="example"] )を入力すると、 DOM ツリーが何度もジャンプする可能性があります。この動作は無駄な動きを生み出します。

DOM 検索

Settings > PreferencesSearch as you type を無効にしてみましょう。この変更により、 Enter を押した時にのみ検索が開始されます。

Search as you type の設定

Chromium issue: 1344526

CSS のフレックスボックスプロパティ align-contentstartend のアイコンを表示

Styles ペインで、 display: flex または display: inline-flex を持つCSSクラスの align-content プロパティを編集するとき、オートコンプリートのドロップダウンに startend のアイコンが表示されます。

align-content フレックスボックス プロパティ

Chromium issue: 1139945

その他のハイライト

  • Console サイドバーに正しいメッセージ数を表示します。以前はコンソールメッセージをクリアしても、カウントが更新されませんでした。 (1343311)

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

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 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

更新日 記事を改善する

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