ChromeのデベロッパーツールでJavaScriptを書き換えて実行する方法。jsファイルのデバッグに便利!


Webブラウザ

Chrome_JavaScriptの書き換え_014

Google Chromeのデベロッパーツール(開発者ツール)を使ってサイト上で読み込んだJSファイル等のJavaScriptのソースを編集し、書き換えて実行する方法をまとめました。

JavaScriptもCSSと同じようにデベロッパーツールで編集できるのかと思いきや、ブラウザ上でソースコードを変更して保存しても反映されません。
どうやら書き換え後、ファイルをリロードする必要があるようです。

上手く伝わりにくいと思うので15枚の画像と共にやり方をご紹介します。

ブレークポイントを使う方法とOverridesを使う方法を記述しました。
書換える箇所が多い場合や継続して書換える場合はOverridesがオススメです。

Chrome_JavaScriptの書き換えと実行

今回の内容はサイト上で読み込まれたJSファイルなどの中身であるJavaScriptを編集して反映させる方法となります。

Chromeのデベロッパーツールで「Sources」というタブを使用します。
サイトに使っているJSのデバッグなどにも使っていただける内容です。

関連記事

「Console」タブでJavaScriptを直接実行する方法はコチラに書きました。
Chromeブラウザ上でJavaScriptを直接実行するにはConsoleタブを使う!簡単なコードの動作確認など。

JavaScriptの変更と保存

Chromeのデベロッパーツールを使ってサイト上で読み込まれたJavaScriptファイルを開いて書き換え、ブラウザ上に一時保存する方法から書きます。

やり方の手順は以下です。

  1. デベロッパーツールを起動する。
  2. Sourcesタブを選択する。
  3. 編集するファイルを開く。
  4. 値を変更する。
  5. Ctrl+Sで保存する。

サンプル用に変数aと変数bを足したものを画面に表示するプログラムを作りました。

編集したいファイルが読み込まれているページでデベロッパーツールを起動します。

Chrome_JavaScriptの書き換え_001

JavaScriptの書き換えはSourcesタブを使用する

続いてツール画面上部の「Sources」タブをクリックします。

Chrome_JavaScriptの書き換え_002

Pageから編集したいファイルを選択する

起動時「Filesystem」というタブにいると思いますので「Page」タブを押し、編集したいJSファイルを選んで開きます。

ファイル内のソースコードが表示されるので、書き換えます。

Chrome_JavaScriptの書き換え_003

Ctrl+Sで保存が出来る

キーボードの「Ctrl + Shift」で一時保存できます。
一時保存するとファイル名の横に黄色のビックリマークが付きます。

ですが、この方法だとJavaScriptを書き換えても反映されません。
サンプルプログラムだと102と表示されてほしいのが、10のままとなっています。

JavaScriptを書き換えて内容を反映させるには変更後のファイルをリロードする必要があるのですが、これが難儀です。
そのままページをリロードすれば編集前のコードが再び読み込まれてしまうのです。

これを回避する方法は以下の2があります。

  • 方法1.ブレークポイントを直前に設定する。
  • 方法2.オーバーライドを使用する。

方法1はソースコードを書き換える場所の直前にブレークポイントを設定しておき、コードを書き換えた後に読み込む方法です。

方法2はOverridesを使ってローカルに別のJSファイルを保存し、それを読み込むように設定する方法です。

では順番にやってみましょう!

方法1.ブレークポイントを使用する

ブレークポイントはJavaScriptのデバッグによく使用される機能です。
これを設定した箇所で一度プログラムの処理が止まるため、順を追ってプログラムを実行することが出来ます。

今回これを使います。手順は以下です。

  1. 書き換えたいコードの直前にブレークポイントを設置
  2. JavaScriptを書き換える
  3. 処理を進める

これで変更後のコードが読み込まれます。

前述の方法で編集したいJSファイルを開きます。

Chrome_JavaScriptの書き換え_004

ブレークポイントの設置

