😅

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

2022/04/24に公開約1,500字

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

参考にしたサイト

https://ja.javascript.info/debugging-chrome

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

習うより慣れろ

  1. プロジェクトを作る
  2. index.html、main.jsのファイルを用意する。
  3. 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形式のファイル小さいな...

デバッグが終わった後のスクリーンショット

最後に

エンジニア転職が決まるまで、モバイルの勉強ばかりしていましたが、仕事でJavaScriptの勉強も必要になり、学習をまた始めました。
Flutterエンジニアとして転職するはずだったのが、Web系エンジニアという肩書きになりそうですね😅
あ、自分のことはFlutterエンジニアと思ってますよ。

Discussion

ログインするとコメントできます