Chrome DevTools で行った CSS の変更を永久に保存するにはどうすればよいですか?

Chrome デベロッパー ツールのスタイル パネルからの CSS 変更の永続化

問題の説明:

で行われた CSS の変更を保存できませんGoogle Chrome デベロッパー ツールの [スタイル] パネル (ドキュメントではリソースに表示されるべきであることが示唆されているにもかかわらず)

解決策:

Chrome では、ローカル フォルダーをワークスペースに追加する機能が提供されるようになりました。この機能を利用すると、Web リソースをローカル リソースにマップし、CSS の変更を開発者ツールから直接保存できます。

手順:

1. フォルダーを追加ワークスペース:

   • 開発者ツールの [ソース] パネルに移動します。
   • 左側のパネルを右クリックし、[フォルダーをワークスペースに追加] を選択します。
   • CSSを含むフォルダーを選択しますfile.

2. Grant Chrome Access:

   • フォルダーへのアクセス許可を求めるプロンプトが表示されます。
   • クロムを許可する

3. ネットワークをローカル リソースにマップします:

   • ページをリロードします。
   • [ソース] パネルで、対応するマップされたファイルを選択します。
   • ファイル名を右クリックします。 [ファイル システム リソースにマップ] を選択します。
   • ローカル ファイルに移動して選択します。

4. 変更を保存:

   • マップされた場所で CSS を変更します。ファイル。
   • CTRL S を押して変更を保存します。

追加メモ:

• ローカルのアプリケーションを開始するには、マップされたファイルを開いて編集する必要がある場合があります。
• 「スタイル」パネルが表示されない場合は、「要素」パネルの右上隅にある三点アイコンをクリックし、「スタイルを表示」を選択します。

以上がChrome DevTools で行った CSS の変更を永久に保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。