メディアクエリの操作Chrome Devツール

Question

どこでも検索しましたが、探しているものが存在しない可能性があります。

私は、ウェブサイトの更新作業中、常にメディアクエリを追跡しています。要素のすべてのメディアクエリを表示する方法はありますか？

エミュレータを特定のデバイスに変更することはできますが、そのデバイスサイズに基づいてその要素のメディアクエリを表示することはできません。

私は多分これについての設定があると思っていましたが、私はそれを見つけることができません。

Google Chromeツールを使用してDOMで作業している要素に影響するすべてのメディアクエリを簡単に確認するにはどうすればよいですか？

の1-オープンクロムウェブツール、

2 - プレスエミュレータアイコン、

、3-プレス：

Answer 1

あなたは、ちょうどこの手順を実行することができますオプションボタン⋮は非常に右上ページ（i nはブックマークバー）の下に黒いバー、

、4-押して "ショーメディアクエリは"、

あり

5 - あなたはすべてのメディアのブレークポイントを見ることができ、

、6- を右クリックしますあなたが望むブレークポイントに「ソースコードで公開」を押すと、CSSが表示されます。

参考：より良い、について説明するため https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#media-queries

：