更新日: 2022 / 07 / 02

Devtoolsで編集したHTMLやCSSを保存できるようにする方法

カテゴリー: coding

Chromeのデベロッパーツール(Devtools)でHTMLやCSSファイルを編集し、保存する方法を紹介します。

Devtoolsは開発者ツールとも呼ばれておりソースコードを見ることができるのはよく知られていますが、ファイルの編集内容を保存することも可能です。

ブラウザで画面を見ながらコードを修正できるため、拡張機能を使うことなくコードエディターのような使い方ができるようになります。

ChromeのDevtoolsでファイルを編集できるようにする方法

Devtoolsで編集した内容を保存する方法

Devtoolsで編集した内容は通常ならリロードすることで元に戻ってしまいます。変更した内容を保存するには編集したいファイルをワークスペースに指定する必要があります。

以下の手順でワークスペースの設定を行います。

  1. ローカルファイルを準備
  2. Devtoolsのワークスペースを設定

1.ローカルファイルを準備

すでに編集したいファイルがあるならそれを使用します。ここでは次のような構造でフォルダ内にHTMLファイルとCSSファイルを用意しました。

test-folder
  - index.html
  - style.css

ファイルの準備ができたら、index.htmlをChromeで開いてページを表示しておきます。

2.Devtoolsのワークスペースを設定

ファイルに編集内容を保存できるようにするには、ワークスペースの設定が必要です。

まずはDevtoolsを開き(ページ内を右クリックして「検証」をクリック)、Sourcesタブを開きます。

Devtoolsのワークスペースを設定1

左側にある「Filesystems」タブを選択し、「Add folder to workplace」をクリックして編集したいファイルが入っているフォルダを選択します。

フォルダを選択すると警告が出るので「許可」をクリックしてChromeがファイルにアクセスできるようにしておきましょう。

Devtoolsのワークスペースを設定2

ここまでできれば準備完了です。

Devtoolsで編集したHTMLやCSSの内容を保存する方法

デベロッパーツールで編集する準備ができたらあとはファイルの内容を編集していくだけです。

編集方法は次の2通りあります。

  • Elementsタブで画面を見ながら直接編集
  • Sourcesタブで編集内容を保存してから画面をチェック

1つめの方法はCSSスタイルを編集する場合のみ有効で、2つめはCSSでもHTMLでも可能です。以下でそれぞれの編集方法を解説します。

Devtoolsを使ったCSSスタイルの編集と保存

CSSの場合は「Elements」パネルの「Style」タブで編集します。

CSSスタイルのコードを編集すると、保存ボタンなどを押さなくてもファイルが更新されます。

Devtoolsを使ったCSSスタイルの編集と保存方法1

また、CSSについては外部ファイルだけでなく、headなどHTMLファイルの内部に記述したCSSコードも同様に編集と保存ができます。

Devtoolsを使ったCSSスタイルの編集と保存方法2

Devtoolsを使ったHTMLコードの編集と保存

HTMLは「Sources」パネルで編集できます。編集した後は右クリックから「Save As」もしくはCtrl+S(Cmd+S)で保存した後、ページをリロードすると編集内容が表示されます。

HTMLコードの編集と保存方法1

この方法はHTMLだけでなくCSSファイルでも可能です。

Sourcesタブで変更箇所を素早く見つけるには文字列の検索(ファイル内にカーソルがある状態で、Ctrl+F Macは Cmd+F)を行うといいでしょう。

HTMLコードの編集と保存方法2

まとめ

Devtoolsで保存できるのはローカルファイルのCSSやHTMLコードなので、Wordpressのようなサーバーサイドのファイルは編集できません。

ただ、Wordpressでもローカル環境のCSSファイルを編集できるため画面を見ながらスタイル修正が可能。

他にもDevtoolsでレスポンシブデザインの確認もできるのでWebデザイナーなら絶対使いこなしたいツールです。

関連記事: Devtoolsの基本的な使い方と絶対覚えておきたい便利な機能まとめ