Web開発者ツールの拡張機能を使いこなすその1

# 概要
ChromeやEdgeでF12を押すと使える開発者ツールを使いこなすための手順。
Web開発とかして、javascriptとかみたりする時に活用できたりするので見てみよう。

# Elementsタブ
一番左に出てくるところ。選択するとhtmlやcssで作っている箇所を確認できる。

![スクリーンショット 2024-07-16 16.23.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/d8feccbe-885a-efd5-2417-b83ac2580dd6.png)

また、ここの部分から文章などをダブルクリックして直に編集する事も可能。
ただしこの場合、表示させているhtmlを変えているだけなので、**リロードすると元に戻る。**
これは、プレビューして確認するために調整するための機能。

![スクリーンショット 2024-07-16 16.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/79b16105-2a9c-ebcf-e955-9a5bb35cd2be.png)

## Styleタブ
左上の矢印のようなものを選択すると、Webページをホバーしたときに
要素を色付けして確認することができる。

![スクリーンショット 2024-07-16 16.28.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/7795eee9-51c9-dfa1-750d-6bdb1e16b636.png)

![スクリーンショット 2024-07-16 16.28.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/d7ea4181-1ae8-c3d6-8078-90a2cec33a93.png)

要素をクリックすると、Styleの部分も移動する。
ここの中のチェックを外したり、色やサイズなどを変更する事でプレビューする事ができる。
![スクリーンショット 2024-07-16 16.39.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/a160a80a-29b4-40a1-58a0-d5c33f3c3184.png)

ちなみに、どのファイルにその記載が存在するかも確認できる。以下のスクショだとtext_defaults_md.cssの20行目である。

![スクリーンショット 2024-07-16 16.37.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/33c494f7-e518-15a5-ce26-bb65a8cf5c03.png)

また、上部にある`element.style `は、インラインで編集するためのもの。

## Computed

選択した箇所のマージンやpaddingなど、ボックスの大きさを表示することができる。
ここの部分はあくまで確認ようであり、編集するには下部にあるfiler部分からstyle等に移動すること。
![スクリーンショット 2024-07-16 16.42.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/e953d749-e3db-bb56-48b3-cc1d729904c2.png)

## Layout
チェックすると、グリッドなどを表示して出す事ができる。

## Event Listeners

アプリなどを作って、クリックした時のイベントなどが実行できるかどうかを確認できる。
removeを押すと、そこに紐づいているイベントを削除することができる。

![スクリーンショット 2024-07-16 16.49.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/380b3a83-cd59-6da9-b056-b0efaeeaf14a.png)

## DomBreakpoints
変更が加わったか否かにチェックをするための機能。
elementsのタブから、`Breakon / Attribute modification`をしたあと、javascriptなどを追加してみた時に、変化が起こった時に停止させる事ができる。

# コンソール

あらかじめ、VScodeなどで、apiを実行するようなscriptを作成する。
それの実行結果が`console`画面に映るらしい。
実行結果は右クリックして`Copy Property path`を実行してあげれば、特定の要素だけ取得する事ができる。
要素の配列名の中身を確認する時に、Consoleから見るときに確認できる。どこにどのデータがあるのかを確認することができる。

## エラー
もしjavascriptなどのコードにエラーがある場合は、コンソールのタブから直接飛んで何行目にエラーがあるか確認することが可能。
もし該当の場所のエラーでなくても、そのエラーに関連した場所にあることはたしか。このコンソールの欄に何もでなければクリーンな問題になる。ライブラリのエラーの場合は追う事が難しいので、でた場合はそのままコピーしてしまう。

## Javascriptを実行する
以下のような形で、そのままjavascriptを実行できる。

![スクリーンショット 2024-07-16 17.33.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/db5b8d76-e7d3-4af4-d18b-80fea84470f3.png)

また、for文を入れ込む事も可能

![スクリーンショット 2024-07-16 17.36.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/67296069-7a84-55be-5461-ca2b61229281.png)

![スクリーンショット 2024-07-16 17.36.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/e78827ce-4bf2-aa3e-c904-c32ca8198069.png)


# 余談
以下の拡張機能を入れると、Webサイトでどのようなツールを使用しているか、細かく理解する事ができる。

https://www.wappalyzer.com/



![スクリーンショット 2024-07-16 12.53.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/dec103dc-97b3-e6d3-9241-06e71086e5fd.png)

## 参考サイト

https://www.youtube.com/watch?v=PjZyPfXdJFA