デベロッパーツールで変更したHTMLやCSSを保存する方法！

みなさんはChromeのデベロッパーツールで要素を検証して、その要素のスタイルを編集してリアルタイムでシミュレーションするというやり方を使っていますか？

例えばmarginやpaddingなどの隙間の調整はCSSファイルを更新してブラウザを開いて、イメージと違えばもう一度CSSファイルを更新してブラウザを開いて...とこの作業を繰り返す必要があります。

しかしデベロッパーツールでスタイルのシミュレーションを行えば、この手間がなくなりシミュレーションした結果一番相応しい値を最後にCSSファイルに書けばOKで、このやり方の方が効率的です。

さて、デベロッパーツールでシミュレートした結果と同じ値を手元のHTMLやCSSファイルに書き込めばシミュレーション結果と同じになりますが、時に変更箇所が多くどうせなら「シミュレーション結果のファイルを保存したい」と思うことがあります。

今回はデベロッパーツールでシミュレーションした結果のファイルを保存する方法を紹介します。

まずはシミュレーション結果のHTMLやCSSファイルを保存したいフォルダを一つ作成しておきましょう。デスクトップでもダウンロードフォルダでもどこでも結構です。

次に、Chromeでシミュレーションさせたいページを開いた状態でデベロッパーツールを開き、Sourcesタブを開きます。

以上でデベロッパーツールでシミュレーションした結果のファイルを保存することが出来ます。