![見出し画像](https://assets.st-note.com/production/uploads/images/124899487/rectangle_large_type_2_256ed7bb81484aa2a3a68647a9aef281.png?width=1200)
JavaScript コンソールの使い方・デバッグの方法(Google Chrome)
プログラムがうまく動かない!時はデバッグを利用しましょう!
デバッグとは、プログラムにある間違い(バグ)を発見し、修正する作業の事を言います
デバッグの方法1:console.logを使用する
まずはコンソール(Console)に「Hello」を表示してみます
以下を記述します
「console.log」という命令を使用し、()の中に出力したい値を記述します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習</title>
</head>
<body>
<script>
console.log("Hello");
</script>
</body>
</html>
Google Chromeで表示し、検証(デベロッパー)ツールを表示(F12キー、もしくは右クリック→検証)し、Consoleタブをクリックすると以下の様に表示されました!
![](https://assets.st-note.com/img/1702879838734-3kT5RPPZtj.png)
変数の中身を表示したり、確認したい時にも使えます!
例えば以下の様に入力し
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習</title>
</head>
<body>
<script>
let fruits="apple";
console.log(fruits);
</script>
</body>
</html>
ブラウザで確認してみると、変数の中の値が表示されています!
プログラムがうまく動かない時は、変数を出力して確認してみましょう!
![](https://assets.st-note.com/img/1702879864252-1fTaEBPTyj.png)
デバッグの方法2:デバッグ実行をして確認する
ステップオーバーなどを使用
以下のコードを記述しブラウザで表示します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習</title>
</head>
<body>
<script>
let age=20;
if(age>=20){
console.log("大人");
}else{
console.log("子供");
}
</script>
</body>
</html>
プログラムを1ステップずつ動かして確認して行きます
検証ツールのSourcesに切り替え、プログラムを止めたい行番号(例:15)をクリックしブレークポイントの設定をします
ブラウザの更新を行います
そうすると、15行目でプログラム実行が止まります
![](https://assets.st-note.com/img/1702879889881-yKfPXaGXuF.png?width=1200)
1行ずつ進めて確認したい時は、ステップオーバーをクリックします
![](https://assets.st-note.com/img/1702879906837-jWXLFwWhZg.png)
変数に現在入っている値も確認出来ます
![](https://assets.st-note.com/img/1702879923956-CMIQVRoY20.png)
※マウスを変数名にポイントしても確認出来ます
ステップインなどを使用
以下のコードを記述しブラウザで表示します
(消費税を計算する関数getPriceを作成してあります)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習</title>
</head>
<body>
<script>
const getPrice = (price,tax) => {
return price * tax;
}
let price = 150;
let tax = 1.1;
let result=getPrice(price,tax);
console.log(result);
</script>
</body>
</html>
検証ツールのSourcesに切り替え、プログラムを止めたい行番号(例:18)をクリックします
ブラウザの更新を行います
そうすると、15行目でプログラム実行が止まります
![](https://assets.st-note.com/img/1702879950456-8eDWIFHAMb.png?width=1200)
関数の中に移動したい時はステップインをクリックします
![](https://assets.st-note.com/img/1702879961182-bT5AEHVPo0.png)
処理が関数の中に移動し、引数の値を確認する事も出来ます
![](https://assets.st-note.com/img/1702879971026-AF4IcoisFO.png?width=1200)
ステップアウトを押すと、関数が終了するまで実行し関数を抜けます
![](https://assets.st-note.com/img/1702879980479-PxY1jnV3BQ.png)
![](https://assets.st-note.com/img/1702879985734-SP7zF2mOYT.png?width=1200)
再開ボタン
再開を押すと、プログラムを最後まで実行する事が出来ます
![](https://assets.st-note.com/img/1702879996064-ervnVTiBJF.png)
また、ブレークポイントを複数設定した場合は、ブレークポイントからブレークポイントへ移動します
![](https://assets.st-note.com/img/1702880005659-jdTuBRzS5g.png?width=1200)
ありがとうございます!人間あきらめなければ何でも出来ます!一緒に頑張りましょう!