diff --git a/docs/2-javascript-training/01-inspector/call-stack.png b/docs/2-javascript-training/01-inspector/call-stack.png
new file mode 100644
index 000000000..fc3887909
Binary files /dev/null and b/docs/2-javascript-training/01-inspector/call-stack.png differ
diff --git a/docs/2-javascript-training/01-inspector/index.md b/docs/2-javascript-training/01-inspector/index.md
index 549394b24..7a78d67d8 100644
--- a/docs/2-javascript-training/01-inspector/index.md
+++ b/docs/2-javascript-training/01-inspector/index.md
@@ -5,14 +5,110 @@ title: ブラウザの開発者ツール
import CodeBlock from '@theme/CodeBlock';
import Term from "@site/src/components/Term";
import OpenInCodeSandbox from "@site/src/components/OpenInCodeSandbox";
+import inspectElementsVideo from "./inspect-elements.mp4";
+import { GrSelect } from "react-icons/gr";
-## ブラウザの開発者ツールを利用する
+## 開発者ツールを起動する
-- 開発者ツールの起動方法
-- HTML や CSS の確認・編集方法
+Google Chrome などのブラウザに搭載されている**開発者ツール**には、ウェブ開発をサポートする様々な機能が提供されています。
+
+:::info Google Chrome 以外の開発者ツール
+Google Chrome 以外のブラウザにも開発者ツールは搭載されています。ほとんど同等の機能が提供されているので、基本的にはどれを使っても構いません。しかしながら、Google Chrome のものが最も多く使用されており、本カリキュラムでも基本的には Google Chrome を用いるものとします。
+:::
+
+開発者ツールは、`Cmd (Ctrl) + Opt (Shift) + I` キー、もしくは `F12` キーを押すことにより起動できます。
+
+
+
+## HTML や CSS の構造の確認
+
+`Elements` タブを用いると、ウェブサイト上に現在表示されている HTML の構造や、各 HTML 要素に適用されている CSS の状態を確認したり、その場で値を書き換えて、表示が変化する様子を確認したりすることができます。
+
+また、表示中の HTML 要素を右クリックして `検証` メニューをクリックするか、開発者ツールの中のインスペクトボタン () をクリックすることにより、要素を直接選択することができます。この方法を用いることで、HTML の木構造を根から辿る必要がなくなります。
+
+
+
+### 課題
+
+あなたのお気に入りのニュースサイトの記事をひとつ選び、その中に現れる人物名を、 `Elements` タブの機能を用いて自分の名前に変えてみましょう。悪用厳禁です！
## デバッガ
-- ブレークポイント
-- ステップ実行 (ステップイン・アウト・オーバー)
-- コールスタック
+**デバッガ** は、プログラムのバグを探し、解決するために役立つソフトウェアです。ブラウザの開発者ツールには、通常 JavaScript のデバッガが搭載されています。
+
+デバッガを用いることで、プログラムが実行される様子を細かく観測することができます。次のプログラムで試してみましょう。
+
+```html title="index.html"
+
+
+
+
+ Title
+
+
+
+
+
+
+```
+
+```javascript title=script.js
+function add(a, b) {
+ return a + b;
+}
+
+let resultElement = document.getElementById("result");
+let sum = add(3, 4);
+resultElement.textContent = sum;
+```
+
+JavaScript のデバッガは主に `Sources` タブから用います。まずはこのタブを開き、サイドパネルに表示された `script.js` を開きましょう。
+
+
+
+続いて、5行目の行番号が表示されている部分をクリックして**ブレークポイント**を設置します。この状態でブラウザを更新してみてください。
+
+JavaScript の実行がブレークポイントを設定した地点に差し掛かると、プログラムの実行がデバッガにより一時停止されます。
+
+:::info
+上記のプログラムにおいて、ページの読み込みの完了時にはすでに JavaScript の実行が終わっています。このため、ブレークポイントを設置した行のプログラムは、ページを更新するまで再度実行されません。
+:::
+
+:::caution
+上の画像の中の、緑色の四角で表示されている部分は、**これから実行されようとしている行**を表します。つまり、5行目のプログラムは、この時点ではまだ実行されていません。
+:::
+
+
+
+続いて、**ステップ オーバー**ボタンを押します。ステップ オーバーは、現在の行を実行し、次の行に進む操作です。これにより、緑色の四角が6行目に移ります。
+
+
+
+この状態で、`resultElement` の部分にマウスカーソルを乗せてみましょう。`resultElement` 変数の中身が表示されます。変数の値がオブジェクトの場合は、その内部を見ることもできます。おなじみの `textContent` プロパティなども存在していることが分かりますね。
+
+
+
+次は、**ステップ イン**ボタンを押してみましょう。現在の行が関数呼び出しだった場合、実行が関数の中に移ります。
+
+
+
+右側のパネルの `Call Stack` (**コール スタック**) 部分を見てみてください。ここには、現在実行されている関数が、どの順番で実行されているのかが表示されています。この場合は、`script.js` というファイルの 6 行目から `add` 関数が呼び出されていることが分かります。
+
+
+
+最後に、**ステップ アウト**ボタンを押しましょう。このボタンを押すと、現在実行されている関数が最後まで実行され、呼び出し元の関数の実行に戻ります。
+
+
+
+### 課題
+
+次のプログラムの 4 行目では、`add` 関数は 3 回実行されます。どのような順番で関数が呼び出されているか、デバッガを用いて確認してみてください。
+
+```javascript title=script.js
+function add(a, b) {
+ return a + b;
+}
+
+let result = add(add(1, 2), add(3, 4));
+document.write(result);
+```
diff --git a/docs/2-javascript-training/01-inspector/inspect-elements.mp4 b/docs/2-javascript-training/01-inspector/inspect-elements.mp4
new file mode 100644
index 000000000..b7ae1b51f
Binary files /dev/null and b/docs/2-javascript-training/01-inspector/inspect-elements.mp4 differ
diff --git a/docs/2-javascript-training/01-inspector/inspect-object.png b/docs/2-javascript-training/01-inspector/inspect-object.png
new file mode 100644
index 000000000..4c471649d
Binary files /dev/null and b/docs/2-javascript-training/01-inspector/inspect-object.png differ
diff --git a/docs/2-javascript-training/01-inspector/open-file-in-debugger.png b/docs/2-javascript-training/01-inspector/open-file-in-debugger.png
new file mode 100644
index 000000000..42838c776
Binary files /dev/null and b/docs/2-javascript-training/01-inspector/open-file-in-debugger.png differ
diff --git a/docs/2-javascript-training/01-inspector/open-inspector.png b/docs/2-javascript-training/01-inspector/open-inspector.png
new file mode 100644
index 000000000..d68e09019
Binary files /dev/null and b/docs/2-javascript-training/01-inspector/open-inspector.png differ
diff --git a/docs/2-javascript-training/01-inspector/set-breakpoint.png b/docs/2-javascript-training/01-inspector/set-breakpoint.png
new file mode 100644
index 000000000..ac33cefba
Binary files /dev/null and b/docs/2-javascript-training/01-inspector/set-breakpoint.png differ
diff --git a/docs/2-javascript-training/01-inspector/step-in.png b/docs/2-javascript-training/01-inspector/step-in.png
new file mode 100644
index 000000000..4e6c7b08f
Binary files /dev/null and b/docs/2-javascript-training/01-inspector/step-in.png differ
diff --git a/docs/2-javascript-training/01-inspector/step-out.png b/docs/2-javascript-training/01-inspector/step-out.png
new file mode 100644
index 000000000..f052e7a8a
Binary files /dev/null and b/docs/2-javascript-training/01-inspector/step-out.png differ
diff --git a/docs/2-javascript-training/01-inspector/step-over.png b/docs/2-javascript-training/01-inspector/step-over.png
new file mode 100644
index 000000000..f5458c4d7
Binary files /dev/null and b/docs/2-javascript-training/01-inspector/step-over.png differ
diff --git a/docs/2-javascript-training/03-loop/index.md b/docs/2-javascript-training/03-loop/index.md
index b11f9551c..e708d2256 100644
--- a/docs/2-javascript-training/03-loop/index.md
+++ b/docs/2-javascript-training/03-loop/index.md
@@ -132,7 +132,7 @@ for (let x = 0; x < 5; x += 1) {
:::tip テンプレートリテラル
-テンプレートリテラルは、文字列をプログラム中に記述する方法の一種です。ただ、文字列中に別の指揮を埋め込めるという特徴があります。
+テンプレートリテラルは、文字列をプログラム中に記述する方法の一種です。ただ、文字列中に別の式を埋め込めるという特徴があります。
```javascript
const string1 = "10から2を引くと" + (10 - 2) + "です。";
diff --git a/docs/2-javascript-training/04-class/index.md b/docs/2-javascript-training/04-class/index.md
index d9c51c0be..40950e920 100644
--- a/docs/2-javascript-training/04-class/index.md
+++ b/docs/2-javascript-training/04-class/index.md
@@ -17,6 +17,10 @@ class Student {
}
```
+:::info
+クラスの名前は、通常のキャメルケースの最初の文字だけを大文字にした**パスカルケース**で記述するのが普通です。
+:::
+
`new` 演算子をクラスに対して適用すると、設計図に基づいてオブジェクトが作成されます。こうしてできたオブジェクトを、もとになったクラスの**インスタンス**と呼びます。
```javascript
@@ -176,3 +180,7 @@ document.write("Hello World!".toString()); // Hello World!
document.write(false.toString()); // false
```
:::
+
+## 課題
+
+`継承` のセクションで登場した `Student` クラスを継承して `SeniorStudent` クラス