web-dev-qa-db-ja.com

Chrome Dev Tools-JavaScriptを変更してリロードする

ページのJavaScriptを変更し、変更されたJavaScriptファイルをリロードせずにページをリロードすることは可能ですか（したがって、変更は失われますか）？

javascriptgoogle-chrome-devtools
157
CDT

これは少し回避策ですが、これを達成する1つの方法は、操作するJavaScriptファイルまたはブロックの先頭にブレークポイントを追加することです。

次に、リロードすると、デバッガーがそのブレークポイントで一時停止し、ソースに必要な変更を加え、ファイルを保存してから、変更されたコードを介してデバッガーを実行できます。

しかし、誰もが言ったように、次の変更はリロードされなくなります-少なくとも少し変更されたJSクライアント側を実行できます。

193
Ashley Schroder

すばらしいニュースです。修正は2018年3月に行われます。次のリンクを参照してください。 https://developers.google.com/web/updates/2018/01/devtools

「ローカルオーバーライドを使用すると、DevToolsで変更を行い、ページの読み込み中にそれらの変更を保持できます。以前は、ページをリロードすると、DevToolsで行った変更は失われます。

使い方：

  • DevToolsが変更を保存するディレクトリを指定します。 DevToolsで変更を行うと、DevToolsは変更されたファイルのコピーをディレクトリに保存します。
  • ページをリロードすると、DevToolsはネットワークリソースではなく、ローカルの変更されたファイルを提供します。

ローカルオーバーライドを設定するには：

  1. [ソース]パネルを開きます。
  2. [上書き]タブを開きます。
  3. [設定の上書き]をクリックします。
  4. 変更を保存するディレクトリを選択します。
  5. ビューポートの上部で、[許可]をクリックして、DevToolsにディレクトリへの読み取りおよび書き込みアクセスを許可します。
  6. 変更を加えてください。」

更新（2018年3月19日）：ライブで詳細な説明がここにあります： https://developers.google.com/web/updates/2018/01/devtools#overrides

80
Nico

Resource Override 拡張により、正確にそれを行うことができます：

  • 置き換えるURLのファイルルールを作成します
  • 拡張機能でjs/css/etcを編集します
  • 何度でもリロードできます:)
59
laktak

私はそれが正確な質問（Chrome Developer Tools）への回答ではないことを知っていますが、私は成功してこの回避策を使用しています： http://www.telerik.com/fiddler

（Web開発者の一部がすでにこのツールについて知っていることを確認してください）

  1. ファイルをローカルに保存する
  2. 必要に応じて編集
  3. 利益！

enter image description here

完全なドキュメント： http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS。フラグpreserve after reloadとしてChromeに実装したいのですが、今はできません。フォーラムやディスカッショングループは企業ネットワークでブロックされています:)

0
Mars Robertson