Web UIデザインを学びたい。(わかっています、わかっています。プログラマーであることは不利な立場に置かれます。しかし、とにかくやってみたいと思います。) したがって、CSS ファイルを「デバッグ」したいと思います。
私が見つけた最大の煩わしさの 1 つは、ページ全体をリロードしないと CSS ファイルの変更をテストできないことです。ページが大きすぎる場合があります。ページが AJAX に大きく依存しているため、何度もクリックした後に多くの要素がページに表示されることがありました。ときどき、Command + R を押し続けるのが嫌いなことがあります。
ページ全体をリロードせずに、更新されたバージョンの CSS ファイルを使用してページを再レンダリングする主要なブラウザー (できれば Safari や Chrome) の拡張機能はありますか?
開発者ツールを chrome で試してみてください。それらを使用して、css 定義をライブ編集できます。スタイルシートだけをリロードできる拡張機能は知りませんが、いくつかの変更のみをテストしたい場合には、これが役立つかもしれません。Firefox の Firebug でも同じことができます。
Firefox の「Web 開発者」プラグインを使用すると、メニューから「ユーザー スタイル シートを追加...」を実行できます。また、css ファイルのコンテンツをライブ編集できる「CSS の編集」機能もあり (たとえば、file1.css と file2.css には 2 つのエディター タブがあり、ファイルごとに 1 つ)、編集したファイルを保存できます。
Paul が提案するように、私は Firebug をより頻繁に使用する傾向があり、変更された css ファイルの内容をコピーして実際の css ファイルに貼り付けることができます。
Chrome 用のStylebot拡張機能も優れています。
変更をすばやく編集して表示できます。そして、実際にこれを個人的に表示するサイトに保存できます。これは、Web サイトのデフォルトのスタイルシート用に変更したものから編集された表示でリストに保存できます。
Stylebot を使用すると、任意の Web サイトの外観をすばやく操作できます (カスタム CSS を使用)。Stylebot を使用すると、お気に入りの Web サイトのルック アンド フィールをパーソナライズできます。また、CSS を学習したり、自分のサイトのデザインをデバッグしたりするための優れたツールでもあります。