😅
Google Chrome Developer Toolsについて学んでみた🧑🏼🎓
そもそもどうやってデバッグするのか?
参考にしたサイト
私以前は、操作の仕方がわからずブレークポイントをポチポチ色んなところに打っておりました😅
今回の学習をして、関数の引数の中に変数の値が入ってきてるか、調べるぐらいは分かりました。
習うより慣れろ
- プロジェクトを作る
- index.html、main.jsのファイルを用意する。
- GoogleChromeのブラウザを開く。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChromeDevTools</title>
</head>
<body>
<h1>デバックの練習</h1>
<script src="main.js"></script>
</body>
</html>
main.js
'use strict';
{
function say(params) {
return params;
}
const debug1 = say('こんにちは、今日は日曜日です。');
function saySeconde(e) {
return e;
}
const debug2 = saySeconde('こんにちは、日曜日のお昼ご飯は何を食べましたか?');
function sayThree(e) {
return e;
}
const debug3 = sayThree('こんにちは、日曜日のおやつは何を食べましたか?');
console.log(debug1);
console.log(debug2);
console.log(debug3);
}
ブレークポイントを打つ
returnのところに打つと変数から値が入ってきているか見れる。
私は、Macを使っているので、commandキー + Rを押して実行
そうするとデバッグが始まる。
gif形式のファイル小さいな...
デバッグが終わった後のスクリーンショット
最後に
APIからデータが取れているか、関数に値が入ってきているのか確認するときに、使います。是非是非皆さんも活用してみてください。
Discussion