コードの行(など)にマウスを乗せてクリックすると画像のように青色に変更され、ブレークポイントとして設定されます。
今回は変数bの値を書き換えたいのでその行にブレークポイントを設置しました。

Chrome_JavaScriptの書き換え_005

ページをリロード(更新)する

ブレークポイントを設定したらページをF5などで更新します。
するとブレークポイントを設定した場所まで読み込まれ、読み込みが停止します。

Chrome_JavaScriptの書き換え_006

JavaScriptの書き換えと保存を行う

読み込みが停止している状態で、JavaScriptを書き換えます。
そしてCtrl+Sで保存します。
保存が完了したら、「Paused in debuffer」の再生ボタンで処理を再開すればOK!

Chrome_JavaScriptの書き換え_007

書き換えが反映された

変数bを100という値に書き換えたので、無事102と画面に表示されました!
この方法では再度リロードするとまた元のコードに戻ります。

変更したコードをリロードしても失わないようにするにはローカルに別ファイルとして保存するしかありません。
その機能が次のオーバーライドです。

方法2.Overridesを使用する

オーバーライドを使用するとJavaScriptをローカルに保存することが出来ます。
これを設定した状態でページをリロードすると、ローカルフォルダ(PC内)から読み込まれるため、書き換えた内容を保持することが出来ます。

比較的新しい機能です。では早速使ってみましょう!

編集したいファイルを開く手順は先述と同じです。

Chrome_JavaScriptの書き換え_008

Overridesの起動

ファイルを開いたら、「Page」タブ横の「>>」から「Overrides」を起動します。

Chrome_JavaScriptの書き換え_009

Overridesに使用する保存先を設定する

続いて編集したいファイルの保存先を設定します。
「+Select folder for overrides」をクリック。

Chrome_JavaScriptの書き換え_010

保存先フォルダの選択

保存先となるフォルダを設定します。

Chrome_JavaScriptの書き換え_011

デベロッパーツールに権限を与える

フォルダを選択すると、Chromeが指定したフォルダへのフルアクセスを要求します。

デベロッパーツールではxxxへのフルアクセスがリクエストされます。機密情報の漏えいにご注意ください。

問題がなければ許可をクリックします。
心配な方は空のフォルダを作り、使い終われば削除すればOKです。

Chrome_JavaScriptの書き換え_012

Ctrl+Shiftで保存するとフォルダ内に保存される

あとは好きにJavaScriptを書き換えるだけです!
保存は先ほどと同じく「Ctrl + Shift」でできます。
オーバーライドを使用している場合は、保存するとファイル名の横に黄色のビックリマークではなく、紫の●が付きます。

Chrome_JavaScriptの書き換え_013

フォルダ内に複製が作成される

保存すると先ほど選択したフォルダにファイルが作成されます。
リロードする度にこの複製が呼び出されるという仕組みです。

今回も同じく変数bを100に書き換えました。

Chrome_JavaScriptの書き換え_014

リロードしても書き換え後の値が反映する

ブレークポイントを使用する方法と違って、オーバーライドを使用するとローカルからファイルが読み込まれるので何度リロードしても変更後の値が失われることはありません。

無事に書き換え作業が終了したらオーバーライドの無効化を確認しておきましょう。

Chrome_JavaScriptの書き換え_015

フォルダを削除するにはChromeを閉じる

最後に使い終わったファイルを削除するときの注意点です。
Chromeが開いている状態だとファイルが使用中になるため、画像のようなアクセス拒否が出てしまって削除できません。

そんな場合はオーバーライドを解除してあげるか、Chromeを閉じればOKです。
(オーバーライドを使用しているタブだけ閉じればOK)

まとめ

ChromeのデベロッパーツールでJavaScriptを書き換え、保存する方法のまとめでした。
オーバーライドについては同様の方法でCSSの保存もできます。

変更したい箇所が少ない場合はブレークポイントを設定してサクッと動作確認。
変更箇所が多い場合はオーバーライドを設定してローカルに保存しながらソースコードを書き換えていくと良いです。

ではではこのへんで・w・

-Webブラウザ
-,

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学