Chromeの開発者ツールでHTMLを一時的に書き換える方法

Chromeの開発者ツールでHTMLを一時的に書き換える

Chromeの開発者ツール（Chrome DevTools）を使うと、WebページのHTMLやCSSをブラウザ上で一時的に書き換えられます。

この機能は、Webサイトを実際に変更するものではありません。ページの表示を確認したり、修正前に見た目を試したり、変更箇所を特定したりするために使います。

Chrome公式の説明はChrome DevToolsでDOMを表示・変更する方法でも確認できます。

開発者ツールを開く

Chromeで対象のページを開き、次のいずれかの方法で開発者ツールを表示します。

• Windows：F12キー、またはCtrl＋Shift＋I
• Mac：Command＋Option＋I
• ページ上で右クリックして「検証」または「Inspect」

Elementsで要素を選択する

開発者ツールのElementsパネルには、表示中のページのHTML（DOM）が表示されます。

左上の要素選択ボタンをクリックしてからページ上の要素を選択すると、対応するHTML要素がElementsパネルで選択されます。

例えば、ページ上のリンクや見出しを選択すると、その要素のHTMLや適用されているCSSを確認できます。

Edit as HTMLでHTMLを書き換える

HTMLの構造や要素の内容を変更する場合は、Elementsパネルで対象の要素を右クリックし、「Edit as HTML（HTMLとして編集）」を選択します。

編集欄にHTMLを入力し、Command＋Enter（Mac）またはCtrl＋Enter（Windows）を押すと変更が反映されます。

今回は、リンクの表示文字を変更してみます。

変更前：書籍「心に触れるホームページをつくる」のご案内

変更後：!!書籍「心に触れるホームページをつくる」のご案内!!

ブラウザ上の表示が変更されました。

StylesでCSSを変更する

文字色、背景色、余白、文字サイズなどを試したい場合は、ElementsパネルのStylesでCSSを変更します。

Stylesに表示されているCSSの値をクリックして変更すると、ページの見た目にすぐ反映されます。新しいプロパティを追加して、表示結果を比較することもできます。

再読み込みすると変更は元に戻る

ElementsでHTMLを変更したり、StylesでCSSを変更したりしても、通常はブラウザ上の表示が変わるだけです。ページを再読み込みすると、変更前の状態に戻ります。

HTMLファイル、CSSファイル、WordPressの記事、サーバー上のデータベースが書き換わるわけではありません。

ただし、Chrome DevToolsのLocal OverridesやWorkspacesを設定して、ローカルファイルへの変更を保存している場合は別です。その場合でも、保存されるのは設定したローカル環境のファイルであり、サーバー上のWebサイトが自動的に変更されるわけではありません。

開発者ツールの編集と改ざんの違い

開発者ツールで行う編集は、基本的に自分のブラウザで表示を一時的に変更するものです。Webサイトのサーバーに保存されたデータや、他の人が見るページを変更することはできません。

一方、変更後の画面をスクリーンショットに撮り、実際には書かれていない内容がページに書かれていたように見せることはできます。画面だけでは判断せず、元のWebサイトを直接開いて確認することが大切です。

改ざん対策はサーバー側で行う

ブラウザ上のHTMLやJavaScriptは、利用者が変更できる前提で扱う必要があります。

• ログイン状態や権限をサーバー側で確認する
• 入力値をサーバー側で検証する
• 価格、数量、ポイントなどの重要な値をブラウザからの値だけで判断しない
• データベースへの書き込みをサーバー側で制御する

見た目を変更できないようにすることよりも、ブラウザから送られた値をサーバー側で信頼しすぎないことが重要です。

まとめ

• Elementsでページ上のHTML要素を選択できる
• Edit as HTMLでHTMLを一時的に編集できる
• StylesでCSSの変更結果を確認できる
• 通常は再読み込みすると変更前に戻る
• サーバー上のデータを守るにはサーバー側の検証が必要