javascript基礎 ブラウザのコンソールを使用して結果や値を確認する

javascript基礎 ブラウザのコンソールを使用して結果や値を確認する

javascriptの基礎であるブラウザのコンソールを使用して結果や値を確認する手順を記述してます。

環境

  • OS windows11 home
  • ブラウザ chrome 100.0.4896.60

結果や値を確認

javascriptでの実行結果を、ブラウザで確認するには「console.log()」を使用します。

let x = 1
let y = 2

console.log( x + y );

console.log( 3 + 2 );

chromeの場合は、下図のように結果が表示されます。

※コンソールは画面を右クリックして「検証」を選択するか、windowsだと「F12」で開くことができます。

firefoxの場合

edgeの場合

macのsafariの場合は「開発」から「JavaScriptコンソールを表示」をクリックするとコンソールが表示できます。

実行結果

エラーを確認

また、コンソール画面を使用するとエラーが発生した際の原因も特定しやすくなります。
※エラーメッセージはブラウザにより異なる場合もあります。

以下の場合だと、「console.html」の79行目でエラーが発生していることが確認できます。

let num = i * 5; // console.html:79 Uncaught ReferenceError: i is not defined

「console.html 79:11」をクリックすると、

エラーが発生しているコードを直接確認することもできます。