From 5ecd431b64307bd90782267421f2d3be66b6f6eb Mon Sep 17 00:00:00 2001 From: chelproc Date: Fri, 29 Apr 2022 12:44:56 +0000 Subject: [PATCH] =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=B9=E3=83=9A=E3=82=AF?= =?UTF-8?q?=E3=82=BF=E3=81=AB=E9=96=A2=E3=81=99=E3=82=8B=E8=A8=98=E4=BA=8B?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-inspector/call-stack.png | Bin 0 -> 16099 bytes .../01-inspector/index.md | 108 +++++++++++++++++- .../01-inspector/inspect-elements.mp4 | Bin 0 -> 3875947 bytes .../01-inspector/inspect-object.png | Bin 0 -> 174565 bytes .../01-inspector/open-file-in-debugger.png | Bin 0 -> 105342 bytes .../01-inspector/open-inspector.png | Bin 0 -> 441654 bytes .../01-inspector/set-breakpoint.png | Bin 0 -> 128991 bytes .../01-inspector/step-in.png | Bin 0 -> 129418 bytes .../01-inspector/step-out.png | Bin 0 -> 132550 bytes .../01-inspector/step-over.png | Bin 0 -> 133341 bytes docs/2-javascript-training/03-loop/index.md | 2 +- docs/2-javascript-training/04-class/index.md | 8 ++ 12 files changed, 111 insertions(+), 7 deletions(-) create mode 100644 docs/2-javascript-training/01-inspector/call-stack.png create mode 100644 docs/2-javascript-training/01-inspector/inspect-elements.mp4 create mode 100644 docs/2-javascript-training/01-inspector/inspect-object.png create mode 100644 docs/2-javascript-training/01-inspector/open-file-in-debugger.png create mode 100644 docs/2-javascript-training/01-inspector/open-inspector.png create mode 100644 docs/2-javascript-training/01-inspector/set-breakpoint.png create mode 100644 docs/2-javascript-training/01-inspector/step-in.png create mode 100644 docs/2-javascript-training/01-inspector/step-out.png create mode 100644 docs/2-javascript-training/01-inspector/step-over.png 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 0000000000000000000000000000000000000000..fc388790957b19f1e52accc6b524f84b5064b843 GIT binary patch literal 16099 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 literal 0 HcmV?d00001 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` キーを押すことにより起動できます。 + +![開発者ツールを起動した様子](open-inspector.png) + +## HTML や CSS の構造の確認 + +`Elements` タブを用いると、ウェブサイト上に現在表示されている HTML の構造や、各 HTML 要素に適用されている CSS の状態を確認したり、その場で値を書き換えて、表示が変化する様子を確認したりすることができます。 + +また、表示中の HTML 要素を右クリックして `検証` メニューをクリックするか、開発者ツールの中のインスペクトボタン () をクリックすることにより、要素を直接選択することができます。この方法を用いることで、HTML の木構造を根から辿る必要がなくなります。 + +