開発者ツール/ Firebugを使用してファイルを更新する

Question

Chrome Developers ToolまたはFirebugで行った変更をファイルに直接保存する方法はありますか？そのファイルへの読み取り/書き込みアクセス権があると仮定します。

または、同様の方法（または同様のUI）で変更を更新できる開発ツールはありますか??

Answer 1

はい、Firefoxでは、優れた Web開発者も使用している場合アドオン ...

そのアドオンを使用して、 ソースの表示 -> 生成されたソースの表示 を選択します。
これにより、JSおよびFirebugで行った手動編集によって変更されたHTML「ファイル」 ^{1 の現在の状態が開きます。}

ポップアップするウィンドウから、ファイルを「名前を付けて保存」するか、必要に応じてコピーして貼り付けることができます。

この生成されたファイルには多数のFirebugスタイル（簡単に識別可能）があり、JSによって要素にstyle属性が設定されている可能性があることに注意してください。

^{1 残念ながら、リンクされているCSSまたはJSファイルへの変更はキャプチャされません。
このため、Firebugを調整するときは、HTMLの「ファイル」にスタイルルールとコードを追加してCSSとJSを変更するのが好きです。
ページが目的の外観/動作に近づくと、変更は生成されたソースの表示を介してスナップショットが作成され、必要に応じてリンクされたファイルにマージされます。}

Answer 2

Chrome開発ツールでは、変更されたCSSファイルとJavaScriptファイルを[ソース]パネルから保存して、それらのファイルにどのような変更（差分）が加えられたかを確認できます。

例：

1. [ソース]パネルでJavaScriptまたはCSSファイルを開きます。

2. ソースをクリックします。

3. 変更を加えます。

4. Command-SまたはCtrl-Sを押して、変更を保存します。

5. ソースコード（または[ソース]パネルのソースツリー）を右クリックし、[ローカル変更]を選択してバージョン管理を表示します。

6. 右クリックして[名前を付けて保存...]を選択し、ファイルを保存するディスク上の場所を選択します。後続の保存はこの場所に保存されます。

Answer 3

Eclipse / Chrome用のJavaプロジェクトがあります：

http://code.google.com/p/chromedevtools/ >

これはJavaScriptデバッガーのみです（CSSやネットワークなどは表示されません）が、同じファイルをデバッグおよび編集するようにEclipseプロジェクトを設定できます（さらにライブ編集も可能です）。 現在のバージョンでは、ソースファイルの設定は少し注意が必要です

http://code.google.com/p/chromedevtools/wiki/FeatureDebugOnRealFiles

（次のバージョンの方が簡単だといいのですが）

JSDT、Aptana、またはその他のJavaScriptサポートと一緒に、Chrome用の優れたIDE +デバッガーを使用できます。

Answer 4

いいえ。編集しているコードは、レンダリングされたクライアント側のコードです。ブラウザを介してサーバー側のコードに影響を与える方法はありません。いずれにせよ、サーバー側の基になるファイルが非静的である場合、そのような操作のセマンティクスは実際に機能しなくなります。