Chromeデバッガで編集する

Question

ChromeデバッガでJavaScriptコードを「動的に」編集するにはどうすればよいですか。それは私のためではないので、私はソースファイルにアクセスすることができません。コードを編集して、ページにどのような影響があるのかを確認したいと思います。この場合、アニメーションが何度もキューに入れられるのを防ぎます。

Adam · Accepted Answer

Chromeデベロッパーツールの[スクリプト]タブで組み込みのJavaScriptデバッガを使用できます（以降のバージョンでは[ソース]タブです）が、コードに適用した変更は実行が通過した時点でのみ表現されます。つまり、ページの読み込み後に実行されていないコードを変更しても効果はありません。とは違ってmouseoverハンドラ内にあるコードに変更を加えます。これはその場でテストできます。

Chrome開発者向けツールの他の機能を紹介するGoogle I/O 2010イベントからのビデオがあります。

sjacob · Answer

私は他の誰かのウェブサイトで遊んでいたとき、私は今日これに遭遇しました。

私は可能であることに気づいた前のコード行にデバッガのブレークポイントを付ける私が動的に編集したいこと。そしてページのリロード後もブレークポイントは維持されますなので、ブレークポイントで一時停止している間に必要な変更を編集し、その後ページをロードさせることができました。

簡単な回避策として、そしてそれがあなたの状況でうまくいくならば：

スクリプトの前の位置にブレークポイントを追加する
ページを再読み込み
変更内容をコードに編集します。
CTRL + s （変更内容を保存）
デバッガを一時停止解除する

artemisian · Answer

これはあなたが探しているものです：

1.- [Source]タブに移動して、JavaScriptファイルを開きます。

2.-ファイルを編集して右クリックするとメニューが表示されます。保存をクリックしてローカルに保存します。

差分を表示したり変更を元に戻したりするには、右クリックしてメニューからオプションLocal Modifications...を選択します。表示されているタイムスタンプを展開すると、元のファイルに対する変更の差分が表示されます。

ここでより詳細な情報： http://www.sitepoint.com/edit-source-files-in-chrome/

gnur · Answer

とても簡単です、 'スクリプト'タブに行きます。そしてあなたが望むソースファイルを選択し、それを編集するために任意の行をダブルクリックしてください。

dominik · Answer

これはJSのライブ編集を扱う非常に人気のある質問なので、私は別の有用な選択肢を指摘したいと思います。彼の答えでsvjacobによって説明されるように：

動的に編集したいものの前に、デバッガのブレークポイントをコードの一部の行に追加できることに気付きました。また、ブレークポイントはページのリロード後も保持されるため、ブレークポイントで一時停止している間に必要な変更を編集し、その後もページをロードさせることができました。

上記の解決策は、私にとっては非常に大きなJS（ウェブパックバンドル - 3.21MBの縮小版、130k行のコードで最適化された版）ではうまくいきませんでした。この場合のやり方はFiddlerです。ここでAutoRespondオプションを設定して、任意のリモートリソースをあなたのコンピュータからの任意のローカルファイルに置き換えることができます - 詳細はthis SO question 。

私の場合はレスポンスをモックするためにCORSヘッダをフィドラーに追加しなければなりませんでした。

stackinfostack · Answer

今グーグルクロムは新機能を紹介しています。この機能を使用することであなたはクロムブラウズであなたのコードを編集することができます。（コード位置の恒久的な変更）

そのためには、F12キー - > [ソース]タブ - （右側） - > [ファイルシステム]を押してください - コードの場所を選択してください。それからクロムブラウザはあなたに許可を求めます、そしてそのコードの後に緑色で沈むでしょう。そして、あなたはあなたのコードを修正することができます、そしてそれはあなたのコードの場所にも反映されます（それはそれが永久的に変わることを意味します）

ありがとう

developer747 · Answer

ボタンをクリックするだけで実行されるJavaScriptの場合は、Sources> Sources（chromeの開発者向けツール）で変更を行い、Ctrl + Sを押して保存すれば十分です。私はこれをいつもやります。

ページを更新すると、JavaScriptの変更はなくなりますが、chromeはまだブレークポイントを記憶しています。

100r · Answer

スクリプトを変更してその新しいスクリプトをデバッグする方法を探していました。私がそれをすることができた方法は：

変更してデバッグしたいスクリプトの最初の行にブレークポイントを設定します。
ブレークポイントに到達するようにページをリロードします
新しいスクリプトを貼り付けて、必要なブレークポイントを設定します。
Ctrl + Sを押すと、ページが更新され、最初の行のそのブレークポイントがヒットします。
F8キーを押し続けて、リダイレクトや再読み込みが行われない限り、新しく貼り付けたスクリプトを元のスクリプトに置き換えます。

Seifedine Tamallah · Answer

chromeデバッガのソースタブでjavascrpitファイルを動的に編集できますが、ページを更新すると変更は失われます。変更を行う前にページの読み込みを一時停止します。 ブレークポイントを設定してからページをリロードして変更を編集し、最後に変更を有効にするためにデバッガを一時停止解除する必要があります。