web-dev-qa-db-ja.com

element.styleのOriginソースを見つけるにはどうすればよいですか?つまり、どのJSまたはjQファイルがそれを注入しているのか。オーバーライドするのではなく、修正したい

問題のスタイルは、HTMLまたはCSSにハードコードされていません。これらは、JSファイルまたはjQファイルのいずれかを介して動的に追加されています。私はいつもこれに遭遇します。私はいつも、それが見つかるまですべてのファイルを読んでしまうだけです。開発ツールを使用するより速い方法はありますか?私はnot!importantタグでオーバーライドしたいのですが、見つけたいです原点とそれを修正します。

一部の人々はこの解決策を指摘しています: JavascriptをデバッグするためにJavascriptを適用したインラインスタイルを見つける しかし、これは問題の原因となっているコードスニペットを示しているので、私の質問には答えませんが、私は探していますソースファイル名および/またはパス。

7
desanddev

ChromeDevtools。Chromeでは、要素を右クリックして[検査]すると、[計算済み]タブにスタイルが表示されます。]を使用すると、適用されているスタイルを見つけることができます。どのスタイルが要素に影響を与えているかを確認する必要があります。

example of computed tab

挿入されたJavaScriptを探している場合は、これを試してください 以前に尋ねられた質問の回答 。ここでは、Chrome DevtoolsDOMブレークポイントを使用してcssを検索します。

画像の例: enter image description here

DevToolsが[ソース]タブに移動すると、最初に実行されるファイルが表示されます。ただし、[コールスタック]ドロップダウンメニューをクリックすると、影響を与えるすべてのファイルが表示され、それらをクリックすると、問題の原因となっているファイルを見つけることができます。適切なファイルに到達すると、DevToolsはページに影響を与えているコードを強調表示します。

2
Robotnicka