Skip to content

Commit 3d0a89d

Browse files
chelprocchelproc
authored
Merge pull request #9 from ut-code/add-inspector
インスペクタに関する記事を追加
2 parents fe08dfc + 5ecd431 commit 3d0a89d

File tree

12 files changed

+111
-7
lines changed

12 files changed

+111
-7
lines changed

‎docs/2-javascript-training/01-inspector/call-stack.png‎

15.7 KB
Loading

‎docs/2-javascript-training/01-inspector/index.md‎

Lines changed: 102 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,110 @@ title: ブラウザの開発者ツール
55
import CodeBlock from '@theme/CodeBlock';
66
import Term from "@site/src/components/Term";
77
import OpenInCodeSandbox from "@site/src/components/OpenInCodeSandbox";
8+
import inspectElementsVideo from "./inspect-elements.mp4";
9+
import { GrSelect } from "react-icons/gr";
810

9-
## ブラウザの開発者ツールを利用する
11+
## 開発者ツールを起動する
1012

11-
- 開発者ツールの起動方法
12-
- HTML や CSS の確認・編集方法
13+
Google Chrome などのブラウザに搭載されている**開発者ツール**には、ウェブ開発をサポートする様々な機能が提供されています。
14+
15+
:::info Google Chrome 以外の開発者ツール
16+
Google Chrome 以外のブラウザにも開発者ツールは搭載されています。ほとんど同等の機能が提供されているので、基本的にはどれを使っても構いません。しかしながら、Google Chrome のものが最も多く使用されており、本カリキュラムでも基本的には Google Chrome を用いるものとします。
17+
:::
18+
19+
開発者ツールは、`Cmd (Ctrl) + Opt (Shift) + I` キー、もしくは `F12` キーを押すことにより起動できます。
20+
21+
![開発者ツールを起動した様子](open-inspector.png)
22+
23+
## HTML や CSS の構造の確認
24+
25+
`Elements` タブを用いると、ウェブサイト上に現在表示されている HTML の構造や、各 HTML 要素に適用されている CSS の状態を確認したり、その場で値を書き換えて、表示が変化する様子を確認したりすることができます。
26+
27+
また、表示中の HTML 要素を右クリックして `検証` メニューをクリックするか、開発者ツールの中のインスペクトボタン (<GrSelect style={{ verticalAlign: "middle" }} />) をクリックすることにより、要素を直接選択することができます。この方法を用いることで、HTML の木構造を根から辿る必要がなくなります。
28+
29+
<video src={inspectElementsVideo} muted autoPlay loop controls />
30+
31+
### 課題
32+
33+
あなたのお気に入りのニュースサイトの記事をひとつ選び、その中に現れる人物名を、 `Elements` タブの機能を用いて自分の名前に変えてみましょう。悪用厳禁です！
1334

1435
## デバッガ
1536

16-
- ブレークポイント
17-
- ステップ実行 (ステップイン・アウト・オーバー)
18-
- コールスタック
37+
**デバッガ** は、プログラムのバグを探し、解決するために役立つソフトウェアです。ブラウザの開発者ツールには、通常 JavaScript のデバッガが搭載されています。
38+
39+
デバッガを用いることで、プログラムが実行される様子を細かく観測することができます。次のプログラムで試してみましょう。
40+
41+
```html title="index.html"
42+
<!DOCTYPE html>
43+
<html lang="ja">
44+
<head>
45+
<meta charset="utf-8" />
46+
<title>Title</title>
47+
</head>
48+
<body>
49+
<div id="result"></div>
50+
<script src="./script.js"></script>
51+
</body>
52+
</html>
53+
```
54+
55+
```javascript title=script.js
56+
function add(a, b) {
57+
return a + b;
58+
}
59+
60+
let resultElement = document.getElementById("result");
61+
let sum = add(3, 4);
62+
resultElement.textContent = sum;
63+
```
64+
65+
JavaScript のデバッガは主に `Sources` タブから用います。まずはこのタブを開き、サイドパネルに表示された `script.js` を開きましょう。
66+
67+
![デバッガでファイルを開く](./open-file-in-debugger.png)
68+
69+
続いて、5行目の行番号が表示されている部分をクリックして**ブレークポイント**を設置します。この状態でブラウザを更新してみてください。
70+
71+
JavaScript の実行がブレークポイントを設定した地点に差し掛かると、プログラムの実行がデバッガにより一時停止されます。
72+
73+
:::info
74+
上記のプログラムにおいて、ページの読み込みの完了時にはすでに JavaScript の実行が終わっています。このため、ブレークポイントを設置した行のプログラムは、ページを更新するまで再度実行されません。
75+
:::
76+
77+
:::caution
78+
上の画像の中の、緑色の四角で表示されている部分は、**これから実行されようとしている行**を表します。つまり、5行目のプログラムは、この時点ではまだ実行されていません。
79+
:::
80+
81+
![ブレークポイントの設置](./set-breakpoint.png)
82+
83+
続いて、**ステップ オーバー**ボタンを押します。ステップ オーバーは、現在の行を実行し、次の行に進む操作です。これにより、緑色の四角が6行目に移ります。
84+
85+
![ステップ オーバー](./step-over.png)
86+
87+
この状態で、`resultElement` の部分にマウスカーソルを乗せてみましょう。`resultElement` 変数の中身が表示されます。変数の値がオブジェクトの場合は、その内部を見ることもできます。おなじみの `textContent` プロパティなども存在していることが分かりますね。
88+
89+
![オブジェクトの中身を見る](./inspect-object.png)
90+
91+
次は、**ステップ イン**ボタンを押してみましょう。現在の行が関数呼び出しだった場合、実行が関数の中に移ります。
92+
93+
![ステップ イン](./step-in.png)
94+
95+
右側のパネルの `Call Stack` (**コール スタック**) 部分を見てみてください。ここには、現在実行されている関数が、どの順番で実行されているのかが表示されています。この場合は、`script.js` というファイルの 6 行目から `add` 関数が呼び出されていることが分かります。
96+
97+
![コール スタック](./call-stack.png)
98+
99+
最後に、**ステップ アウト**ボタンを押しましょう。このボタンを押すと、現在実行されている関数が最後まで実行され、呼び出し元の関数の実行に戻ります。
100+
101+
![ステップ アウト](./step-out.png)
102+
103+
### 課題
104+
105+
次のプログラムの 4 行目では、`add` 関数は 3 回実行されます。どのような順番で関数が呼び出されているか、デバッガを用いて確認してみてください。
106+
107+
```javascript title=script.js
108+
function add(a, b) {
109+
return a + b;
110+
}
111+
112+
let result = add(add(1, 2), add(3, 4));
113+
document.write(result);
114+
```

‎docs/2-javascript-training/01-inspector/inspect-elements.mp4‎

3.7 MB
Binary file not shown.

‎docs/2-javascript-training/01-inspector/inspect-object.png‎

170 KB
Loading

‎docs/2-javascript-training/01-inspector/open-file-in-debugger.png‎

103 KB
Loading

‎docs/2-javascript-training/01-inspector/open-inspector.png‎

431 KB
Loading

‎docs/2-javascript-training/01-inspector/set-breakpoint.png‎

126 KB
Loading

‎docs/2-javascript-training/01-inspector/step-in.png‎

126 KB
Loading

‎docs/2-javascript-training/01-inspector/step-out.png‎

129 KB
Loading

‎docs/2-javascript-training/01-inspector/step-over.png‎

130 KB
Loading

0 commit comments

Comments
 (0)