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

Chrome DevTools スタイル パネル経由で行われた CSS 変更の保存

Google Chrome デベロッパー ツールのスタイル パネルを使用してローカル CSS ファイルを操作する場合、ユーザーは変更がリソース パネルに反映されないという問題が発生する可能性があります。この記事では、この問題の解決策を説明します。

CSS の変更をローカルに保存するために、Chrome ではローカル フォルダーをワークスペースに統合できます。ステップバイステップのガイドは次のとおりです:

1. ワークスペースにフォルダーを追加: DevTools の [ソース] パネルで、左側のパネルを右クリックし、[フォルダーをワークスペースに追加] を選択します。 ."
2. Chrome 権限を許可: Chrome にアクセスを許可します。追加されたフォルダー。
3. リソースのマップ: ネットワーク タブに移動し、CSS ファイル パスを右クリックして、[ローカルにマップ] を選択します。

1 回リソースをマッピングすると、Chrome はページのリロード時に、マッピングされたファイルのローカル バージョンの読み込みを優先します。標準の Ctrl S ショートカットを押して変更を保存できるようになりました。

追加の保存オプション:

柔軟性を高めるには、拡張機能またはツールを使用して、CSS の変更を保存することを検討してください。 Chrome DevTools:

• LiveReload: を検出しますCSS が変更され、ブラウザ ウィンドウが自動的に再ロードされます。
• CSS Reloader: アクティブな変更のオンとオフを切り替えるオプションなど、変更を保存するための使いやすいインターフェイスを提供します。
• Reload CSS: 単一のコマンドで CSS ファイルをリロードできる最小限の拡張機能クリックしてください。

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