自分でコードが直せるようになる！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タブをクリックすると以下の様に表示されました！
変数の中身を表示したり、確認したい時にも使えます！
例えば以下の様に入力し
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習</title>
</head>
<body>
<script>
let fruits="apple";
console.log(fruits);
</script>
</body>
</html>
ブラウザで確認してみると、変数の中の値が表示されています！
プログラムがうまく動かない時は、変数を出力して確認してみましょう！
デバッグの方法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行目でプログラム実行が止まります
1行ずつ進めて確認したい時は、ステップオーバーをクリックします
変数に現在入っている値も確認出来ます
※マウスを変数名にポイントしても確認出来ます
ステップインなどを使用
以下のコードを記述しブラウザで表示します
(消費税を計算する関数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行目でプログラム実行が止まります
関数の中に移動したい時はステップインをクリックします
処理が関数の中に移動し、引数の値を確認する事も出来ます
ステップアウトを押すと、関数が終了するまで実行し関数を抜けます
再開ボタン
再開を押すと、プログラムを最後まで実行する事が出来ます
また、ブレークポイントを複数設定した場合は、ブレークポイントからブレークポイントへ移動します
Udemyで講座を公開中！
Discussion