在IE11 F12 Developer工具中查看CSS样式表

Question

在以前版本的IE开发人员工具中，您可以在调试器中打开CSS文件的来源。

这最常用于验证它们是否已经被正确下载/引用，即如果样式表的请求返回404错误，那么我的样式的路由原因未被应用。

但是从IE 11开始，调试器不再列出CSS文件，因此我无法使用它来查看其源并验证它们。

我知道我可以通过分析器来完成这项工作 - 但这需要启动一个配置文件跟踪并重新加载页面，这不太容易实现简单的工作流程。 （不是频繁锁定F12工具似乎在任何配置文件选项卡上使用）

是否仍然通过开发工具来查看CSS文件的来源？

Answer 1

我不相信。 有一个Connect问题报告了这个问题，MS表示他们已经在他们的待办事项上发布了这个“潜在的”未来版本。 IE11：新F12开发者工具中缺少CSS选项卡

更新：微软已经通过UserVoice网站宣布他们计划将其恢复到Internet Explorer 。

Answer 2

缺少CSS选项卡，调试器也不会列出CSS文件。

但是，如果您在dom资源管理器中找到了一个从css文件应用样式的元素，则可以单击该文件名并打开整个文件。

Answer 3

今天我很惊讶地发现了这一点，并使用了Chrome F12工具 - 在左侧面板的资源选项卡下，您可以扩展框架以访问您的页面的图像，脚本和样式表 - 当然，CSS也属于最后一个。

毫无疑问，这只有在您访问Chrome并且该网站支持Chrome时才有用。

Answer 4

在开发人员工具中，转到“网络”选项卡。 单击箭头（当您将鼠标悬停在箭头上时，它将显示“启用网络流量捕获”）。 它将变成一个正方形，表示它正在捕获网络流量。 刷新页面。 单击“类型”按类型排序并查找“text / css”。 双击该文件。 单击“响应正文”。 您将在那里看到CSS内容。

要手动添加样式，请转到DOM Explorer。 单击网页中的元素，它会将您带到网页的该部分。 您可以在DOM资源管理器或左侧窗口中为元素添加样式，您将看到“内联样式”（如果没有CSS类）或者您将看到“内联样式”以及CSS类及其详细信息。 您可以单击其中进行更改。