プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
Web制作のノウハウ

【デベロッパーツールの使い方】修正した内容を保存する方法

デベロッパーツールで修正した内容をそのまま保存する方法についてご紹介します。

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

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

という人向けの記事です。

 

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

まずは、流れを説明します。

  1. 編集したいファイルを選ぶ。
  2. 修正する。
  3. 保存する。

の流れです。

ひとつずつ説明します。

 

①ファイルを選びます

1.デベロッパーツールを開きます。

2.Sources」タブをクリックし、左側に出てくる「+Add folder to workspace」をクリックします。

 


 

3.「編集したいフォルダ」を選び、「選択」をクリックします。

 


 

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

と出たら。

5.許可」をクリックします。

6.左側に「フォルダ」が表示されるので、クリックして「編集したいファイル」をクリックします。

 

次に、コードを修正していきます。

 

②修正する

1.コードを修正していきます。

 

修正ができたら保存をします。

③保存する

1.左側に出ている「保存したいファイル」を右クリックし、「Save as…」をクリックします。

 

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

と表示されるので。

2.「置き換え」をクリックします。

あとは、ブラウザを更新すると反映されます!

記事を読んでくださりありがとうございました。 当ブログは「日曜エンジニアでもITに強くなれる!」をテーマにしたブログです。非IT企業の私ですが、Webが好きで「ITエンジニアと繋がりたい」という思いからブログをはじめました。この記事が参考になった、おもしろかったという方は、広告をクリックしていただけると励みになります。これからもよろしくお願い致します。