Change devtool article (#704)

Author: kiyokaanan

docs/2-browser-apps/01-inspector/index.mdx

@@ -4,6 +4,11 @@ title: ブラウザの開発者ツール
 
 import inspectElementsVideo from "./inspect-elements.mp4";
 import { GrSelect } from "react-icons/gr";
+import {
+  VscDebugStepOver,
+  VscDebugStepInto,
+  VscDebugStepOut,
+} from "react-icons/vsc";
 
 ## 開発者ツールを起動する
 
@@ -27,14 +32,32 @@ Google Chrome 以外のブラウザにも開発者ツールは搭載されてい
 
 <video src={inspectElementsVideo} muted controls />
 
-### 演習
+### 確認問題
 
 あなたのお気に入りのニュースサイトの記事をひとつ選び、その中に現れる人物名を、 `Elements` タブの機能を用いて自分の名前に変えてみましょう。悪用厳禁です！
 
 ## デバッガ
 
 **デバッガ** は、プログラムのバグを探し、解決するために役立つソフトウェアです。ブラウザの開発者ツールには、通常 JavaScript のデバッガが搭載されています。
 
+:::info
+
+デバッガを使うために知っておくべきことは以下の 4 つです。
+
+- **ブレークポイント**  
+  設置した行でプログラムの実行が一時停止するもので、Google Chrome の開発者ツールでは Sources タブからファイルを開くと表示される行番号をクリックすると設置できます。
+
+- **ステップオーバーボタン** (<VscDebugStepOver style={{ verticalAlign: "middle" }} />)  
+  現在の行を実行し、次の行に進む操作です。現在止まっている行で関数が呼び出される場合は、その関数内の処理を全て実行して次の行で止まるものです。
+
+- **ステップインボタン** (<VscDebugStepInto style={{ verticalAlign: "middle" }} />)  
+  現在の行が関数呼び出しだった場合、実行が関数の中に移ります。処理の流れを 1 個ずつ確認できます。
+
+- **ステップアウトボタン** (<VscDebugStepOut style={{ verticalAlign: "middle" }} />)  
+  関数内で処理が止まっている場合、その関数内の残りの処理を全て実行し、関数を呼び出している行の次の行へ移動します。
+
+:::
+
 デバッガを用いることで、プログラムが実行される様子を細かく観測することができます。次のプログラムで試してみましょう。
 
 ```html title="index.html"
@@ -77,38 +100,37 @@ JavaScript の実行がブレークポイントを設定した地点に差し掛
 
 :::warning
 
-下の画像の中の、緑色の四角で表示されている部分は、**これから実行されようとしている行**を表します。つまり、5 行目のプログラムは、この時点ではまだ実行されていません。
+下の画像の中の、オレンジ色の線で強調されている部分は、**これから実行されようとしている行**を表します。つまり、5 行目のプログラムは、この時点ではまだ実行されていません。
 
 :::
 
 ![ブレークポイントの設置](./set-breakpoint.png)
 
-続いて、**ステップ オーバー**ボタンを押します。ステップ オーバーは、現在の行を実行し、次の行に進む操作です。これにより、緑色の四角が 6 行目に移ります。
+続いて、**ステップ オーバー**ボタンを押します。これにより、オレンジ色の線で強調された部分が 6 行目に移ります。
 
 ![ステップ オーバー](./step-over.png)
 
-この状態で、`resultElement` の部分にマウスカーソルを乗せてみましょう。`resultElement` 変数の中身が表示されます。変数の値がオブジェクトの場合は、その内部を見ることもできます。おなじみの `textContent` プロパティなども存在していることが分かりますね。
+この状態で、`resultElement` の部分にマウスカーソルを乗せてみましょう。`resultElement` 変数の中身が表示されます。変数の値がオブジェクトの場合は、その内部を見ることもできます。下にスクロールするとおなじみの `textContent` プロパティなども存在していることが分かりますね。
 
 ![オブジェクトの中身を見る](./inspect-object.png)
 
-次は、**ステップ イン**ボタンを押してみましょう。現在の行が関数呼び出しだった場合、実行が関数の中に移ります。
+今度はブレークポイントを 6 行目に設置してみましょう。ページを更新して、次は、**ステップ イン**ボタンを押してみましょう。実行が `add` 関数の中に移ります。
 
 ![ステップ イン](./step-in.png)
 
 右側のパネルの `Call Stack` (**コール スタック**) 部分を見てみてください。ここには、現在実行されている関数が、どの順番で実行されているのかが表示されています。この場合は、`script.js` というファイルの 6 行目から `add` 関数が呼び出されていることが分かります。
 
 ![コール スタック](./call-stack.png)
 
-最後に、**ステップ アウト**ボタンを押しましょう。このボタンを押すと、現在実行されている関数が最後まで実行され、呼び出し元の関数の実行に戻ります。
+次に、**ステップ アウト**ボタンを押しましょう。このボタンにより、現在実行されている関数が最後まで実行され、実行が `add` 関数の外に出て、7 行目の先頭で処理が止まっているのが分かると思います。
 
 ![ステップ アウト](./step-out.png)
 
 :::tip[`console.log` 関数]
 
-`console.log` 関数は、メッセージをブラウザの開発者ツールの `Console` に出力します。
-`console.log` 関数を使ってプログラムの実行中に値の変化を確認したり、問題が発生した時に原因を特定したりすることができます。
+`console.log` 関数は、メッセージをブラウザの開発者ツールの `Console` に出力します。`console.log` 関数を使ってプログラムの実行中に値の変化を確認したり、問題が発生した時に原因を特定したりすることができます。
 
-```javascript
+```javascript title="script.js"
 const x = 5;
 const y = 10;
 const sum = x + y;
@@ -117,7 +139,7 @@ console.log("x + y は、", sum);
 
 :::
 
-### 演習
+### 確認問題
 
 次のプログラムの 5 行目では、`add` 関数は 3 回実行されます。どのような順番で関数が呼び出されているか、デバッガを用いて確認してみてください。