web-dev-qa-db-ja.com

Firebugを使用してCSS / HTMLを編集できるように、ブラウザーでJavaScriptを編集するにはどうすればよいですか？

JSPファイル内には、かなり複雑なJavascriptがあります。本番マシンでは、理解できない非常に奇妙なバグが見られます。ローカル環境または開発環境で複製することはできませんでした。それはjavascriptに関連している可能性がありますが、これを行う良い方法が見つかりませんでした。ページのリロード時。

私はいつでもTweak CSSなどに対してこれを行うことができますが、これらの質問が指摘するように、JSクライアント側を微調整する方法は明らかではありません。

しかし、これらの答えは私を助けません：

  • 「Execute JS」（Firefoxアドオン）は機能していないようです（Chromeのコンソールが既にできること以上のことはしません）。
  • 分離されたjsファイルを使用した場合、「Charles」は機能する可能性がありますが、私のJavaScriptはJSPに埋め込まれています

デバッグモードでブラウザでJavaScriptコードをオンザフライで変更する方法？ は私が話していることに最も近いものですが、その人は彼が何をしたかについて話すことができませんそれは彼の雇用主のためでした。

ご協力いただきありがとうございます！ライアン

javascriptbrowserfirebug
52
Ryan

CSSやHTMLのようにJavaScriptを編集する際の問題は、変更を伝播する明確な方法がないことです。 JavaScriptは、実行時にDOMを変更し、Ajaxリクエストを送信し、既存のオブジェクトと関数を動的に変更できます。そのため、JavaScriptを使用してページをロードすると、JavaScriptの実行後はまったく異なる場合があります。ブラウザは、JavaScriptコードが実行するすべての変更を追跡する必要があるため、JSを編集すると、変更がクリーンページにロールバックされます。

ただし、他のいくつかの方法でJavaScriptを動的に変更できます。

  • URLバーでのJavaScriptインジェクション：javascript: alert (1);
  • JavaScriptコンソール経由（Firefox、Chrome、およびIEの新しいバージョンに組み込まれているものがあります）
  • ブラウザに提供されるJavaScriptファイルを変更する（つまり、転送中にファイルを取得して変更する）場合は、あまりサポートできません。デバッグプロキシを使用することをお勧めします。 http://www.fiddler2.com/fiddler2/

最初の2つのオプションは、現在スコープ内にあるJavaScript変数と関数を変更できるため、優れています。ただし、3番目のオプションのように、コードを変更して「提供された」ページで実行することはできません。

それ以外は、私が知る限り、ブラウザーには編集および実行のJavaScriptエディターはありません。お役に立てれば、

32
Chris Laplante

Google Chromeを使用しているときにJavaScriptファイルを変更できることを知っています。

  1. Chromeインスペクターを開き、[スクリプト]タブに移動します。
  2. ドロップダウンメニューを押して、編集するJavaScriptファイルを選択します。
  3. テキストフィールドをダブルクリックし、必要なものを入力して、必要なものを削除します。
  4. その後、Ctrl + Sを押してファイルを保存するだけです。

警告：ページを更新すると、すべての変更は元のファイルに戻ります。再度使用する場合は、コードを別の場所にコピーして貼り付けることをお勧めします。

お役に立てれば！

26
Jacob

Fiddlerに戻りたいです。それをしばらく使ってみた後、それは明らかにWebリクエストをその場で編集するための最良の方法です。 JavaScript、POST、GET、HTML、XMLなどなんでもあります。無料ですが、実装には少し注意が必要です。これが私のHOW-TOです。

Fiddlerを使用してJavaScriptを（オンザフライで）Firefoxで操作するには、次の手順を実行します。

1）ダウンロードしてインストールします Fiddler

2）Fiddler拡張機能をダウンロードしてインストールします： " Syntax-Highlighting add-ons "

3）Firefoxを再起動し、「 FiddlerHook 」拡張子を有効にします

4）Firefoxを開き、FiddlerHookを有効にします ツールバーボタン ：View > Toolbars > Customize...

5）Fiddlerツールボタンをクリックして、フィドラーが開始するのを待ちます。

6）ブラウザでFiddlerのテストURLを指定します。

Echo Service:  http://127.0.0.1:8888/
DNS Lookup:    http://www.localhost.fiddler:8888/

7）ブラウザ/サーバーに到達する前にJavaScriptをインターセプトおよび編集するために、 フィドラールール を追加します。 FiddlerでRules > Customize Rules...をクリックします。 [CTRL-R]これにより、ScriptEditorが起動します。

8） ルールに従う を編集して追加します。

a）JavaScriptを一時停止して編集できるようにするには、「OnBeforeResponse」関数の下に追加します。

if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "javascript")){
  oSession["x-breakresponse"]="reason is JScript"; 
}

b）POST動詞を使用しているときにHTTP POSTを一時停止して編集できるようにするには、「OnBeforeRequest」：

if (oSession.HTTPMethodIs("POST")){
  oSession["x-breakrequest"]="breaking for POST";
}

c）編集を許可するXMLファイルのリクエストを一時停止するには、「OnBeforeRequest」を編集します。

if (oSession.url.toLowerCase().indexOf(".xml")>-1){
  oSession["x-breakrequest"]="reason_XML"; 
}

[9] TODO：上記のCustomRules.jsを編集して、無効化できるようにします（a-c）。

10）見つかったすべてのJavaScriptでブラウザーの読み込みが停止し、すべてのスクリプトに赤い一時停止マークが表示されます。ページの読み込みを続行するには、すべてのスクリプトで緑色の[実行完了]ボタンをクリックする必要があります。 （これが[9]を実装したい理由です。）

6
not2qubit

Firefox Developer Edition（59.0b6）には、Javascriptを実行できるスクラッチパッド（Shift + F4）があります

2
Mindau