Chrome DevTools のスタイル パネルで行った CSS の変更を保存するにはどうすればよいですか?

Chrome デベロッパー ツールのスタイル パネルから CSS の変更を保存する

Google Chrome デベロッパー ツールのコンテキストでは、スタイル パネルを通じて CSS の変更が行われるときに問題が発生する場合があります。 [リソース]パネルに表示されません。これは、CSS ファイルをローカルで作業する場合に特にイライラする可能性があります。

この状況を解決するために、Chrome ではワークスペースにローカル フォルダーを追加するという回避策が導入されました。これにより、Web リソースをローカル リソースにマップし、変更をローカルで編集して保存できるようになります。

CSS 変更を保存する手順:

1. ワークスペースにフォルダーを追加: 「ソース」タブの左側のパネルを右クリックし、「フォルダーをワークスペースに追加」を選択します。ワークスペース。"
2. Chrome アクセスを許可: 追加するフォルダーへの Chrome アクセスを許可します。
3. ネットワーク リソースのマップ: Web リソースを選択します[ネットワーク] タブで、対応するローカル リソースにマップします。
4. Make変更: ページをリロードし、CSS ファイルをローカルで編集します。
5. 変更の保存: 「Ctrl S」 (Windows) または「Cmd S」 (Mac) を押して変更を保存します。 .

追加ヒント:

• Chrome によるローカル リソースの認識をトリガーするには、マップされたファイルを開いていくつかの変更を加える必要がある場合があります。
• Chrome のワークスペース機能は、元々は Canary を通じて利用可能でした。チャネルですが、現在はブラウザの安定版に統合されています。

サードパーティアドオン

Chrome の組み込み機能が解決策を提供しますが、CSS の変更を保存するために外部アドオンを検討することもできます。現在、Firebug の幅広い CSS 変更保存ツールとは異なり、Chrome で利用できるオプションは限られています。ただし、LiveReload や Stylus などのサードパーティ ツールも同様の機能を提供しており、開発ワークフローを強化できます。

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