如何在浏览器DevTools中查看外部CSS文件？

方法一：从元素样式追踪到外部文件 #

• 打开DevTools：按F12，或者右键页面空白处选「检查」，也可以用快捷键Ctrl+Shift+I（Windows/Linux）、Cmd+Opt+I（Mac）。
• 切换到Elements（Chrome/Edge）或检查器（Firefox）面板，点击页面上你想查看样式的元素并选中它。
• 查看右侧的Styles面板，里面列出了该元素的所有生效样式规则。每个规则的末尾会标注对应的外部CSS文件名和行号（比如global.css:45），直接点击这个文件名就能打开对应的CSS文件查看完整内容。

方法二：直接浏览所有加载的外部CSS文件 #

• 切换到Sources（Chrome/Edge）或调试器（Firefox）面板。
• 在左侧的文件目录树里，找到当前页面域名对应的文件夹，展开后就能看到所有通过<link>标签引入的外部CSS文件；嫌找起来麻烦的话，按Ctrl+P（Windows/Linux）或Cmd+P（Mac）调出搜索框，输入CSS文件名的关键词就能快速定位打开。
• 另外也可以用Network面板：切换到Network面板，勾选顶部的「CSS」筛选器，刷新页面后，所有加载的外部CSS文件都会列出来，点击文件名就能查看文件内容。

小技巧 #

在Sources/调试器面板打开的CSS文件里，你可以直接编辑代码，修改后的样式会实时同步到页面上（刷新页面后修改会失效，除非你本地替换了原文件）。

内容的提问来源于stack exchange，提问作者GetOutOfThatGarden-