chromeデベロッパーツールでindex.htmlを編集することができません。

Question

chromeデベロッパーツールのSourcesパネル上でindex.htmlを編集することができません。
その他の読み込みファイル（cssファイルやjsファイル）は問題なく編集可能です。
↓この状態でコードの変更ができません。

改善方法お分かりになる方いらっしゃいますでしょうか。
お知恵お借していただけますと幸いです。
どうぞよろしくお願いいたします。

Answer 1

普通にダブルクリックして編集するだけですがそれでも変わらないということでしょうか？

Elementsでも編集できませんか？

Comments

[unagikabayaki]

アドバイスありがとうございます！Elementsでは編集可能です。
Sourcesパネル上ではhtmlは編集はできないものなのでしょうか。

[maisumakun]

なぜSourcesパネルから編集したいのでしょうか。

[azuapricot]

どうにか小細工を加えないとSourcesパネル上では編集できないかもしれませんね。

https://qiita.com/niusounds/items/3f09e14893e42698a132

[azuapricot]

確かになぜSourcesパネルから編集したいのか私もよくわかりませんねぇ、
Web開発していてElements以外から編集したいと思ったことはありませんし・・・

[m.ts10806]

Sourcesは基本見るだけのものだと思ってました。
JavaScriptによる動的なものも含めて現在の表示結果をElementsが出してくれてるのでそこをいじらないとデベロッパーツールの意味がないですよね。

[unagikabayaki]

そのファイルは編集可能でしたのでhtmlも編集可能かと思い
質問させていただきました。Elementsで編集するようにします。
ありがとうございました。

Answer 2

ローカルのHTMLファイルを編集するために、
デベロッパーツールをエディタとして使用したいということでしょうか？
編集したいHTMLファイルを含むフォルダをデベロッパーツール上にドラッグ＆ドロップし、
表示される確認メッセージでフルリクエストを許可してください。

次回以降は上記操作をしなくても編集して保存できるようになります。

参考：
ChromeでHTMLを編集しよう！
上記リンクは少し古いので、5.以降の手順は恐らく不要です

Answer 3

ダブルクリックをして、青いバックグラウンドカラーが出た後、文字を削除して要素、文字の変更ができます