私もこの問題を永遠に経験し、最終的にWebインスペクターで編集するべきではないと判断し、それのために何かを構築しました(https://github.com/viatropos/design.io)。
より良いソリューション:
ブラウザは、テキストエディタで[保存]を押すと、再読み込みせずに CSSの変更を自動的に反映します。
Webインスペクターでcssを編集している主な理由(私はwebkitを使用していますが、FireBugは同じ行に沿っています)は、小さな調整を行う必要があり、ページの再読み込みに時間がかかりすぎるためです。
このアプローチには2つの主な問題があります。まず、id
セレクターがない可能性のある個々の要素を編集できます。したがって、生成されたCSSをWebインスペクターからコピー/貼り付けできたとしてもid
、CSSをスコープするを生成する必要があります。何かのようなもの:
#element-127 {
background: red;
}
それはあなたのCSSを混乱させ始めるでしょう。
既存のセレクター(.space
下のwebkitインスペクター画像のクラスセレクター)のスタイルを変更するだけで、問題を回避できます。
それでも、2番目の問題。そのことへのインターフェースはかなりラフで、大きな変更を加えるのは難しいです-あなたがこのCSSのブロックをこの場所に実際にすばやくコピーしたい場合など。
私はむしろTextMateに固執したい。
理想は、テキストエディターでCSSを記述し、ページをリロードせずにブラウザーに変更を反映させることです。このようにして、小さな変更を加えながら、最終的なCSSを記述します。
次のレベルは、Stylus、Less、SCSSなどの動的CSS言語で記述し、生成されたCSSでブラウザーを更新することです。このようbox-shadow()
にして、Webインスペクターでは絶対に実行できない複雑さを抽象化したのようなミックスインの作成を開始できます。
この種のことを行う方法はいくつかありますが、私の意見ではそれを実際に合理化するものはありません。
これらの作業を簡単にカスタマイズする機能がないことが、私がそれらを使用しなかった主な理由です。
私は特にこの問題を解決するためにhttps://github.com/viatropos/design.ioをまとめて、そうしました:
- ブラウザは、ページをリロードせずに、保存するたびにcss / js / html / etcを反映します
- テンプレート/言語/フレームワーク(スタイラス、Less、CoffeeScript、Jade、Hamlなど)を処理できます。
- これはJavaScriptで記述されており、拡張機能をJavaScriptですばやく作成できます。
このように、CSSにこれらの小さな変更を加える必要がある場合は、背景色を設定し、[保存]を押して、「いいえ」を参照してください。色相を10ずつ調整してください。
それが機能する方法は、ファイルを保存するたびに(OSレベルで)監視し、ファイルを処理し(これは拡張機能が動作する場所です)、WebSocketを介してデータをブラウザにプッシュし、その後処理されます(クライアント側)拡張子)。
プラグインや何もしないが、私はこの問題に長い間悩まされていた。
お役に立てば幸いです。