1. element

開発者ツールとは?

HTML、CSS JavaScriptなどの言語はサーバコンパイルから実行されるのではなく、ブラウザで実行されます.ブラウザでは、実行時に解釈と実行が行われます.したがって、ブラウザはChrome開発者ツールと同様のツールを使用して、その解釈能力を検証します.

機能

HTTP通信プロセス、HTML構造、CSSスタイル、JavaScriptデバッグ、プロファイル、パフォーマンス診断などを行うことができます.

[要素](Elements)パネル

ページとスタイルのチェックと編集

要素ラベルにhtmlとcssが表示されます.

img urlを取得できます.

サイトが複雑で、目的を見つけるのが難しい場合は、「要素」タブでその部分を押して、目的の場所を見るとhtmlの位置が表示されます.
せいけい
css部分で直接変更することもできます.

赤の部分では、セレクタでスナップした要素に加えて、個別に適用することもできます.
スタイルセクションでの順序
Cはロールプレイングの略で、「上から下へのスタイルシート」という意味で、一定の優先順位があります.htmlに適用されるcssも優先度によって決定される.
!important > inline > #id > :hover > tag
こんなに重要です.開発者ツールでstyleからcss属性が削除された場合、その属性は優先度を失います.
elementsでは、cssファイルの入力順序ではなく、ブラウザが読み込む順序です.
user agentスタイルシートとは、各Webブラウザにおけるタグの基本プロパティを指します.例えば、h 1タグ

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

この基本プロパティがあります.変更することもできますが、プロパティが指定されていない場合は、ブラウザにデフォルトでタグの値が与えられます.

2. Console

エラーメッセージの表示範囲はdefaultレベルで調整できます.

3. Network

apiをインポートできます.フィルタでメディアを行い、ビデオでもいいです.

4. Application panel

Local Storage & Session Storage
Storageはブラウザのリポジトリです.ローカルストレージユーザーが消去しない限り、永続的に保持されるデータ.キベル類として保存します.セッションストレージは、タブを閉じるときに削除されます.Cookieは期限のある製品ですバックエンド通信に関連しています.

例

Local Storage

継続的に必要なデータ(データ持続性)(ex.自動ログインの有無)

UI情報(ex.airby and be,Skyscanner仁川空港-ベネチア検索は変わらない)

Session Storage

必要な情報

ex.セキュリティ重要情報(ex.銀行サイト)、特定ユーザ情報、言語選択

Cookie

非サービスダイレクトデータ

今日のイベントポップアップメニューのみ、サービスの説明を受け入れるかどうかなどです.

ソースコード上のセッション
ソース:https://freezboi.tistory.com/66[エンコーディングワークステーション]
https://velog.io/@misun9283/%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC
https://ljtaek2.tistory.com/m/75
https://velog.io/@hyoniii_log/TIL-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC