☰

Chrome でスクリプト/スタイルシートを再読み込みする

tag-icon • tag-icon google-chrome
Chrome でスクリプト/スタイルシートを再読み込みする

Chrome の開発ツールを使用して、ページ全体を再読み込みせずに、ページに挿入されたスクリプトまたはスタイルシートの 1 つ (または複数) だけを再読み込みすることは可能ですか? つまり、 と をpage.html使用しているの場合script.js、を更新せずに、style.cssたとえば を再読み込みすることは可能ですか?script.jspage.html

答え1

ほとんどすべての場合に機能する簡単な方法スタイルシートと画像URL にクエリを追加してファイル名を変更することです。

たとえば、スーパーユーザーの場合、CSS は次のようになります。

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07">

これを変更

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07&refresh">

そして、（同じですが）リロードされたスタイルのルールを取得します。

これをブックマークレットにしたり、コンソールにコピーしたりすることができます

[].forEach.call(document.querySelectorAll("link[rel=stylesheet]"), function(link) {
   link.href+=(link.href.indexOf("?") > -1) ? "&refresh" : "?refresh";
})

スクリプトに関しては、そうすべきではありません。ほとんどすべてスクリプト読み込み時にページを変更したり、何らかのハンドラーにアタッチしたりします。別の js ファイルを読み込むことは簡単ですが、前のファイルによって行われた変更を元に戻すのは非常に困難です。

答え2

複数ページのフォームや、一連の質問に応答して Ajax によって読み込まれるものをデバッグする場合に、これが役立つことはわかります。ただし、個人的には、Chrome の開発ツールで CSS またはスクリプトを変更すると、同じ変更が適切なファイルに追加され、ページが最初から再読み込みされた場合とは異なる結果が作成されることがあります。常に発生するわけではありませんが、開発ツールで複数の変更を加えた後の結果を信頼することに躊躇するほど、このような状況が何度も発生しています。

なぜこれをやりたいのかはわかりませんが、長いチェーン プロセスをデバッグするためだと仮定すると、デバッグ中かどうかを判断するための簡単なテストを追加することをお勧めします。コードの設定方法に応じて、次の大まかな例のように動作するデバッグ ポイントを追加してみます。

If (current-point != debug-point && debugging === true) Then
   ---code to bypass steps here---
Else
   ---other code to aid the debug process or allow regular execution---
End If

当然、関数を作成するのが理想的です。これを設定するには少し手間がかかり、公開する前に削除するか無効にする必要がありますが、ページを繰り返しリロードして長い一連の手順をやり直すよりも時間を節約できます。

コードが非常に複雑な場合 (外部ライブラリの使用や単純にずさんなコードなど)、またはライブ システムで作業する必要がある場合は、この方法は不可能な場合があります。ただし、可能な場合は、必要な時点までの手順を自動化またはバイパスすることで、ページの読み込み後に行ったすべての変更を正確に解釈して反映するために Chrome の開発ツールに頼るよりも、デバッグと作業が速くなり、より正確な結果が得られます。

関連情報