Chromeのデベロッパーツールのエラーを解決したい

Question

Chromeのデベロッパーツールのエラーを解決したい

WordPressでテンプレートを一から制作していく中で、
Chromeのデベロッパーツールを使いながらCSSの編集を行いたいと考えております。

しかし、以下のgif画像のようにCSSを編集しようと改行や文字を入力すると
灰色の画面に切り替わってしまい、困っています。

Web上で同様のエラーに困っている投稿や解決方法の投稿を見つけることができなかったため、こちらで質問させていただきました。

試したこと

スーパーリロードやfunction.phpの再編集（もともとfunction.phpからCSSファイルを読み込んでいたので、
直接headタグ内からCSSを読み込むように記述を変更したりなど）を行いましたが、上手く解決することができませんでした。

補足情報（FW/ツールのバージョンなど）

・WordPress 5.5.1
・オリジナルテーマ
・Chromeバージョン: 86.0.4240.75（Official Build） （64 ビット）

よろしくお願いいたします。

Comments

[kuma_kuma_]

[DevTools ワークスペースによる永続化の設定](https://developers.google.com/web/tools/setup/setup-workflow?hl=ja)
一度永続化された後、対象ファイルを移動等しませんでしたか？

[teratora]

ご回答いただきありがとうございます。
ワークスペースによる永続化の設定に関する知識はいただいた回答で初めて知ったため、
私自身が意識的に設定した記憶はございませんが、CSSファイルの移動は行いました。

具体的には、

【変更前】
example_template
∟css
∟style.css
∟index.php
∟header.php
∟footer.php
∟function.php
∟page.php
∟single.php

【変更後】
example_template
∟style.css
∟index.php
∟header.php
∟footer.php
∟function.php
∟page.php
∟single.php

といった感じで、「css」フォルダからindex.phpなどと同階層へと移動させました。

[kuma_kuma_]

元のファイルはバックアップとして保存されている事を一度確認。
(一応再度バックアップを取ってください。)
その後先のURL「ファイルの削除」の手順でCSSファイルを削除してみて下さい。

[teratora]

先ほどご教示いただいた内容の通りCSSファイルを削除・再アップロードし、
さらにデベロッパーツールを用いた『キャッシュの消去とハード再読み込み』を試してみたところ、
無事に解決することができました。

私一人での力では何時間もかけても解決することができませんでしたので、
解決できたのはkuma_kuma_様に丁寧に教えていただいたおかげです。

本当にありがとうございました。

[kuma_kuma_]

できれば解決方法を回答に書いておいてもらえますか？

[teratora]

先ほど自己解決の欄に解決方法の詳細を記載させていただきました。

Answer 1

自己解決ではありませんが、上記の質問内容に追加して、私が行ったことを追記しておきます。

【問題解決のために行ったこと】
1．CSSファイルの削除および再アップロード
2．キャッシュの消去とハード再読み込み

1に関しては、上記でいただいた回答の通りです。

2に関しては、こちらのページ（https://forest.watch.impress.co.jp/docs/serial/chrometips/1152903.html）で紹介されている"キャッシュの消去とハード再読み込み"を行いました。
デベロッパーツールを開いた状態で、画面左上の更新ボタンを右クリックすると「通常の再読み込み」「ハード再読み込み」「キャッシュの消去とハード再読み込み」が表示されますので、「キャッシュの消去とハード再読み込み」をクリックすると同様の結果を得られるかと思います。

詳しくはリンク先に画像付きで解説されていますので、そちらをご覧ください。