web-dev-qa-db-ja.com

Visual Studioでデバッグ中にChromeブラウザに.cssファイルを強制的に再ロードさせる方法は？

私は現在、Visual Studio 2012の内部でデバッグモードで.cssファイルを編集しています。私はブラウザとしてChromeを使用しています。アプリケーションのVisual Studio内で.cssファイルを変更して保存したときに、ページを更新しても.cssファイルの更新された変更が読み込まれません。 .cssファイルはまだキャッシュされていると思います。

私が試してみました：

  1. CTRL/F5
  2. Visual Studio 2012では、[プロジェクトのプロパティ]、[Web]タブの順にクリックします。[アクションの開始]セクションで[外部プログラムの開始]を選択します。GoogleChromeのパスを貼り付けるか参照します。 chrome.exe）[コマンドライン引数]ボックスに-incognitoを入力します。
  3. Chrome開発者ツールを使用し、[歯車]アイコンをクリックし、[キャッシュを無効にする]をオンにします。

手動でデバッグを停止して（Chromeを終了して）アプリケーションを再起動しない限り（デバッグ中）、何も動作しないようです。

Chromeに常にすべてのcss変更をリロードし、.cssファイルをリロードさせる方法はありますか。

更新：
1。更新すると、.aspxファイルのインラインスタイルの変更が反映されます。しかし、.cssファイルの変更はしません。 2.それはASP.NET MVC4アプリですので、ハイパーリンクをクリックしてGETを行います。そうしても、スタイルシートに対する新しい要求は表示されません。しかしF5をクリックすると、.cssファイルが再ロードされ、（ネットワークタブ上の）ステータスコードは200です。

cssvisual-studiogoogle-chromecaching
136
duyn9uyen

もっと複雑な解決策もありますが、非常に簡単で単純な解決策は、CSSのインクルードにランダムなクエリ文字列を追加することです。

src="/css/styles.css?v={random number/string}"など

Phpまたは他のサーバーサイド言語を使用している場合は、time()を使用してこれを自動的に行うことができます。だからstyles.css?v=<?=time();?>になります

このように、クエリ文字列は毎回新しくなります。私が言ったように、もっと動的なもっと複雑な解決策がありますが、テスト目的ではこの方法がトップ（IMO）です。

134
anson

クロムにcssとjsの再ロードを強制するには、次のようにします。

Windowsオプション1： CTRL + SHIFT + R
Windowsオプション2： SHIFT + F5

OS X： ⌘ + SHIFT + R

コメント内の@PaulSlocumによって述べられているとおりに更新されました（そして多くの人が確認しました）

元の回答：

Chromeは動作を変更しました。 Ctrl + R やります。

OS Xの場合： ⌘ + R

Css/jsファイルの再読み込みに問題がある場合は、インスペクタを開いてください（CTRL + SHIFT + C）リロードする前に.

173
Bart Calixto

[以下のアップデートを読む]

私が見つけた最も簡単な方法はChrome DevToolsの設定です。 DevToolsの右上にある歯車のアイコン（または最近のバージョンでは3つの垂直ドット）をクリックして、[設定]ダイアログを開きます。そこで、ボックスにチェックを入れます： "キャッシュを無効にする（DevToolsが開いている間）"

更新：この設定は移動しました。 「ネットワーク」タブにあります。「キャッシュを無効にする」というラベルの付いたチェックボックスです。 enter image description here

126
Deepak Joy

あなたはブラウザキャッシュの問題を扱っています。

ページ自体のキャッシュを無効にします。それはブラウザ/キャッシュにページの補助ファイルを保存しません。

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />

このコードは、デバッグしているページのheadタグ、またはサイトのmaster pageのheadタグに挿入する必要があります。

これはブラウザがファイルをキャッシュすることを許可しないでしょう、結局ファイルはブラウザの一時ファイルに保存されないでしょう。

私はこれがすると確信しています:)

9
MarmiK

私の場合、Chrome DevToolsの設定で、「キャッシュを無効にする（DevToolsが開いている間）」を設定しても機能しません。このキャッシュの問題を解決するためのグループ。

8
gustavH

押す SHIFT+F5。

Chromeバージョン54で動作します。

6
user2580062

MacOSでは、ChromeにCSSファイルの再読み込みを強制することができます。

⌘ + SHIFT + R

この答えはここのコメント に埋め込まれていました が、もっと露出するに値しました。

4
AlexG

私はここで同じ問題に直面していました！しかし、私の解像度は上記のすべての例よりも優れています。

  1. F12キーを押してChromeデベロッパーコンソールを起動します
  2. ブラウザ上部のリロードボタンを右クリックして、[キャッシュを空にしてハードリロード]を選択します。

それだ！

4
Optimaz ID

現在のバージョンのChrome（55.x）では、ページをリロードしたときにすべてのリソースがリロードされるわけではありません（Command + R）。これは、.cssファイルのデバッグには役立ちません。

Command + Rは、.html、.php、.etcファイルのみをデバッグする場合は問題なく動作します。ローカル/キャッシュされたリソース（.css、.js）を使用する場合は高速です。デバッグの繰り返しごとにブラウザのキャッシュを手動で削除するのは便利ではありません。

Mac（キーボードショートカット/ Chrome）で.cssファイルを強制的にリロードする手順：Command + Shift + R

