2011-01-24 4 views
5

私はFirefoxを嫌いですが、Web開発者としてFirebugが提供する強力なツールセットに結びついています。最近、ChromeとSafariのインスペクションツールを使用すると、完全なチャンク構造コードを非常にバグの多い方法で編集することができましたが、まだ完全なスタイルシートを編集することはできません。通常、誰かがこれを持ち出すと、ChromeとSafariの開発者は「しかし、あなたはCSSを編集できます」と言いますが、それはある程度真実です。両方のブラウザでCSSのプロパティごとのプロパティーを変更することはできますが、多くの変更があった場合は永遠に変更できますが、完全に計算されたスタイルシートを見たり、編集したり、結果をすぐに見ることはできません。今日まで、FirebugをFirefoxにフルインストールするだけでこれを行うことができます。ChromeやSafariでのオンザフライスタイルシートの編集

ChromeやSafariのいずれのキャンプでも、この比類のない機能に対応するためのプラグインを作成する勢いはありましたか?あなたがページにCSSを挿入することを可能にする格安プラグインは答えではありません。それは本当に簡単です:

  1. は、編集したいものを選択して参照されている現在のスタイルシートのリストを持っている、と
  2. は、スタイルシート内のすべてのコードを参照してください。編集ボタンをクリックし
  3. 変更してすぐにページに反映されていることを確認してください

これを行うものは本当に難しいですか?なぜなら、2つのブラウザの開発者コミュニティがそれを完全に無視するのはなぜでしょうか?この機能を提供するものがあれば、それを聞いてみたいと思います。それ以外の場合は、誰かがChromeやSafari用に開発して開発するかもしれません。 CSS Editアプリケーションを開発した人たちがこのようなことをしているようだ。

+4

「私はFirefoxが嫌い」 - まれな見解です。何か特別な理由?あなたの実際の質問については、Firebugの "実際のCSSテキストの変更"機能を使って自分自身を見つけることはしばしばありませんので、Chromeからそれを見逃すことはありません。 「プロパティ別のプロパティ」の変更は、私にとっては第二の性質です。明らかに、Chrome/Safariで話しているFirebugの機能を持っているのは良いことですが、大部分の開発者にとってはそれほど大したことではないと思います。 – thirtydot

+0

「まれなビュー」 - ほとんどありません。 Firefoxと特にGeckoレンダリングエンジンは、時代を示すようになっています。私のチームの開発者の中で「新しいIE」と呼ばれることは珍しくありません。これは約400人の専門家からなるグループです。 – bjork24

+2

申し訳ありませんが、それはまったくのごみのように聞こえます。 Firefox 3.6.13は、最新バージョンでさえありませんが、Acid3テストの90%を獲得しました。私は実際に興味をそそられています。あなたの投稿の最初の言葉を「私はFirefoxが嫌い」にするのに嫌なレンダリングエンジンに何が問題なのですか? – thirtydot

答えて

9

おかげで私はそれを見つけました!

ChromeのLive Stylesheets extensionは、あなたが探しているものです。インストール後にChromeを再起動してください。

+0

ありがとう!それは完全に動作します! – bjork24

+0

+1、私はChromeでこれが欲しい奇妙な時間のために完璧と思われます。 – thirtydot

+0

甘い、素敵な1つ@Knu! –

3

Chrome DevToolsでも(Chrome 15以降)外部スタイルシートを編集できます。リソースパネルのスタイルシートの内容をダブルクリックするか(または「編集」ボタンをクリック)、編集するにはCtrl-Sを押し、新しいリビジョンをコミットするにはEscを、編集をキャンセルするにはEscを押します。そして、入力するとあなたのページが更新されます!

0

拡張機能に頼らずに、Chromeで直接CSSファイルを編集できます。

  • を見つけ、 "ソース" をクリックして、デベロッパーツールに
  • を検査選択し、右ページをクリックし

    1. :それにアクセスするためのEdit CSS files on the fly using Chrome DevTools

      異なる方法:ここで

      はどのようにありますcssを「ネットワーク」パネルでクリックしてクリックしてください

    2. cssを変更して保存してください(ctrl + sを押して) enter image description here