ディベロッパーツールのCSSのファイル確認がしたい

ruby on rails でアプリを作り、awsを使ってサーバーへデプロイしました

スマホ用にcssを編集しているところですが

本環境とローカルとcssの違いがあり困っています。
前の質問でdiffの存在を教えてもらい、
ファイル確認をしてるところです。

google chromeの開発ツールでcssのファイル元を確認したいのですが、
ローカルは、ファイル確認でき、
本環境ではファイルの確認がわかりませんでした

ローカル環境

本環境

本環境のファイル元が（各クラスの右側）

application...○○○○○○○○○○○○

で、よくわからないところにソースがいきます

これはどうすれば、ファイル元確認できるのでしょうか

他のサイトの開発ツールを参照すると
application...はです、おそらくローカルと同じであろう
ファイル名が記載されていて、不思議に思いました。

ディベロッパーツールの使い方を調べましたが
わかりませんでした。

css苦手なのと、ディベロッパーツールがいまいちわかってないので、

どなたか教えていただけたらと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

HTML内でCSSを読み込んでいるはずなので、HTMLのソースを開き(ページ右クリックとか…)そこからたどれば良いでしょう。

投稿2020/03/10 08:15

Takumiboo

総合スコア2534

marco

2020/03/10 09:18

無知で申し訳ないのですが、<link rel="stylesheet" href="***">はヘッダーの中に書かれてる部分のことでしょうか。。。

Takumiboo

2020/03/10 09:19

はい、<head></head>の中のことですね。本番環境をブラウザで表示している状態でソースを表示してみてください。

marco

2020/03/10 09:28

本環境とローカルと違いました。。。本環境は　<link rel="stylesheet" media="all" href="/assets/application-**************.css" data-turbolinks-track="reload">でローカルが、<link rel="stylesheet" media="all" href="/assets/trix/dist/trix.self-d89e353e1d5f10e9a4f0f5e3423003db8efb3fe4c13d1275087edb8df4c6e364.css?body=1" data-turbolinks-track="reload"> <link rel="stylesheet" media="all" href="/assets/actiontext.self-1238a717890d85b28073723713c39dc85d97fd973d4f0687007ff1a36f1ab802.css?body=1" data-turbolinks-track="reload"> <link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload"> 以下それぞれのcssファイルでした、本環境とローカルと違ってました。ということは、ファイル構成が違ってたということでしょうか、、、、、

Takumiboo

2020/03/10 09:33

そこの記述自体はassets precompileしている時点で変わっていると思います。あとはその中身の問題なので、それぞれのCSSが本環境とローカルでどう違うのか、という話になってきます。

marco

2020/03/10 10:47

なるほど。反映されてる箇所と違う箇所があるので、一つずつ解決してみます。。ありがとうございます。

行動規範の内容に同意します