web-dev-qa-db-ja.com

chrome開発者ツールでCSSを挿入しますか？

表示しているページのどこにCSSを追加できますか？スタイルを1つの要素に直接追加したくありません。サイトのstyle.cssを編集する前に、ページに「ドキュメント」を追加して変更をデバッグします。

ここでは、「chrome拡張機能からCSSを挿入する」ことについて多くの質問がありますが、具体的には「Chrome Developer Tools」という方法でやりたいと思います。

cssgoogle-chromedeveloper-tools
21
Dan Bolser

これはあなたが望んでいることですか？：「Chromeでソースファイルを直接編集する方法」 http://www.sitepoint.com/edit-source-files-in-chrome/

1
simonbell

動作するかどうかはわかりませんが、試してみる必要があります。

押す F12/（Cmd + opt + I Macの場合）、デベロッパーコンソールを開き、[コンソール]タブに移動します。

次のコードをコピーして貼り付けます（パスを編集します）：

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

または、1つのプロパティを編集して、inspector-stylesheet.cssをChromeで作成し、CSSソースをそこにコピーします。

32
larssy1

このような単純なフレームワークにとらわれないワンライナーのようなものはありませんか？

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

魅力のように動作するようです...

3
Jonas Carlbaum

そもそも、これが私が教育と開発作業にFirefoxを使用する理由の1つです。答えは組み込まれています。

上記の回答のバリエーションとして、最新のJavaScriptを使用して、次のようにハードコーディングされたスタイルを追加できます。

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

または、次のように外部スタイルシートを追加できます。

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

beforeend引数は、挿入されたCSSが以前にロードされたスタイルをオーバーライドできるようにするためのものです。

これを繰り返し行う場合は、 Bookmarklet Crunchinator などを使用して、ブックマークレットとして追加できます。

この手法は、JavaScriptクラスで教えているものと似ています。ここでは、afterbeginを使用してデフォルトのCSSを挿入しますが、ユーザースタイルシートでデフォルトをオーバーライドできます。

3
Manngo

それを行うには複数の方法があり、それらも非常に簡単です。

最初の方法、インスペクタースタイルシート：

検査要素を開く（F12 または Ctrl+ Shift+I）

Elements tab（Ctrl+ Shift+ P そしてshow elements）と入力します。まだそこにいなければ、Stylesタブを見てください。今すぐ右隅にあります+があります。アイコン、クリック（または自動的に追加されない場合はそのアイコンを長押しinspector-stylesheet）現在ハイライトされている要素のセレクター、セレクターの横にリンク/ボタンがありますinspector-stylesheet、クリック、スタイルを追加できるウィンドウが表示されます。

2番目の方法、HTMLとして編集

検査要素を開く（F12 または Ctrl+ Shift+I）

要素パネルに移動（Ctrl+ Shift+ p 要素パネルの表示）と入力します。

head要素までスクロールし、要素を右クリックしてHTMLとして編集を選択し、その要素の下部に移動します（Ctrl+ End）、<style></style>要素は、その要素にスタイルを追加し、ヒットします Ctrl+ Enter。

番目の方法、スニペット：

検査要素を開く（F12 または Ctrl+ Shift+I）

ソースタブに移動し、スニペットタブに移動し、+新しいスニペットをクリックして、任意の名前を付けて、これを追加します。

新しいスニペットを作成 Ctrl+ Shift+ P タイプ新しいスニペットを作成 hit Enter 、必要に応じてスニペットの名前を変更し、これを追加します（スタイルを編集します）。

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

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

保存して実行します（Ctrl+Enter）。

これを実行してスニペットを実行することもできます。 Ctrl+ p タイプ！保存したスニペットが表示されます。実行したいスニペットを選択してください。

スニペットを編集または表示するには、 Ctrl+ Shift+ P タイプスニペットを表示。

FireFoxではさらに簡単です：

検査要素を開く（F12）

スタイルエディターに移動し、+アイコンをクリックすると、スタイルを編集できます。 +の隣のアイコンをクリックするだけで、スタイルをインポートすることもできます。

2
Harry

これは動作するはずです（コンソールに貼り付け、必要に応じて最後の行の引数を編集します）：

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

開発ツールの[ソース]タブに移動し、左の列を右クリックして、フォルダーをワークスペースに追加し、ファイルエクスプローラーを使用してcssファイルを含むフォルダーを選択します。変更を許可する必要があります。これを行うと、ソースツリーにフォルダーが表示されます（ソースタブでファイルシステムタブを選択してください）、フォルダーを開いてファイルを見つけ、cssファイルを右クリックして選択しますネットワークリソースにマップします。ファイルをマップすると、ワークスペースで開いて表示でき、そのファイルからの変更はページスタイルに影響します。したがって、基本的には、スタイルが提供されているスタイルに優先します。

0
Mike Baker