使用 chrome 開發者工具注入 CSS？

Question

在哪里可以將 CSS 添加到我正在查看的頁面？ 我不想直接為一個元素添加樣式，我想在編輯站點的 style.css 之前向頁面添加一個“文檔”以調試更改。

請注意，這里有很多關於“從 chrome 擴展程序注入 CSS”的問題，但特別是我想通過“Chrome 開發人員工具”來完成。

Answer 1

我不確定它是否有效，但你必須嘗試。

按F12 /（在 Mac 上為Cmd + opt + I ）打開開發者控制台並轉到控制台選項卡。

復制粘貼以下代碼（編輯路徑）：

$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');

或者，您可以編輯一個屬性，以便 Chrome 創建 inspector-stylesheet.css，然后將您的 CSS 源復制到那里。

Answer 2

有多種方法可以做到這一點，而且它們也非常簡單。

---

第一種方式，檢查器樣式表：

打開檢查元素（ F12或Ctrl + Shift + I ）

轉到元素選項卡（ Ctrl + Shift + P並鍵入show elements ），如果您還沒有在那里，請查看樣式選項卡，現在在右上角看到，會有一個+圖標，單擊它（或者長按該圖標，如果它不會自動添加檢查器樣式表），它會添加當前突出顯示元素的選擇器，就在選擇器旁邊，會有一個鏈接/按鈕檢查器樣式表，點擊它，它會帶你一個窗口，你可以在那里添加樣式。

---

第二種方式，編輯為 HTML

打開檢查元素（ F12或Ctrl + Shift + I ）

轉到元素面板（ Ctrl + Shift + p並鍵入show element panel ）。

滾動到head元素，右鍵單擊該元素並選擇Edit as HTML ，轉到該元素的底部（ Ctrl + End ），添加您的<style></style>元素，在該元素中添加您的樣式，然后按 Ctrl +輸入。

---

第三種方式，片段：

打開檢查元素（ F12或Ctrl + Shift + I ）

轉到 Source選項卡，轉到 Snippets選項卡，單擊 + New snippet ， 隨意命名，然后添加：

創建新代碼段Ctrl + Shift + P類型創建新代碼段點擊Enter ，如果需要，重命名代碼段，然后添加（編輯樣式）：

(function(){
    let style = `<style>
/*change your style here*/
body{
        display:none;
    }
</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

保存它，運行它（ Ctrl + Enter ）。

您還可以通過執行以下操作來運行代碼片段： Ctrl + p type ！ 它將顯示您保存的片段，選擇您要運行的片段。

要編輯或查看您的片段，請按 Ctrl + Shift + P鍵入show snippets 。

---

在 FireFox 中，它更容易：

打開檢查元素（ F12 ）

轉到樣式編輯器，單擊+圖標，您將能夠編輯樣式； 您還可以導入樣式，只需單擊+旁邊的圖標即可。

Answer 3

首先，這就是我使用 Firefox 進行教學和我自己的開發工作的原因之一。 答案是內置的。

作為上述答案的變體，使用現代 JavaScript，您可以添加如下硬編碼樣式：

document.head.insertAdjacentHTML('beforeend','<style> … </style>');

或者您可以添加一個外部樣式表，如下所示：

document.head.insertAdjacentHTML('beforeend','<link rel="stylesheet" href="…">');

beforeend參數是為了幫助注入的 CSS 覆蓋以前加載的樣式。

如果您要重復執行此操作，則可以使用Bookmarklet Crunchinator 之類的工具將其添加為書簽。

該技術類似於我在 JavaScript 課程中教授的技術，我使用afterbegin注入一些默認 CSS，但允許用戶樣式表覆蓋默認值。

Answer 4

為什么不是像這樣的一種簡單的框架不可知單行呢？

document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('rel', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())

似乎很有魅力……

Answer 5

這應該可以工作（粘貼到控制台，根據需要編輯最后一行中的參數）：

(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');

Answer 6

這是您追求的嗎？：“如何直接在 Chrome 中編輯源文件” http://www.sitepoint.com/edit-source-files-in-chrome/

---

從那篇文章：

第 1 步：啟動開發人員工具。 轉到查看 -> 開發人員 -> 開發人員工具。 導航到“來源”

步驟 2：單擊文件系統選項卡，然后單擊 + 添加文件夾到工作區。 系統會提示您定位工作文件夾，Chrome 會要求您確認是否允許訪問。

第 3 步：編輯並保存您的代碼並刷新瀏覽器以查看您的更改

Answer 7

轉到開發工具中的源選項卡並右鍵單擊左列，然后將文件夾添加到工作區並使用文件資源管理器選擇包含您的 css 文件的文件夾。 您必須允許進行更改，一旦您這樣做，您將在源代碼樹中看到您的文件夾（確保您在源選項卡下選擇文件系統選項卡），打開您的文件夾找到該文件並右鍵單擊您的 css 文件並選擇映射到網絡資源。 映射文件后，您可以在工作區中打開並查看它，並且對該文件所做的任何更改都會影響頁面樣式。 所以基本上你的風格會超過服務的風格。

Answer 8

您可以使用 Chrome Devtools 中的代碼段注入 CSS。 保存並執行代碼片段，然后在控制台或另一個代碼片段中調用它：

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; }');

Answer 9

自 2018 年在 Chrome (65) 中，瀏覽器的集成 DevTools 具有稱為Local Overrides1的功能。 因此，不需要像 StyleBot、Stylish 或 Greasemonkey 這樣的插件或擴展。

本地覆蓋允許在任何實時站點上重寫 CSS、JS 和 DOM。 更改保存在本地文件夾中，它們會覆蓋實​​時環境的內容。

這可以在Developer Tools > Sources >> Overrides下訪問

這允許您選擇包含 CSS 和 JS 的自定義本地文件夾，這些文件夾將覆蓋當前網站自己的 CSS 和 JS。

Answer 10

AWD AW DAWD Q3 DQ WD AWDQ3R 2 2WA D34T W53 4YQ1