Chrome開発者ツール超入門!HTMLの編集方法

Chrome

Chrome開発者ツールでHTMLを書き換える方法を紹介します。

HTMLのデバッグは、HTMLファイルを書き替えて保存して更新押して・・・なんて効率の悪い方法ではなくて開発者ツールを使ってリアルタイムに編集してしまいましょう!

[スポンサーリンク]

このページでやること

Chrome開発者ツールでHTMLを書き換える方法を紹介します。

練習用ページ

今回は練習用ページを用意しました。
こちらのページを使ってChrome開発者ツールの使い方を解説していきます。

Chrome開発者ツールでHTML書き換え

まずは練習用ページを開きます。

chrome-css-update1

F12を押して開発者ツールを開きます。
画面左部分はHTMLコードが表示されて、右部分はCSSが表示されています。

chrome-css-update2

ルーペアイコンを選択します。

chrome-css-update3

今回はトップのタイトルを変更するので、ルーペを選択後トップのタイトルをクリックして下さい。

chrome-css-update4

タイトル部分のHTMLを選択して右クリックしてEdit as HTMLをクリックします。

chrome-html-update1

そうするとこのようにHTMLが変更できるようになります。

chrome-html-update2

以下のようにタイトルをh1タグを使うように変更します。ついでにメッセージも変更しましょう。

chrome-html-update3

書き換えたあと、適当なところをクリックすると画面のタイトル部分が変わっているのが確認できると思います。

chrome-html-update4

さいごに

HTML以外にもJSやCSSも書き換えることができます。
JSやCSSの書き換え方はコチラからどうぞ。
Chrome開発者ツール超入門!JavaScriptの変数の編集方法
Chrome開発者ツール超入門!CSSの書き換え方法

フロントエンドのエンジニアには馴染みのあるツールですが、バックエンド側のエンジニアには少し馴染みがないようにも思えます。
Web系エンジニアであれば、開発者ツールはガンガン使いこなしましょう!
それでは!