12

ドロップダウンメニューをデバッグしようとしています。まだウェブサイトにアクセスできないので、Google Chromeデベロッパーツールを使用して解決策を見つけようとしています。このツールをテストして、アクセスしたときにサイトに適用できます。それはCSSとおそらくいくつかのJavascriptの変更だけです。

問題は、開発ツールを介していくつかの新しいCSSスタイルのルールを適用したいのですが、Webページを更新してもこれらのルールを維持したいということです。スタイルを適用して永続化する方法はありますか？リソースのセクションを見てきましたが、このようなことができることを示唆しています（おそらく、ローカルスタイルシートをリソースとして追加することで？）が、その方法がわかりません。

誰かが私をここで正しい方向に向けることができますか？

どうもありがとうございました...

4

6 に答える 6

10

chromeのgreasemonkeyであるTampermonkeychrome拡張機能をインストールできます。また、 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);
    });
})();
于 2012-10-02T22:41:46.057 に答える
5

CSSをオーバーライドするための私のお気に入りのツールは、スタイリッシュなhttps://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffeです。

これは、Webページのデバッグと拡張に役立ちます。既存のスタイルの大規模なライブラリもあり、拡張メニューからそれらへの便利なリンクがあります。これらのように、StackOverflow.comの場合

于 2013-04-26T13:53:28.107 に答える
3

Chromeのバージョン65以降、これはプラグインなしで実行できます。開発ツールで、 [ソース]-> [オーバーライド]タブに移動し、Chromeが永続的な変更を保存するローカルフォルダーを選択します。DOMツリーの変更については、 [要素]タブではなく[ソース]を使用してください。

ローカルオーバーライドのリストについては、⠇->その他のツール->変更に移動してください。

詳細はこちら。

于 2020-04-11T20:31:06.267 に答える
2

提案をありがとう。私は両方を試しましたが、それらに小さな問題がありました（個人的には特に簡単でも直感的でもありません）。代わりに、私はTincrに出くわしましたが、これがより適していることがわかりました。皆さん、ありがとう。

于 2012-10-04T08:48:52.433 に答える
1

サイトの永続的なカスタムCSSをすばやく作成して保存できる拡張スタイルボットを試してください。

于 2012-10-02T14:58:13.367 に答える
0

ホットフィックスと呼ばれる拡張機能もあります。ChromeDevToolsからGitHubに直接変更を保存できます。

于 2013-04-05T00:04:46.697 に答える