在哪里可以将 CSS 添加到我正在查看的页面？我不想直接向一个元素添加样式，我想在编辑网站的 style.css 之前向页面添加一个“文档”以调试更改。
请注意，这里有很多关于“从 chrome 扩展程序注入 CSS”的问题，但具体来说，我想通过“Chrome 开发人员工具”来解决。
【问题讨论】：
标签： css google-chrome developer-tools
自 2018 年以来，Chrome (65) 中的浏览器集成 DevTools 具有称为 Local Overrides 1 的功能。因此，不需要像 StyleBot、Stylish 或 Greasemonkey 这样的附加组件或扩展。
本地覆盖允许在任何实时站点上重写 CSS、JS 和 DOM。更改保存在本地文件夹中，它们会覆盖实时环境的内容。
这可以在Developer Tools > Sources >> Overrides下访问
这允许您选择一个自定义本地文件夹，其中包含将覆盖当前网站自己的 CSS 和 JS 的 CSS 和 JS。
【讨论】：
这就是你所追求的吗？：“如何在 Chrome 中直接编辑源文件”http://www.sitepoint.com/edit-source-files-in-chrome/
来自那篇文章：
第 1 步：启动开发者工具。转到查看 -> 开发人员 -> 开发人员工具。导航到“来源”
第 2 步：单击文件系统选项卡，然后单击 + 将文件夹添加到工作区。系统会提示您找到工作文件夹，Chrome 会要求您确认是否允许访问。
第 3 步：编辑并保存您的代码并刷新浏览器以查看您的更改
【讨论】：
首先，这是我使用 Firefox 进行教学和自己的开发工作的原因之一。答案是内置的。
作为上述答案的变体，使用现代 JavaScript，您可以添加硬编码样式，如下所示：
document.head.insertAdjacentHTML('beforeend','<style> … </style>');
或者您可以按如下方式添加外部样式表：
document.head.insertAdjacentHTML('beforeend','<link rel="stylesheet" href="…">');
beforeend 参数是为了帮助注入的 CSS 覆盖之前加载的样式。
如果您要重复执行此操作，则可以将其添加为书签，使用 Bookmarklet Crunchinator 之类的内容。
该技术类似于我在 JavaScript 课程中教授的技术，我使用 afterbegin 注入一些默认 CSS，但允许用户样式表覆盖默认值。
【讨论】：
rel="styleshet"。
您可以在 Chrome Devtools 中使用 sn-ps 注入 CSS。保存并执行 sn-p，然后在控制台或另一个 sn-p 中调用它：
function insertCss(code) {
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) { // IE
style.styleSheet.cssText = code;
} else { // Other browsers
style.innerHTML = code;
}
document.getElementsByTagName("head")[0].appendChild( style );
}
// run the snippet as follows:
insertCss('span { color: red !important; }');
【讨论】：
为什么不像这样一种简单的框架无关的单线？
document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('rel', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())
看起来像一个魅力......
【讨论】：
有多种方法可以做到这一点，而且它们也很容易。
第一种方式，inspector-stylesheet：
打开检查元素（F12 或 Ctrl+ Shift+I）
转到元素选项卡（Ctrl+ Shift+ P并输入显示元素），如果您还没有，请查看 Styles 选项卡，现在看到在右上角，会有一个 + 图标，单击它（或长按图标如果没有自动添加inspector-stylesheet），它会添加当前高亮元素的选择器，就在选择器旁边，会有一个链接/按钮inspector-stylesheet，点击它，它会带你一个窗口，你可以在其中添加样式。
第二种方式，编辑为 HTML
打开检查元素（F12 或 Ctrl+ Shift+I）
转到元素面板（Ctrl+ Shift+ p 并键入显示元素面板）。
滚动到 head 元素，右键单击该元素并选择 Edit as HTML，转到该元素的底部 (Ctrl+ End)，添加您的<style></style> 元素，在该元素中添加您的样式，然后按Ctrl+ Enter。
第三种方式，片段：
打开检查元素（F12 或 Ctrl+ Shift+I）
进入Source标签，进入Snippets标签，点击+ New sn-p，命名无论你想要什么，然后添加：
Create new sn-p Ctrl+ Shift+ P type Create new sn-p hit Enter ，如果需要，重命名 sn-p，然后添加（编辑样式）：
(function(){
let style = `<style>
/*change your style here*/
body{
display:none;
}
</style>`;
document.head.insertAdjacentHTML("beforeend", style);
})();
保存，运行（Ctrl+Enter）。
您也可以通过以下方式运行 sn-ps：Ctrl+ p 键入 ! 它将显示您保存的 sn-ps，选择你要运行的那个。
要编辑或查看您的 sn-ps，Ctrl+ Shift+ P 键入 show sn-ps .
在 FireFox 中更简单：
打开检查元素 (F12)
进入样式编辑器，点击+图标，即可编辑样式；您也可以导入样式，只需单击 + 旁边的图标。
【讨论】：
转到开发工具中的源选项卡并右键单击左列，然后将文件夹添加到工作区并使用文件资源管理器选择包含您的 css 文件的文件夹。您必须允许进行更改，一旦您这样做，您将在源代码树中看到您的文件夹（确保您在源选项卡下选择文件系统选项卡），打开您的文件夹找到文件并右键单击您的 css 文件并选择映射到网络资源。映射文件后，您可以在工作区中打开并查看它，并且从该文件中所做的任何更改都会影响页面样式。所以基本上你的风格会覆盖服务的风格。
【讨论】：
我不确定它是否有效，但你必须尝试。
按 F12/ (Cmd + opt + I 在 Mac 上) 打开开发者控制台并转到控制台选项卡。
复制粘贴以下代码（修改路径）：
$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');
或者，您可以编辑一个属性，以便由 Chrome 创建inspector-stylesheet.css，然后复制您的 CSS 源代码。
【讨论】：
这应该可以工作（粘贴到控制台，根据需要在最后一行编辑参数）：
(function(i,n,j,e,c,t,css){
css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;
t.insertAdjacentElement('beforeend',css);})
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','head');
这将插入一个<link>
带有一个 href //fonts.googleapis.com/css?family=Roboto
收盘前</head>
如果您尝试添加 css 文件的文档中没有 head 标签，请尝试将 body 作为最后一个参数：
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body');
【讨论】：