ChromeのDevtoolsでCSSとHTMLファイルを編集し、保存する方法を紹介します。

Devtoolsでソースコードを見ることができるのはよく知られていますが、ファイルの保存も可能です。

ブラウザで画面を見ながらコードを修正できるため、かつてのDreamweaverのような使い方ができるようになります。

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

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

Devtoolsで編集した内容は通常ならリロードすることで元に戻ってしまいます。

変更した内容を保存するには編集したいファイルをワークスペースに指定する必要があります。

ローカルファイルを準備

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

test-folder
  - index.html
  - style.css

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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