Google Chromeのデベロッパーツール（開発者ツール）を使ってサイト上で読み込んだJSファイル等のJavaScriptのソースを編集し、書き換えて実行する方法をまとめました。
JavaScriptもCSSと同じようにデベロッパーツールで編集できるのかと思いきや、ブラウザ上でソースコードを変更して保存しても反映されません。
どうやら書き換え後、ファイルをリロードする必要があるようです。
上手く伝わりにくいと思うので15枚の画像と共にやり方をご紹介します。
ブレークポイントを使う方法とOverridesを使う方法を記述しました。
書換える箇所が多い場合や継続して書換える場合はOverridesがオススメです。
この記事の目次
Chrome_JavaScriptの書き換えと実行
今回の内容はサイト上で読み込まれたJSファイルなどの中身であるJavaScriptを編集して反映させる方法となります。
Chromeのデベロッパーツールで「Sources」というタブを使用します。
サイトに使っているJSのデバッグなどにも使っていただける内容です。
関連記事
「Console」タブでJavaScriptを直接実行する方法はコチラに書きました。
Chromeブラウザ上でJavaScriptを直接実行するにはConsoleタブを使う！簡単なコードの動作確認など。
JavaScriptの変更と保存
Chromeのデベロッパーツールを使ってサイト上で読み込まれたJavaScriptファイルを開いて書き換え、ブラウザ上に一時保存する方法から書きます。
やり方の手順は以下です。
- デベロッパーツールを起動する。
- Sourcesタブを選択する。
- 編集するファイルを開く。
- 値を変更する。
- Ctrl＋Sで保存する。
サンプル用に変数aと変数bを足したものを画面に表示するプログラムを作りました。
編集したいファイルが読み込まれているページでデベロッパーツールを起動します。
JavaScriptの書き換えはSourcesタブを使用する
続いてツール画面上部の「Sources」タブをクリックします。
Pageから編集したいファイルを選択する
起動時「Filesystem」というタブにいると思いますので「Page」タブを押し、編集したいJSファイルを選んで開きます。
ファイル内のソースコードが表示されるので、書き換えます。
Ctrl＋Sで保存が出来る
キーボードの「Ctrl ＋ S」で一時保存できます。
一時保存するとファイル名の横に黄色のビックリマークが付きます。
ですが、この方法だとJavaScriptを書き換えても反映されません。
サンプルプログラムだと102と表示されてほしいのが、10のままとなっています。
JavaScriptを書き換えて内容を反映させるには変更後のファイルをリロードする必要があるのですが、これが難儀です。
そのままページをリロードすれば編集前のコードが再び読み込まれてしまうのです。
これを回避する方法は以下の２があります。
- 方法１．ブレークポイントを直前に設定する。
- 方法２．オーバーライドを使用する。
方法１はソースコードを書き換える場所の直前にブレークポイントを設定しておき、コードを書き換えた後に読み込む方法です。
方法２はOverridesを使ってローカルに別のJSファイルを保存し、それを読み込むように設定する方法です。
では順番にやってみましょう！
方法１．ブレークポイントを使用する
ブレークポイントはJavaScriptのデバッグによく使用される機能です。
これを設定した箇所で一度プログラムの処理が止まるため、順を追ってプログラムを実行することが出来ます。
今回これを使います。手順は以下です。
- 書き換えたいコードの直前にブレークポイントを設置
- JavaScriptを書き換える
- 処理を進める
これで変更後のコードが読み込まれます。
前述の方法で編集したいJSファイルを開きます。
ブレークポイントの設置
コードの行（など）にマウスを乗せてクリックすると画像のように青色に変更され、ブレークポイントとして設定されます。
今回は変数bの値を書き換えたいのでその行にブレークポイントを設置しました。
ページをリロード（更新）する
ブレークポイントを設定したらページをF5などで更新します。
するとブレークポイントを設定した場所まで読み込まれ、読み込みが停止します。
JavaScriptの書き換えと保存を行う
読み込みが停止している状態で、JavaScriptを書き換えます。
そしてCtrl＋Sで保存します。
保存が完了したら、「Paused in debuffer」の再生ボタンで処理を再開すればOK！
書き換えが反映された
変数bを100という値に書き換えたので、無事102と画面に表示されました！
この方法では再度リロードするとまた元のコードに戻ります。
変更したコードをリロードしても失わないようにするにはローカルに別ファイルとして保存するしかありません。
その機能が次のオーバーライドです。
方法２．Overridesを使用する
オーバーライドを使用するとJavaScriptをローカルに保存することが出来ます。
これを設定した状態でページをリロードすると、ローカルフォルダ（PC内）から読み込まれるため、書き換えた内容を保持することが出来ます。
比較的新しい機能です。では早速使ってみましょう！
編集したいファイルを開く手順は先述と同じです。
Overridesの起動
ファイルを開いたら、「Page」タブ横の「>>」から「Overrides」を起動します。
Overridesに使用する保存先を設定する
続いて編集したいファイルの保存先を設定します。
「+Select folder for overrides」をクリック。
保存先フォルダの選択
保存先となるフォルダを設定します。
デベロッパーツールに権限を与える
フォルダを選択すると、Chromeが指定したフォルダへのフルアクセスを要求します。
デベロッパーツールではxxxへのフルアクセスがリクエストされます。機密情報の漏えいにご注意ください。
問題がなければ許可をクリックします。
心配な方は空のフォルダを作り、使い終われば削除すればOKです。
Ctrl＋Shiftで保存するとフォルダ内に保存される
あとは好きにJavaScriptを書き換えるだけです！
保存は先ほどと同じく「Ctrl ＋ S」でできます。
オーバーライドを使用している場合は、保存するとファイル名の横に黄色のビックリマークではなく、紫の●が付きます。
フォルダ内に複製が作成される
保存すると先ほど選択したフォルダにファイルが作成されます。
リロードする度にこの複製が呼び出されるという仕組みです。
今回も同じく変数bを100に書き換えました。
リロードしても書き換え後の値が反映する
ブレークポイントを使用する方法と違って、オーバーライドを使用するとローカルからファイルが読み込まれるので何度リロードしても変更後の値が失われることはありません。
無事に書き換え作業が終了したらオーバーライドの無効化を確認しておきましょう。
フォルダを削除するにはChromeを閉じる
最後に使い終わったファイルを削除するときの注意点です。
Chromeが開いている状態だとファイルが使用中になるため、画像のようなアクセス拒否が出てしまって削除できません。
そんな場合はオーバーライドを解除してあげるか、Chromeを閉じればOKです。
（オーバーライドを使用しているタブだけ閉じればOK）
まとめ
ChromeのデベロッパーツールでJavaScriptを書き換え、保存する方法のまとめでした。
オーバーライドについては同様の方法でCSSの保存もできます。
変更したい箇所が少ない場合はブレークポイントを設定してサクッと動作確認。
変更箇所が多い場合はオーバーライドを設定してローカルに保存しながらソースコードを書き換えていくと良いです。
ではではこのへんで・ｗ・
