コンソール機能リファレンス
この記事では、コンソールの機能の概要について説明 します。
内容:
コンソールを開く
コンソールは、上部ペインのツールとして、またはドロワーのツールとして開くことができます。
コンソール ツールを開く
Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。
コマンド メニューからコンソール ツールを開くには、「」と入力Console
し、その横に [パネル] バッジがある [コンソールの表示] コマンドを実行します。
ドロワーでコンソール ツールを開く
Esc キーを押 します。または、[ DevTools (...
) のカスタマイズと制御] をクリックし、[ コンソール ドロワーの表示] を選択します。
[ドロワー] が DevTools ウィンドウの下部に表示され、 コンソール ツールが開きます。
コマンド メニューからコンソール ツールを開くには、「コンソール」と入力し、その横にドロワー バッジがある [コンソールの表示] コマンドを実行します。
コンソール設定を開く
[ コンソールの設定] () ボタンをクリックします。
コンソール サイドバーを開く
サイドバーを表示するには、コンソール サイドバーの表示 (コンソール サイドバーの) をクリックします。 サイドバーは、フィルター処理に役立ちます。
メッセージを表示する
このセクションには、コンソールでのメッセージの表示方法を変更する機能が含まれています。 実践的なチュートリアルについては、「 メッセージの表示」を参照してください。
メッセージグループ化をオフにする
コンソールの既定のメッセージ グループ化動作をオフにするには、[コンソールの設定] () ボタンをクリックし、[同様のグループ化] の横にあるチェック ボックスをオンにします。 例については、 ログ XHR と Fetch 要求に関するページを参照してください。
XHR 要求とフェッチ要求をログに記録する
すべての XMLHttpRequest
要求と Fetch
要求を コンソール に記録するには、[ コンソール設定] ([コンソール設定 ] ) ボタンをクリックし、[ Log XMLHttpRequests] の横にあるチェック ボックスをオンにします。
前の図の上部のメッセージには、 コンソールの既定のグループ化動作が表示されます。
ページ読み込み中にメッセージを保持する
新しい Web ページを読み込むと、既定のアクションによってコンソールがクリア されます。 ページの読み込み間でメッセージを保持するには、[ コンソール設定] () ボタンをクリックし、[ ログの保持] の横にあるチェック ボックスをオンにします。
ネットワーク メッセージを非表示にする
Microsoft Edge の既定のアクションは、ネットワーク メッセージをコンソールに記録 することです。 次の図では、選択したメッセージは の HTTP 状態コード 429
を表しています。
ネットワーク メッセージを非表示にするには:
[ コンソールの設定] (
) ボタンをクリックします。
[ ネットワークを非表示にする] の横にあるチェック ボックスをオンにします。
メッセージをフィルター処理する
コンソールでメッセージをフィルター処理する方法は複数あります。
ブラウザー メッセージを除外する
Web ページの JavaScript からのメッセージのみを表示するには、 コンソール サイドバーを開き 、[ # ユーザー メッセージ] をクリックします。
ログ レベルでフィルター処理する
DevTools は、次の 4 つの重大度レベルのいずれかを各 console.*
メソッドに割り当てます。
Error
Info
Verbose
Warning
たとえば、 console.log()
はグループ内にあります Info
が console.error()
、 はグループ内にあります Error
。 Console オブジェクト API リファレンスでは、該当する各メソッドの重大度レベルについて説明します。 ブラウザーがコンソールにログに記録するすべてのメッセージには、重大度レベルもあります。
関心のないレベルのメッセージは非表示にすることができます。 たとえば、メッセージにのみ関心がある場合は、他の Error
3 つのグループを非表示にすることができます。
メッセージをフィルター処理するには、[ログ レベル] ドロップダウン リストをクリックし、、、Info
、Warning
または 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 フィルターです。
1 つの URL からメッセージを表示するには:
[# ユーザー メッセージ] セクションを展開します。
フォーカスするメッセージを含むスクリプトの URL を選択します。
さまざまなコンテキストからメッセージを除外する
Web ページに広告 (広告) があるとします。 広告は に <iframe>
埋め込まれており、コンソールに多数のメッセージが生成 されます。 広告は別の JavaScript コンテキストで実行されているため、メッセージを非表示にする 1 つの方法は、[コンソール設定 ] ([コンソール設定) ボタンをクリックし、[選択したコンテキストのみ] の横にあるチェック ボックスをオンにすることです。
正規表現パターンに一致しないメッセージを除外する
[フィルター] テキスト ボックスになどの/[gm][ta][mi]/
正規表現を入力して、そのパターンに一致しないメッセージを除外します。 DevTools は、メッセージ テキストまたはメッセージのログ記録の原因となったスクリプトでパターンが見つかったかどうかを確認します。
JavaScript を実行する
このセクションには、コンソールでの JavaScript の実行に関連する機能が含 まれています。 実践的なチュートリアルについては、「 JavaScript の実行」を参照してください。
履歴から式を再実行する
上方向キーを押して、コンソールで前に実行した JavaScript 式の履歴を順番に切り替えます。 Enter キーを押して、その式をもう一度実行します。
Live Expressions を使用して式の値をリアルタイムで確認する
コンソールで同じ JavaScript 式を繰り返し入力すると、ライブ式を作成する方が簡単な場合があります。 Live Expressions では、式を 1 回入力し、本体の上部にピン留めします。 式の値は、ほぼリアルタイムで更新されます。 ライブ 式を使用したReal-Timeでの JavaScript 式の値の監視に関するページを参照してください。
一括評価をオフにする
コンソールで JavaScript 式を入力すると、一括評価によって戻り値のプレビューが表示されます。 戻り値のプレビューをオフにするには:
- [ コンソールの設定] (
) ボタンをクリックします。
- [ 一括評価] の横にあるチェック ボックスをオフにします。
履歴からオートコンプリートをオフにする
式を入力すると、 コンソール のオートコンプリート ポップアップ ウィンドウに、前に実行した式が表示されます。 式は、文字で >
事前にペン付けされます。 履歴からの式の表示を停止するには、[ コンソール設定] ([コンソール設定 ] ) ボタンをクリックし、[ Autocomplete From History]\(履歴からオートコンプリート \) チェック ボックスをオフにします。
次の図では、 と document.querySelector('img')
は、document.querySelector('a')
前に評価された式です。
JavaScript コンテキストを選択する
既定では、[JavaScript コンテキスト] ドロップダウンは top に設定され、web ページの閲覧コンテキストメインを表します。
Web ページの広告が に <iframe>
埋め込まれており、JavaScript を実行して広告の DOM を調整するとします。 [ JavaScript コンテキスト ] ドロップダウン リストをクリックし、広告の閲覧コンテキストを選択します。
コンソールをクリアする
コンソールをクリアするには、次のいずれかの方法を使用します。
[ コンソールのクリア ] (コンソール
) をクリックします。
メッセージを右クリックし、[コンソールの クリア] を選択します。
コンソールに「」と入力
clear()
し、 Enter キーを押します。Web ページの JavaScript から呼び出します
console.clear()
。コンソールにフォーカスがある間、 Ctrl キーを押しながら L キーを押します。
関連項目
- コンソール ツールでメッセージをログに記録する - コンソールで 情報、警告、エラーなどのログ メッセージをフィルター処理する方法。
- コンソールでの JavaScript の実行の概要 - コンソールで JavaScript ステートメントと式を発行する手順について説明します。
- コンソール オブジェクト API リファレンス - コンソールに入力してコンソールにメッセージを書き込む関数と式 (など
console.log()
)。 - コンソール ツールユーティリティ関数とセレクター - コンソール ツールで入力できる便利な関数など
monitorEvents()
。
注:
このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 ケイス・バスク (テクニカルライター、Chrome DevTools & Lighthouse)によって作成されています。