如何使用 Chrome 開發者工具保留 CSS 更改

Question

我正在嘗試調試下拉菜單。 我還沒有訪問該網站的權限，所以我正在嘗試通過 Google Chrome 開發人員工具找到一個解決方案，我可以測試該解決方案，然后在我獲得訪問權限時將其應用到該網站。 這只是 CSS，也許還有一些 Javascript 更改。

問題是我想通過開發工具應用一些新的 CSS 樣式規則，然后在刷新網頁時保留這些規則。 有沒有辦法可以應用樣式並使它們持久化？ 我看過資源部分，哪種建議我可以做這樣的事情（也許通過添加本地樣式表作為資源？），但我不知道如何去做。

有人能在這里指出我正確的方向嗎？

非常感謝各位...

Answer 1

您可以安裝Tampermonkey chrome 擴展程序，它是 chrome 的greasemonkey，您可以加載可以更改 css的用戶腳本並使用 jquery 修改頁面，並且此更改是永久性的，因為腳本將被加載並在您訪問時自動執行您在@match規則中設置的站點，請參閱以下僅更改頁面背景顏色的用戶腳本：

// ==UserScript==
// @name       yourscript
// @namespace  http://yeeeee/
// @version    0.1
// @description  Change bacground color of page
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @match      http://yourtargetsite.com/*
// @copyright  2012+, Me and Brothers
// ==/UserScript==

(function () {
    $(document).ready(function(){
        style = '<style type="text/css"> body {background-color: #CC7777 ! important;} </style>';
        $('head').append(style);
    });
})();

Answer 2

我最喜歡的 CSS 覆蓋工具是 Stylish https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

它對於調試和增強任何網頁很有用。 還有一個很大的現有樣式庫，可以從擴展菜單方便地鏈接到它們。 像這些，對於StackOverflow.com

Answer 3

從 Chrome 65 版開始，這可以在沒有插件的情況下完成。 在開發人員工具中，轉到Sources -> Overrides選項卡並選擇任何本地文件夾，chrome 應將持久更改保存到該文件夾​​中。 對於 DOM 樹中的更改，請使用Sources而不是Elements選項卡。

有關本地覆蓋的列表，請轉到⠇ -> More tools -> Changes 。

更多信息在這里。

Answer 4

感謝您的建議。 我嘗試了兩者，但對它們有一些小問題（對我個人來說不是特別容易或直觀）。 相反，我偶然發現了Tincr ，我發現它更合適。 謝謝各位。

Answer 5

試試擴展stylebot ，它允許您為站點快速創建和保存持久的自定義 CSS。

Answer 6

還有一個名為hotfix的擴展。 它允許您將 Chrome Dev Tools 中的更改直接保存到 GitHub。