Chrome DevToolsでページの要素を調べる方法

← 補助教材へ戻る

このページは、NoaRecord / another-world.site のChatlet教材第2回・第3回から参照する共通ヘルプページとして使う。第2回ではChatGPTの入力欄と送信ボタン、第3回では会話ターン要素を確認するときに参照する。

冒頭文

Bookmarkletは、Webページの中にあるHTML要素を探して動きます。たとえばChatlet講座では、ChatGPTの入力欄、送信ボタン、会話の1ターンごとのブロックを探します。

Chrome DevToolsを使うと、今見ているページがどんなHTMLで作られているかを確認できます。コードをすべて暗記するためではなく、「Bookmarkletが何を探しているのか」を見るための道具として使います。実務上は、ページのどこが1つの発言単位か、入力の前後でDOMがどう変わるか、送信ボタンが有効になる条件が何か、といった点を見分けるために使うことが多い。

DevToolsを開く

調べたいページをPC版Chromeで開く。
ページ上の調べたい場所の近くで右クリックする。
メニューから「検証」を選ぶ。
画面の横または下にDevToolsが開く。

ショートカット:

Windows: F12 または Ctrl + Shift + I　※ページや環境によっては、これらのキーが他の機能に割り当てられている場合もあります。
Mac: Cmd + Option + I　※ページや環境によっては、これらのキーが他の機能に割り当てられている場合もあります。

初心者向けの記事では、まず右クリックから「検証」を選ぶ方法をおすすめする。ショートカットは、慣れてきた人向けの補足として扱う。

要素選択ツールを使う

DevToolsを開いたら、ページ上の特定の場所とHTMLを対応させて見る。

DevTools左上の矢印アイコンをクリックする。
ページ上の調べたい場所へマウスを移動する。
入力欄、送信ボタン、会話ブロックなどをクリックする。
DevToolsのElementsパネルで、対応するHTMLが選択される。

第2回で見る場所

第2回では、ChatGPTへ文字を送るBookmarkletを読みます。そこで確認したいのは、主に次の2つです。

入力欄
送信ボタン

入力欄の目印

ChatGPTの入力欄は、普通の textarea ではなく、編集可能な div として作られていることがあります。その場合、HTMLには次のような目印が見えます。

contenteditable="true"

contenteditable は、その要素の中身をユーザーが編集できることを示します。 Bookmarkletでは、この目印を使って入力欄を探す場合があります。また、入力欄は「何も入力していない状態」と「1文字でも入った状態」で中のHTMLが変わることがある。実務では、空の状態だけを見て終わらず、実際に文字を入れた直後のDOMも確認すると役に立つ。

送信ボタンの目印

送信ボタンには、次のような属性が付いていることがあります。

data-testid="send-button"

data-testid は、開発やテストのために要素を見分けやすくする目印です。 Bookmarkletでは、ボタンを探す手がかりとして使える場合があります。ただし、サイト側の更新で変わる可能性があります。

送信ボタンが押せない状態のときは、次のような属性が付くこともあります。

disabled

disabled は、今はそのボタンを押せないという意味です。 ChatGPTでは、入力欄が空のときに送信ボタンが無効になることがあります。そのため、入力前と入力後で disabled の有無がどう変わるかを見ると、送信処理の理解が進みやすい。

第3回で見る場所

第3回では、長くなった会話を最新10ターンだけ表示するBookmarkletを扱います。そこで確認したいのは、会話の1ターンごとのHTMLです。

ChatGPTの会話ターンには、次のような目印が付いていることがあります。

data-testid="conversation-turn-..."

教材では、次のようなCSSセレクタを使います。

article[data-testid^="conversation-turn-"]
section[data-testid^="conversation-turn-"]

^= は、「この文字列で始まる」という意味です。 conversation-turn-1 や conversation-turn-20 のように番号が違っても、まとめて対象にできます。ここで大事なのは、「どこまでが1つの発言単位か」を画面から推測することではなく、実際に要素を選んで、どの属性が付いているかを確認することである。会話が長いときは、古い発言と新しい発言をいくつか見比べ、番号の増え方も確認すると理解しやすい。

注意点

DevToolsはページの中身を観察するための道具です。
見えているHTMLは、サイト側の更新で変わることがあります。
教材内のセレクタが動かなくなった場合は、DevToolsで現在の要素を確認します。
Network、Application、StorageなどのタブにはCookieやトークンが見える場合があります。
初心者向けの記事では、必要がない限りElementsパネルだけを使う流れにします。
公開用スクリーンショットでは、個人情報、会話内容、認証情報が映らないようにします。

冒頭文