コンソールは、DevTools 内のインテリジェントで豊富なコマンド ラインのようなもので、他のツールと併用するための優れたコンパニオン ツールです。 コンソールは、スクリプト機能を記述し、現在の Web ページを検査し、JavaScript を使用して現在の Web ページを操作するための強力な方法を提供します。
コンソール ツールはいくつかのタスクに役立ちます。これらのタスクについては、次の記事で詳しく説明します。
- 問題を追跡して 、現在のプロジェクトで何かが機能しない理由を見つけます。 コンソールで報告される JavaScript エラーを修正するを参照してください。
- ブラウザーで Web プロジェクトに関する情報をログ メッセージとして取得します。 「 コンソール メッセージをフィルターする」を参照してください。
- デバッグ目的でスクリプトに情報をログに記録します。 コンソール ツールでのログ メッセージを参照してください。
- REPL 環境で JavaScript 式をライブで試します。 コンソールで JavaScript を実行するを参照してください。
- JavaScript を使用してブラウザーで Web プロジェクトと対話します。 コンソール を使用した DOM の操作を参照してください。
コンソール ツールは、DevTools の上部または下部で開くことができます。これは、アクティビティ バーの上部に表示されます。
コンソール は、 DevTools の下部 ( クイック ビュー パネル) に表示され、その上部に [要素] ツールが開かれています。
![下部パネルのコンソールとその上で [要素] ツールが開かれています](index-images/console-quick-view.png)
コンソールを直接開く最も速い方法は、Ctrl+Shift+J (Windows、Linux) または Command+Option+J (macOS) を押すことです。
エラー レポートとコンソール
コンソールは、JavaScript と接続エラーが報告される既定の場所です。 詳細については、「 コンソールで報告される JavaScript エラーの修正」を参照してください。
DevTools は、 コンソールのエラーに関する詳細情報を提供します。
Web で本体のエラー メッセージ文字列を検索する
DevTools 内からコンソール の エラー メッセージを Web で検索します。 コンソールでは、多くのエラー メッセージに虫眼鏡として表示された [Web でこのメッセージを検索する] ボタンがあります。
![コンソールのエラー メッセージの [Web でこのメッセージを検索する] ボタン](index-images/search-console-icon.png){kind=icon}
[ Web でこのメッセージを検索する ] ボタンをクリックすると、ブラウザーで新しいタブが開き、エラー メッセージの検索結果が表示されます。
現在の Web ページの情報を調べてフィルター処理する
Web ページで DevTools を開くと、 コンソールに膨大な量の情報が表示される場合があります。 重要な情報を特定する必要があるときに、情報量が問題になります。 対処が必要な重要な情報を表示するには、DevTools の問題ツールを使用します 。
問題は 、コンソール から 問題 ツールに徐々に移動しています。 ただし、 コンソールにはまだ多くの情報があるため、 コンソールの自動ログとフィルター オプションについて知っておくことをお勧めします。 詳細については、「 コンソール メッセージをフィルター処理する」を参照してください。
メッセージでいっぱいの コンソール を備えた DevTools:
コンソールに表示するログ情報
コンソールの最も一般的なユース ケースは、console.log() メソッドまたは他の同様の方法を使用してスクリプトからの情報をログに記録することです。
コード例
// prints the text to the console as a log message
console.log('This is a log message');
// prints the text to the console as an informational message
console.info('This is some information');
// prints the text to the console as an error message
console.error('This is an error');
// prints the text to the console as a warning
console.warn('This is a warning');
// prints the geometry of the document body as an object
console.log(document.body.getBoundingClientRect());
// prints the geometry of the document body as a table
console.table(document.body.getBoundingClientRect());
// shows a list of technologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technologies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd();
コンソールに表示する情報をログに記録するには:
デモ Web ページを開く コンソール メッセージの例: ログ、情報、エラー、警告 を新しいウィンドウまたはタブで表示します。
コンソールを開くには、Ctrl+Shift+J (Windows、Linux) または Command+Option+J (macOS) を押します。
コンソールには、デモ コードによって発生した結果のメッセージが表示されます。
上記のコードを コンソールに貼り付け、 Enter キーを押します。
メッセージが表示された場合:
Uncaught SyntaxError: Identifier 'technologies' has already been declared:新しいタブまたはウィンドウを開きます。
コンソールを開くには、Ctrl+Shift+J (Windows、Linux) または Command+Option+J (macOS) を押します。
上記のコードを コンソールに貼り付け、 Enter キーを押します。
コンソールを操作する際には、多くの便利な方法を使用できます。 詳細については、「 コンソール ツールでメッセージをログに記録する」を参照してください。
コンソールで JavaScript をライブで試す
コンソールは、情報をログに記録するだけの場所ではありません。 コンソールは REPL 環境です。 コンソールで任意の JavaScript を記述すると、コードはすぐに実行されます。 JavaScript の新機能をテストしたり、簡単な計算を行ったりすると便利な場合があります。 また、オートコンプリート、構文の強調表示、履歴など、最新の編集環境に期待されるすべての機能を利用できます。
コンソールで JavaScript を実行してみるには、次の手順を実行します。
コンソールを開きます。
「
2+2」と入力します。
入力時に 2+2 ライブの結果がコンソールに表示され、次の行に結果4が表示されます。
この Eager 評価 機能は、デバッグしてコードで間違いがないことを確認するのに役立ちます。
コンソールで JavaScript 式を実行し、必要に応じて結果を表示するには、Enter キーを押します。 次に、 コンソールで実行する次の JavaScript コードを記述できます。
複数の行の JavaScript コードを連続して実行する:
既定では、JavaScript コードを 1 行で実行します。 行を実行するには、JavaScript を入力して から Enter キーを押します。 1 行の制限を回避するには、Enter キーの代わりに Shift + Enter キーを押します。
他のコマンドライン エクスペリエンスと同様に、以前の JavaScript コマンドにアクセスするには、 上方向キーを押します。 コンソールのオートコンプリート機能は、慣れないメソッドについて学ぶための優れた方法です。
オートコンプリートを試すには:
- コンソールを開きます。
- 「
doc」と入力します。 - ドロップダウン メニューから [
document] を選択します。 -
Tab キーを押して
documentを選択します。 - 「
.bo」と入力します。 -
Tab キーを押して
document.bodyを選択します。 - 別の
.を入力すると、現在の Web ページの本文で使用できるプロパティとメソッドの完全な一覧が表示されます。
コンソールを操作するすべての方法の詳細については、「JavaScript 環境としてのコンソール」を参照してください。
コンソールでの JavaScript 式のオートコンプリート:
ブラウザーで現在の Web ページを操作する
コンソールは、ブラウザの Window オブジェクトにアクセスできます。 DOM からデータを読み取り、DOM 要素にデータを割り当てることで、現在の Web ページと対話するスクリプトを記述できます。
コンソールの DOM ツリーからの読み取り
JavaScript 式を使用して、DOM ツリーから選択した要素を読み取ることによって現在のページから読み取るには:
コンソールを開きます。
コンソールに次のコードを貼り付け、Enter キーを押します。
document.querySelector('h1').innerHTMLこの式は、DOM から最初の見出しレベル 1 を選択し、
<h1>開始タグと終了タグの間に含まれる HTML コンテンツを選択します。 コンソールには、式の出力 (見出しのテキスト) が表示されます。
コンソールに JavaScript 式を入力し、コンソールに出力を表示することで、Web ページの DOM 表現から読み取りました。
コンソールから DOM ツリーと Web ページに書き込む
コンソール内から DOM を変更する (または DOM への書き込み) ことで、レンダリングされる Web ページを変更することもできます。
レンダリングされる Web ページを変更するには:
コンソールを開きます。
コンソールに次のコードを貼り付け、Enter キーを押します。
document.querySelector('h1').innerHTML = 'Rocking the Console';上記の JavaScript 式は、
=記号を使用して、選択した DOM アイテムに値を割り当てます。 この例では、式の評価値は見出しの文字列です。 式の値 (見出し文字列) は、 コンソール とレンダリングされた Web ページの両方に表示されます。
Web ページの見出しを「 Rocking the Console」に変更しました。
$$ コンソール ユーティリティ メソッドの使用
コンソール ユーティリティのメソッドを使用すると、現在の Web ページへのアクセスと操作が容易になります。
たとえば、現在の Web ページのすべてのリンクの周囲に緑色の境界線を追加するには、次のようにします。
コンソールを開きます。
コンソールに次のコードを貼り付け、Enter キーを押します。
$$('a').forEach(a => a.style.border='1px solid lime');本体の
$$(selector)ユーティリティ関数は "すべてクエリ セレクター" です。 この DOM クエリ セレクター関数は、JavaScript 関数document.querySelectorAll()のように、指定された CSS セレクターに一致するすべての要素の配列を返します。 この例では、ハイパーリンク要素<a>すべてを選択し、その周りに緑色のボックスを適用します。
詳細については、「 コンソール ツール ユーティリティの機能とセレクター」を参照してください。