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.「置き換え」をクリック。

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