コンソール機能リファレンス

この記事では、コンソールの機能の概要について説明 します

内容:

コンソールを開く

コンソールは、上部ペインのツールとして、またはドロワーのツールとして開くことができます。

コンソール ツールを開く

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。

コンソール ツール

コマンド メニューからコンソール ツールを開くには、「」と入力Consoleし、その横に [パネル] バッジがある [コンソールの表示] コマンドを実行します。

コマンドを実行してコンソール ツールを表示する

ドロワーでコンソール ツールを開く

Esc キーを押 します。または、[ DevTools (...) のカスタマイズと制御] をクリックし、[ コンソール ドロワーの表示] を選択します。

コンソール ドロワーを表示する

[ドロワー] が DevTools ウィンドウの下部に表示され、 コンソール ツールが開きます。

ドロワーのコンソール ツール

コマンド メニューからコンソール ツールを開くには、「コンソール」と入力し、その横にドロワー バッジがある [コンソールの表示] コマンドを実行します。

コマンドを実行して、コンソール ツールをドロワーに表示する

コンソール設定を開く

[ コンソールの設定] ([コンソール設定] アイコン) ボタンをクリックします。

コンソール設定

コンソール サイドバーを開く

サイドバーを表示するには、コンソール サイドバーの表示 (コンソール サイドバー表示) をクリックします。 サイドバーは、フィルター処理に役立ちます。

コンソール サイドバー

メッセージを表示する

このセクションには、コンソールでのメッセージの表示方法を変更する機能が含まれています。 実践的なチュートリアルについては、「 メッセージの表示」を参照してください。

メッセージグループ化をオフにする

コンソールの既定のメッセージ グループ化動作をオフにするには、[コンソールの設定] ([コンソール設定] アイコン) ボタンをクリックし、[同様のグループ化] の横にあるチェック ボックスをオンにします。 例については、 ログ XHR と Fetch 要求に関するページを参照してください。

XHR 要求とフェッチ要求をログに記録する

すべての XMLHttpRequest 要求と Fetch 要求を コンソール に記録するには、[ コンソール設定] ([コンソール設定 ] アイコン) ボタンをクリックし、[ Log XMLHttpRequests] の横にあるチェック ボックスをオンにします。

XMLHttpRequest および Fetch 要求のログ記録

前の図の上部のメッセージには、 コンソールの既定のグループ化動作が表示されます。

ページ読み込み中にメッセージを保持する

新しい Web ページを読み込むと、既定のアクションによってコンソールがクリア されます。 ページの読み込み間でメッセージを保持するには、[ コンソール設定] (コンソール設定アイコン) ボタンをクリックし、[ ログの保持] の横にあるチェック ボックスをオンにします。

ネットワーク メッセージを非表示にする

Microsoft Edge の既定のアクションは、ネットワーク メッセージをコンソールに記録 することです。 次の図では、選択したメッセージは の HTTP 状態コード 429を表しています。

コンソールの '429' メッセージ

ネットワーク メッセージを非表示にするには:

  1. [ コンソールの設定] ([コンソール設定] アイコン) ボタンをクリックします。

  2. [ ネットワークを非表示にする] の横にあるチェック ボックスをオンにします。

メッセージをフィルター処理する

コンソールでメッセージをフィルター処理する方法は複数あります。

ブラウザー メッセージを除外する

