😅

Google Chrome Developer Toolsについて学んでみた🧑🏼‍🎓

JboyHashimoto

2022/04/24に公開

JavaScript

tech

そもそもどうやってデバッグするのか?

参考にしたサイト

私以前は、操作の仕方がわからずブレークポイントをポチポチ色んなところに打っておりました😅
今回の学習をして、関数の引数の中に変数の値が入ってきてるか、調べるぐらいは分かりました。

習うより慣れろ

プロジェクトを作る
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からデータが取れているか、関数に値が入ってきているのか確認するときに、使います。是非是非皆さんも活用してみてください。

Jboy王国メディアPublication

これは、Jboy王国公式のZennアカウントです。

最後に

Discussion