3
Logic Industry

MacOS Chromeの場合：

  1. オープン開発者ツール cmd+alt+i
  2. 開発者ツールの右上隅にある3つの点をクリックします
  3. クリック設定
  4. Networkまでスクロールします
  5. Disable cache (while DevTools is open)を有効にするスクリーンショットを見てください： enter image description here
2
pbaranski

私はそれが古い質問であることを知っています、しかし誰かがまだただ一つの外部css/jsファイルをリロードする方法を探しているならば、Chromeで今最も簡単な方法は以下の通りです：

  1. DevToolsの[ネットワーク]タブに移動します。
  2. リソースを右クリックして、Replay XHRを選択してリクエストを繰り返します。

再ロードを強制するためにキャッシュの無効化オプションが選択されていることを確認してください。

2
ivanhoe

このスクリプトをChromeコンソールにコピー＆ペーストすると、CSSスクリプトが3秒ごとに強制的にリロードされます。 CSSスタイルを改善するときに便利なことがあります。

var nodes = document.querySelectorAll('link');
[].forEach.call(nodes, function (node) {
    node.href += '?___ref=0';
});
var i = 0;
setInterval(function () {
    i++;

    [].forEach.call(nodes, function (node) {
        node.href = node.href.replace(/\?\_\_\_ref=[0-9]+/, '?___ref=' + i);
    });
    console.log('refreshed: ' + i);
},3000);
1
Martin Vseticka

まだ問題があります。

".. css？something = random-value"のようなパラメータを使用しても、私のカスタマーサポートでは何も変わりません。名前の変更のみが機能します。

別のファイルの名前を変更します。 IISでURL書き換えを使用しています。時々HeliconのIsapi Rewrite。

新しい規則を追加します。

+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css

注：名前と乱数を区別するために、大文字と小文字を区別して使用します。他に何かあるかもしれません。

例：

<link href="/styles/template_<% 
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>" 
type="text/css" />

（スタイルフォルダなし、パターンの名前の一部にすぎません）

コードを次のように出力します。

<link href="/styles/template_285316115328" 
rel="stylesheet" type="text/css">

次のようにリダイレクト

（R：1 =テンプレート）

/template.css

説明だけが長いです。

1
Jan Andersen

ページ全体を更新する必要があるのはなぜですか。ページをリロードせずにcssファイルのみを更新してください。たとえば、DBからの長い応答を待たなければならない場合に非常に役立ちます。 DBからデータを取得してページに入力したら、cssファイルを編集してChrome（またはFirefox）にリロードします。そのためには CSS Reloader extension をインストールする必要があります。 Firefox版もあります。

1
Evgeni Nabokov

私はこの簡単なトリックで解決しました。

<script type="text/javascript">
  var style = 'assets/css/style.css?'+Math.random();;
</script>

<script type="text/javascript">
  document.write('<link href="'+style+'" rel="stylesheet">');
</script>
0
Shahid Chaudhary

あなたがあなたのホスティング会社としてSiteGroundを使っていて、他の解決策がどれもうまくいかなかったならば、これを試してください：

CPanelから「SITE IMPROVEMENT TOOLS」に進み、「SuperCacher」をクリックします。次のページで、[Flush Cache]ボタンをクリックします。

0
Don

この問題は、Chromeを実行している人（Mac上）が突然CSSファイルの読み込みを停止した場合に発生します。 CMD + Rはまったく動作しませんでした。プロダクションシステムに恒久的なリロードを強いる上記の提案は嫌いです。

うまくいったのは、HTMLファイル内のCSSファイルの名前を変更すること（そしてもちろんCSSファイルの名前を変更すること）でした。これにより、Chromeは最新のCSSファイルを入手することを余儀なくされました。

0
Richard

Sublime Text 3を使用している場合は、ビルドシステムを使用してファイルを開くと最新バージョンが開き、[CTRL + B]を押してファイルを読み込む便利な方法が提供されます。

  1. 「ツール」へ

  2. マウスを「ビルドシステム」の上に置きます。表示されたリストの下部にある[新しいビルドシステム]をクリックします。

  3. 新しいビルドシステムファイルに次のように入力します。

    {"cmd": [ "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]}

**上記の最初の引用符で囲まれたパスが、コンピュータ上でchromeが配置されている場所へのパスである場合、単純にchromeの場所が見つからず、最初の引用符のセットのパスをあなたのコンピュータのクロム。

0
Shlok Natarajan

Ctrl + F5

Shift + F5

両方とも働く

0
Ashwin Balani

あなたの目標を達成するための最も簡単な方法は、新しいシークレットウィンドウを開くあなたのクロムで、またはFirefoxのプライベートウィンドウです。これはデフォルトではキャッシュしません。

これを開発目的に使用すると、プロジェクト内のコードを妨げるランダムキャッシュを挿入する必要がなくなります。

あなたがIEを使っているのであれば、神があなたを助けてくれるかもしれません！

0
Anarach

Safari 11.0での最も簡単な方法macOS SIERRA 10.12.6：Originからページをリロードすると、メニューのどこにあるのかを調べるのにヘルプを使うことができます。またはショートカットオプション（alt）+ command + Rを使うこともできます。

0
Rodolfo Pertuz