Web ページの JavaScript からのメッセージのみを表示するには、 コンソール サイドバーを開き 、[ # ユーザー メッセージ] をクリックします。

ユーザー メッセージの表示

ログ レベルでフィルター処理する

DevTools は、次の 4 つの重大度レベルのいずれかを各 console.* メソッドに割り当てます。

  • Error
  • Info
  • Verbose
  • Warning

たとえば、 console.log() はグループ内にあります Infoconsole.error() 、 はグループ内にあります ErrorConsole オブジェクト API リファレンスでは、該当する各メソッドの重大度レベルについて説明します。 ブラウザーがコンソールにログに記録するすべてのメッセージには、重大度レベルもあります。

関心のないレベルのメッセージは非表示にすることができます。 たとえば、メッセージにのみ関心がある場合は、他の Error 3 つのグループを非表示にすることができます。

メッセージをフィルター処理するには、[ログ レベル] ドロップダウン リストをクリックし、、、InfoWarningまたは Errorを選択Verboseします。

[ログ レベル] ドロップダウン リスト

ログ レベルを使用してフィルター処理するには、 コンソール サイドバーを開 き、[ エラー]、[ 警告]、[ 情報]、または [詳細] を選択します。

サイドバーを使用して警告を表示する

URL でメッセージをフィルター処理する

「」と入力 url: し、その URL から送信されたメッセージのみを表示する URL を入力します。 と入力 url:すると、DevTools に関連するすべての URL が表示されます。 ドメインも機能します。 たとえば、 と https://example.com/b.js がメッセージをログに記録している場合https://example.com/a.jsは、url:https://example.comこれら 2 つのスクリプトからのメッセージに集中できます。

URL フィルター

URL からメッセージを非表示にするには、「 」と入力します -url:。 これは、負の URL フィルターです。

URL と一致するすべてのメッセージを非表示にする負の https://b.wal.co URL フィルター

1 つの URL からメッセージを表示するには:

  1. コンソール サイドバーを開きます

  2. [# ユーザー メッセージ] セクションを展開します。

  3. フォーカスするメッセージを含むスクリプトの URL を選択します。

wp-ad.min.jsから送信されたメッセージの表示

さまざまなコンテキストからメッセージを除外する

Web ページに広告 (広告) があるとします。 広告は に <iframe> 埋め込まれており、コンソールに多数のメッセージが生成 されます。 広告は別の JavaScript コンテキストで実行されているため、メッセージを非表示にする 1 つの方法は、[コンソール設定 ] ([コンソール設定] アイコン) ボタンをクリックし、[選択したコンテキストのみ] の横にあるチェック ボックスをオンにすることです。

正規表現パターンに一致しないメッセージを除外する

[フィルター] テキスト ボックスになどの/[gm][ta][mi]/正規表現を入力して、そのパターンに一致しないメッセージを除外します。 DevTools は、メッセージ テキストまたはメッセージのログ記録の原因となったスクリプトでパターンが見つかったかどうかを確認します。

正規表現式と一致しないメッセージを除外する

JavaScript を実行する

このセクションには、コンソールでの JavaScript の実行に関連する機能が含 まれています。 実践的なチュートリアルについては、「 JavaScript の実行」を参照してください。

履歴から式を再実行する

上方向キーを押して、コンソールで前に実行した JavaScript 式の履歴を順番に切り替えますEnter キーを押して、その式をもう一度実行します。

Live Expressions を使用して式の値をリアルタイムで確認する

コンソールで同じ JavaScript 式を繰り返し入力すると、ライブ式を作成する方が簡単な場合があります。 Live Expressions では、式を 1 回入力し、本体の上部にピン留めします。 式の値は、ほぼリアルタイムで更新されます。 ライブ 式を使用したReal-Timeでの JavaScript 式の値の監視に関するページを参照してください。

一括評価をオフにする

コンソールで JavaScript 式を入力すると、一括評価によって戻り値のプレビューが表示されます。 戻り値のプレビューをオフにするには:

  1. [ コンソールの設定] ([コンソール設定] アイコン) ボタンをクリックします。
  2. [ 一括評価] の横にあるチェック ボックスをオフにします。

履歴からオートコンプリートをオフにする

式を入力すると、 コンソール のオートコンプリート ポップアップ ウィンドウに、前に実行した式が表示されます。 式は、文字で > 事前にペン付けされます。 履歴からの式の表示を停止するには、[ コンソール設定] ([コンソール設定 ] アイコン) ボタンをクリックし、[ Autocomplete From History]\(履歴からオートコンプリート \) チェック ボックスをオフにします。

次の図では、 と document.querySelector('img') は、document.querySelector('a')前に評価された式です。

オートコンプリート ポップアップ メニューには、履歴の式が表示されます

JavaScript コンテキストを選択する

既定では、[JavaScript コンテキスト] ドロップダウンは top に設定され、web ページの閲覧コンテキストメインを表します。

JavaScript コンテキストドロップダウン リスト

Web ページの広告が に <iframe>埋め込まれており、JavaScript を実行して広告の DOM を調整するとします。 [ JavaScript コンテキスト ] ドロップダウン リストをクリックし、広告の閲覧コンテキストを選択します。

別の JavaScript コンテキストの選択

コンソールをクリアする

コンソールをクリアするには、次のいずれかの方法を使用します。

  • [ コンソールのクリア ] (コンソールのクリア) をクリックします。

  • メッセージを右クリックし、[コンソールの クリア] を選択します。

  • コンソールに「」と入力 clear() し、 Enter キーを押します。

  • Web ページの JavaScript から呼び出します console.clear()

  • コンソールにフォーカスがある間、 Ctrl キーを押しながら L キーを押します。

関連項目

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 ケイス・バスク (テクニカルライター、Chrome DevTools & Lighthouse)によって作成されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています