Chromeデバッガーでの編集

247

ChromeデバッガーでJavaScriptコードを「動的に」編集するにはどうすればよいですか？自分用ではないので、ソースファイルにアクセスできません。コードを編集して、ページにどのような影響があるかを確認したいのですが、この場合、アニメーションが大量にキューイングされるのを止めています。

javascript  google-chrome  debugging 
— トム
ソース
5
Operaを使用できます。OperaではJSファイルの編集が可能です。ページをソフトリロードすると、変更が適用されます。右クリック> [ソース]> [変更]> [変更を適用]。
— XP1 2012
これはChromeデバッガのすばらしいチュートリアルです。スクリプトにデバッガー内の変更を加えるための非常に簡単な手順を示しています。
— SaganRitual
1
条件付きブレークポイントを介してコードを「挿入」することもできます。以下の例ではnum = 5, console.log(arguments[0], num), false、foo関数内の値を更新してログに記録するために使用します。
— me
— stackinfostack 2018年

回答:

80

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

Chromeデベロッパーツールの他の機能を紹介するGoogle I / O 2010イベントのビデオがあります。

— アダム
ソース
26
Chromeの以降のバージョンでは、タブアイコンがなくなり、「スクリプト」タブの名前が「ソース」に変更されたため、JavaScriptデバッガーを見つけるのは明らかではない場合があります。ここではいくつかのより多くの情報stackoverflow.com/questions/12113769/...
— chrisjleu
9
そのような方法はありません。[ソース]タブでコードを変更することもできません。
— Melab、2016年
17
Chromeデバッガーは、JavaScriptのローカル変更を許可しません。いいえ。
— 16年
1
@oMiKeY偽って何ですか？Chromeでは、デバッガーでスクリプトを変更できます。
— JLRishe
6
@oMiKeYスクリプトがきれいでない場合は変更できます
— peterchaula
283

他の人のウェブサイトで遊んでいるときに、今日これに出くわしました。

動的に編集したいものの前に、デバッガーのブレークポイントをコード行に追加できることに気付きました。また、ページの再読み込み後もブレークポイントが残るため、ブレークポイントで一時停止している間に必要な変更を編集し、ページをロードし続けることができました。

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

  1. スクリプトの前のポイントにブレークポイントを追加します
  2. ページを再読み込み
  3. 変更をコードに編集します
  4. CTRL+ s（変更を保存）
  5. デバッガの一時停止を解除します
— sjacob
ソース
1
ありがとう！ページロードのすぐ近くで呼び出された、自己実行型の匿名関数を変更する必要があるときに、これが機能することがわかりました。
— Peter
1
ああ、私はこれを以前に試してみましたがうまくいかなかったので、ああ、どうして見逃したのですか しかし、うん、私にはうまくいきません。
— ジェイミーハットバー
8
私にとって重要なのは、変更を保存する必要があることを知ることでした（ステップ4）。ありがとう！
— Sergey Goliney
3
私にとっては、htmlファイル内の javascriptでは機能しません。また、ワークスペースにフォルダーを追加した場合は、ローカルの jsファイルを選択して右クリックし、そのファイルをネットワークditoにマッピングします。
— oo 2016年
1
では、htmlファイル内のスクリプトを変更する方法はありませんか？
— Warrior
13

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

1.- [ソース]タブに移動し、JavaScriptファイルを開きます

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

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

詳細情報はこちら：http : //www.sitepoint.com/edit-source-files-in-chrome/

— アルテミシアン
ソース
5

とても簡単です。「スクリプト」タブに移動します。必要なソースファイルを選択し、任意の行をダブルクリックして編集します。

— かじる
ソース
4
file：// URLの場合に変更をディスクに保存できればすばらしいと思います
— ジム・ブラックラー'21
3
それはまさに私がやったことですが、予想どおり、変更はページに反映されませんでした。$（selector）.fadeIn（）...を$（selector）.stop（true、true）.fadeIn（）...に変更する必要がありますか？そして、私はそれがページで起こるのを見ることができるようになりたいです。
— トム
1
ああくそ、あなたは正しいです。それがどんな効果を持っていない場合、Chromeは編集何に私たちを可能になぜ今、私は疑問に思う...
— gnur
「名前を付けて保存...」は、ファイルをコンピュータに保存するだけです。ページがリロードされた後、変更は適用されません。デバッグのためにJSファイルに変更を適用する場合は、Operaを使用できます。
— XP1 2012
1
：tincrと呼ばれ、この1 chrome.google.com/webstore/detail/...
— JustGoscha
3

これはJSのライブ編集に関する非常に人気のある質問なので、別の便利なオプションを指摘したいと思います。svjacobが彼の回答で述べたように：

動的に編集したいものの前に、デバッガーのブレークポイントをコード行に追加できることに気付きました。また、ページの再読み込み後もブレークポイントが残るため、ブレークポイントで一時停止している間に必要な変更を編集して、ページをロードし続けることができました。

上記の解決策は、非常に大きなJS（Webpackバンドル-3.21MB縮小バージョン、prettifiedバージョンで130k行のコード）に対しては機能しませんでした-Chromeがクラッシュし、保存された変更を元に戻すページの再読み込みを要求しました。この場合の方法はFiddlerで、自動応答オプションを設定して、リモートリソースをコンピューターのローカルファイルに置き換えることができます。詳細については、このSOの質問を参照してください。

私の場合、応答をうまく模倣するためにCORSヘッダーをフィドラーに追加する必要もありました。

— ドミニク
ソース
2

ボタンクリックで実行されるJavaScriptの場合、[ソース]> [ソース]（Chromeの開発者ツール内）で変更を行い、Ctrl + Sを押して保存すれば十分です。です。私はいつもこれをします。

ページを更新すると、JavaScriptの変更は失われますが、クロムはブレークポイントを記憶します。

— developer747
ソース
2

現在、Google Chromeに新機能が導入されています。この機能を使用することで、Chromeブラウズでコードを編集できます。（コードの場所の永続的な変更）

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

ありがとう

— スタック
ソース
2

@markの回答と同じように、Chrome DevToolsでスニペットをoverrideデフォルトのJavaScriptに作成できます。最後に、ページにどのような影響があるかを確認できます。

画像

— 神酒
ソース
1

ここに私が書いたクロムのjsデバッガの穏やかな紹介があります。多分それはこれに関する情報を探している他の人を助けるでしょう：http : //meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

— おちる
ソース
1
それは良い記事です。残念ながら、それは問題のタスクであるデバッガーでのJSの編集については何も述べていません。
— Bruno Bronosky 2013
同意しない。最後に、質問の一部である「ChromeデバッガーでJavaScriptコードを「動的に」編集する方法」の例を具体的に示します。
— 2013
1
私があなたが投稿したものと誤解しない限り、あなたはコンソールでJS を評価する方法を示しています。これは関数を編集することとは異なり、将来その関数が呼び出されたときの動作が異なります。
— Bruno Bronosky、2014年
けっこうだ。編集はライブページの値の周りの変更を意味することを理解し、書き込みが役立つと思いました。コンソールに配置したら、実行コンテキスト内の値やその他のjsを試すことができるからです。
— meeech
1
はい、私はあなたが長年述べてきたことを正確に行いました。ついに、イベントハンドラーを変更するための適切なフィードバックループを実現できないことにイライラしました。特に、ページの読み込み中にトリガーされるもの。AaronLSと私がgnurの回答のコメントで説明したように、DevTools> Sources> Sourcesで編集すると機能する場合と機能しない場合があります。しかし、うまくいくと、それはかなり甘いです！
— Bruno Bronosky、2014年
1

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

— セイフタマラ
ソース
クロームがブレークポイントで停止するようにコンソールを開いたままにする必要があります。そうしないと、クロームがブレークポイントを無視します
— Seif Tamallah
機能していません。F5を使用してリロードすると停止し、ファイルを変更してから実行を続けると、修正したばかりの同じエラーが発生します。これは、メインページの横のjsファイルだ、。
— darkgaze
1

スクリプトを変更し、その新しいスクリプトをデバッグする方法を探していました。私がそれをどうにかした方法は：

  1. 変更してデバッグするスクリプトの最初の行にブレークポイントを設定します。

  2. ブレークポイントにヒットするようにページを再読み込みします

  3. 新しいスクリプトを貼り付けて、そこに目的のブレークポイントを設定します

  4. Ctrl + sを押すと、ページが更新され、最初の行のブレークポイントがヒットします。

  5. 続行するにはF8キーを押します。リダイレクトとリロードが行われない限り、新しく貼り付けたスクリプトは元のスクリプトに置き換わります。

— 100r
ソース
0

Chromeで「オーバーライド」を使用すると、元のソースをホストしていない場合でも、ページの読み込み間でJavaScriptの変更を維持できます。

  1. Developer Tools> Sources> Overridesの下にフォルダーを作成します
  2. Chromeはフォルダへの許可を要求します。[許可]をクリックします
  3. 「ソース」>「ページ」でファイルを編集して保存します（ctrl-s）。紫色の点は、ファイルがローカルに保存されていることを示します。

Chromeデベロッパーツールの[上書き]サブタブ

— マーク・フォアマン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.