HTML/CSS

デベロッパーツールの使い方【修正を保存】

【デベロッパーツールの使い方メモ】

・コードを書き換えても、更新すると元に戻ってしまう。

・書き換えたコードを、そのまま保存したい。

ってことでやり方を調べました。

 

デベロッパーツールで修正したコードを保存する方法

流れとしては、

  1. ファイルを選ぶ
  2. 修正する
  3. 保存する

の流れ。

 

①ファイルを選ぶ

1.デベロッパーツールを開く。

2.Sourcesタブをクリック。

3.左側「Add folder to workspace」をクリック。

 


 

4.「編集したいフォルダ」を選ぶ。

5.選択をクリック。

 


 

「デベロッパーツールでは・・・へのフルアクセルがリクエストされます。機密情報の漏えいにご注意ください」

と出たら。

 

6.許可」をクリック。

7.左側から「編集したいファイル」を選ぶ。

 

 

②修正する

1.コードを任意で修正する。

 

 

③保存する

1.左側「変更したいファイル」を選んで、右クリック

2.「Save as…」をクリック。

 

「index.htmlはすでに存在しています。置き換えてもよろしいですか?」

 

3.「置き換え」をクリック。

ブラウザを更新すれば、変更が反映される。