如何在Google Chrome中查看加载到页面中的CSS文件?我可以看到JS文件,但看不到CSS。
7gyucuyw1#
在Chrome开发者控制台中使用网络选项卡和CSS请求过滤器。
hsvhsicv2#
警告:此答案已过时!对于最新版本的Chrome,请查看Dr 1 Ku的答案。
在Chrome的“开发者工具”选项卡(CTRL + SHIFT + I)中,转到资源(您可能需要在该页面上启用资源跟踪),然后单击子选项卡样式表。这将显示该页面加载的所有css文件。
wpcxdonn3#
我想看看加载了哪些文件,右键点击页面上的空白区域,然后选择【查看页面源】。从这里,它会显示Chrome渲染的HTML页面。如果你在标题部分看你应该是一个列表的所有外部文件被调用以及,他们应该是超链接,只需点击其中任何一个和Chrome将显示该特定的文件在一个新的标签。
prdp8dxp4#
如果你有兴趣,有一种方法可以在JS中找到它们:(请使用现代浏览器)
var sts = document.styleSheets; var result = []; for (var i = 0; i < sts.length; i++) { var st = sts.item(i); if (st && st.href) { result.push(st.href.match(/\w*\.css/)); } } console.dir(result);
5jvtdoz25#
右键单击页面上的任何位置,然后选择“检查元素”。从那里,您将需要单击资源选项卡,并告诉Chrome是否应该始终启用该面板或仅为会话启用一次(选择您喜欢的选项)。进入后,您将在左侧看到所有文件。您可以通过单击右侧标题旁边的微小内容选项卡来查看内容。
6ojccjat6#
查看CSS Used“获取所选DOM及其后代使用的所有css规则“。我发现这有助于获取CSS并在代码编辑器中检查它。💡 温馨提示:
CSS Used
6条答案
按热度按时间7gyucuyw1#
在Chrome开发者控制台中使用网络选项卡和CSS请求过滤器。
hsvhsicv2#
警告:此答案已过时!对于最新版本的Chrome,请查看Dr 1 Ku的答案。
在Chrome的“开发者工具”选项卡(CTRL + SHIFT + I)中,转到资源(您可能需要在该页面上启用资源跟踪),然后单击子选项卡样式表。这将显示该页面加载的所有css文件。
wpcxdonn3#
我想看看加载了哪些文件,右键点击页面上的空白区域,然后选择【查看页面源】。从这里,它会显示Chrome渲染的HTML页面。
如果你在标题部分看你应该是一个列表的所有外部文件被调用以及,他们应该是超链接,只需点击其中任何一个和Chrome将显示该特定的文件在一个新的标签。
prdp8dxp4#
如果你有兴趣,有一种方法可以在JS中找到它们:
(请使用现代浏览器)
5jvtdoz25#
右键单击页面上的任何位置,然后选择“检查元素”。从那里,您将需要单击资源选项卡,并告诉Chrome是否应该始终启用该面板或仅为会话启用一次(选择您喜欢的选项)。进入后,您将在左侧看到所有文件。您可以通过单击右侧标题旁边的微小内容选项卡来查看内容。
6ojccjat6#
查看CSS Used“获取所选DOM及其后代使用的所有css规则“。
我发现这有助于获取CSS并在代码编辑器中检查它。
💡 温馨提示:
CSS Used
中的CSS复制到您的代码编辑器中,美化它,然后阅读!