ほとんどのWeb開発者と同様に、マークアップがどのように構築されているかを確認するために、Webサイトのソースを時々見たいと思います。FirebugやChrome Developer Toolsなどのツールを使用すると、コードを簡単に検査できますが、分離されたセクションをコピーしてローカルで操作したい場合、個々の要素とそれに関連付けられているすべてのCSSをコピーするのは面倒です。そしておそらく、ソース全体を保存し、無関係なコードを削除するのと同じくらい多くの作業が必要です。

Firebugでノードを右クリックして、[このノードのHTML + CSSを保存する]オプションがあると便利です。そのようなツールはありますか？FirebugまたはChromeデベロッパーツールを拡張してこの機能を追加することはできますか？

SnappySnippet

ようやくこのツールを作成する時間を見つけました。SnappySnippetはGithubからインストールできます。指定された（最後に検査された）DOMノードからHTML + CSSを簡単に抽出できます。さらに、CodePenまたはJSFiddleにコードを直接送信できます。楽しい！

その他の特徴

• HTMLをクリーンアップします（不要な属性を削除し、インデントを修正します）
• CSSを最適化して読みやすくします
• 完全に構成可能（すべてのフィルターをオフにすることができます）
• ::beforeおよび::after擬似要素で動作します
• BootstrapとFlat-UIプロジェクトのおかげで素晴らしいUI

コード

SnappySnippetはオープンソースであり、GitHubでコードを見つけることができます。

実装

私はこれを行う間に多くのことを学んだので、私が経験した問題のいくつかとそれらに対する私の解決策を共有することに決めました、多分誰かがそれを面白いと思うでしょう。

最初の試み-getMatchedCSSRules（）

最初に、元のCSSルール（WebサイトのCSSファイルから取得）を取得しようとしました。驚くべきことに、これはのおかげで非常に簡単ですがwindow.getMatchedCSSRules()、うまくいきませんでした。問題は、ドキュメント全体のコンテキストでは一致していたが、HTMLスニペットのコンテキストでは一致しなくなったHTMLおよびCSSセレクターの一部しか取得していないことでした。セレクターの解析と変更は良い考えのようには思えなかったので、私はこの試みをあきらめました。

2回目の試行-getComputedStyle（）

次に、@ CollectiveCognitionが提案したものから始めました- getComputedStyle()。ただし、すべてのスタイルをインライン化するのではなく、CSSフォームのHTMLを分離したかったのです。

問題1-CSSをHTMLから分離する

ここでの解決策はあまり美しくありませんでしたが、非常に簡単でした。選択したサブツリーのすべてのノードにIDを割り当て、そのIDを使用して適切なCSSルールを作成しました。

問題2-デフォルト値でプロパティを削除する

ノードへのIDの割り当ては適切に機能しましたが、CSSルールのそれぞれに約300のプロパティがあり、CSS全体を判読できないことがわかりました。は、指定された要素に対して計算されたすべての可能なCSSプロパティと値
をgetComputedStyle()返すことがわかりました。それらのいくつかは空であり、いくつかはブラウザのデフォルト値を持っていました。デフォルト値を削除するには、まずブラウザーからそれらを取得する必要がありました（各タグには異なるデフォルト値があります）。解決策は、Webサイトからの要素のスタイルを、空のに挿入された同じ要素と比較することでした<iframe>。ここでのロジックは、空のにはスタイルシートがない<iframe>ため、そこに追加した各要素にはデフォルトのブラウザースタイルしかありませんでした。このようにして、重要ではないプロパティのほとんどを取り除くことができました。

問題3-省略プロパティのみを保持する

次に気付いたのはborder: solid black 1px、同等の省略形を持つプロパティが不必要に印刷されたということです（たとえばborder-color: black;、border-width: 1pxitd があり、次にそれがありました）。
これを解決するために、簡単な同等物を持つプロパティのリストを作成し、結果からそれらを除外しました。

問題4-接頭辞付きのプロパティの削除

各ルールのプロパティの数は、前の操作後に有意に低かったが、私はたくさんの持っていた敷居は検出されませんでした-webkit-（私は聞いたことがないという接頭辞プロパティを-webkit-app-region？-webkit-text-emphasis-position？）。
これらのプロパティのいくつかは有用であると思われたため（等）-webkit-transform-origin、これらのプロパティのいずれかを保持する必要があるかどうか疑問に思いました-webkit-perspective-origin。ただし、これを確認する方法はわかりません。また、ほとんどの場合、これらのプロパティは単なるゴミであることがわかっていたため、すべて削除することにしました。

問題5-同じCSSルールを組み合わせる

私が見つけた次の問題は、同じCSSルールが繰り返し繰り返されることです（たとえば<li>、まったく同じスタイルのそれぞれに対して、作成されたCSS出力に同じルールがあった）。
これは、ルールを互いに比較し、まったく同じプロパティと値のセットを持つルールを組み合わせることだけの問題でした。その結果、#LI_1{...}, #LI_2{...}私が得たのではなく#LI_1, #LI_2 {...}。

問題6-HTMLのインデントをクリーンアップして修正する

結果に満足していたので、HTMLに移動しました。これは混乱のように見えました。主に、outerHTMLプロパティがサーバーから返されたとおりにフォーマットされているためです。
HTMLコードがouterHTML必要とする唯一のものは、単純なコードの再フォーマットでした。これはすべてのIDEで利用できるものなので、まさにそれを行うJavaScriptライブラリがあることを確信しました。そして、私は正しかったことがわかりました（jquery-clean）。しかも、私は不要な属性除去、余分な（持っているstyle、data-ng-repeatなど）。

問題7-CSSを壊すフィルター

状況によっては、上記のフィルターによってスニペットのCSSが壊れる可能性があるため、これらはすべてオプションにしています。設定メニューから無効にできます。

私は当初、Chrome（またはFireFox）ソリューションを探していたときにこの質問をしましたが、Internet Explorer開発者ツールでこの機能を偶然見つけました。私が探しているもののほとんど（JavaScriptを除く）

結果：

Webkitブラウザー（FireBugについては不明）を使用すると、要素のHTMLを簡単にコピーできます。これは、プロセスの一部です。

要素のHTMLをコピーする前にこれを（JavaScriptコンソールで）実行すると、指定された親要素のすべての計算されたスタイルとすべての子要素が、HTMLの一部として使用できるインラインスタイル属性に移動します。 。

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

これは完全なハックであり、多くの「ジャンク」CSS属性を通り抜けることができますが、少なくともあなたは始めるべきです。

私は何年も前に同じ目的でこのツールを作成しました：http :
//www.betterprogramming.com/htmlclipper.html

あなたはそれを使用して改善することを歓迎します。

これはスクラップブックと呼ばれるFirebugプラグインで実行できます

設定でJavaScriptオプションを確認できます

編集：

これも役立ちます

Firequarkは、Firebugの拡張機能であり、HTML画面のスクレイピングのプロセスを支援します。Firequarkは、Firebug（FirefoxのWeb開発プラグイン）を使用して、Webページから単一または複数のHTMLノードのCSSセレクターを自動的に抽出します。生成されたcssセレクターは、情報を抽出するためのScrapiなどのHTMLスクリーンスクレイパーへの入力として指定できます。Firequarkは、HTML画面スクレイピングを使用するためのCSSセレクターの能力を発揮するように構築されています。

divclipは FlorentinのSardan年代の更新版です htmlclipper

最新の機能拡張：ES5、HTML5、スコープ付きCSS ...

あなたはプログラムで様式化されたdivを抽出することができます：

var html = require("divclip").bySel(".article-body");
console.log(html);

楽しい。

プラグインは必要ありません。Internet Explorer 11のネイティブ開発者ツールを使用して、ワンクリックで簡単に実行できます。要素を右クリックしてその要素を調べ、ブロックを右クリックして[スタイル付きの要素をコピー]を選択します。下の画像で確認できます。

それはのような非常にきれいなCSSコードを提供します

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

最近、検査された要素、html、および関連するcssとメディアクエリのみをページからコピーするためのクロム拡張「eXtractスニペット」を作成しました。これにより、実際に関連するCSSが得られます。

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en

このための単一のソリューションを備えたツールはわかりませんが、FirebugとWeb Developer拡張機能を同時に使用できます。

Firebugを使用して必要なhtmlセクション（要素の検査）をコピーし、Web開発者が要素に関連付けられているcssを確認します（Web開発者の「スタイル情報の表示」の呼び出し-Firebugの「要素の検査」のように機能しますが、htmlを表示する代わりにマークアップは、そのマークアップに関連付けられたCSSを示します）。

それはまさにあなたが望むものではありません（すべてについてワンクリック）が、それはかなり近く、そして少なくとも直感的です。

Firebugにもこの機能が必要です。それまでは、このオンラインサービスを使用してクラスを削除し、CSSをインラインスタイルに変換する方法もあります。

http://clipboardjs.comはこれをかなりうまく行います。コピーされたバージョンがオリジナルとまったく同じであるため、それを試して学習できるという期待は現実的ではありません。

必要な部分をWebページからコピーして、wysiwygエディターに貼り付けるだけです。エディターのツールバーの「ソース」ボタンをクリックして、HTMLソースを確認します。

Drupalのサイトで作業しているときに、これが最も簡単な方法であることがわかりました。私はwysiwyg CKeditorを使用しています。

jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
    }).join("\n");
    return style;
}
});

使用法：$("#login_wrapper").getStyles()

私はトップ投票の回答をドラッグアブルのブックマークレットとして採用しました。

このページにアクセスして、「jQueryコードの実行」ボタンをブックマークバーにドラッグしてください。

ページ全体のHTML、CSSなどを保存するFirefoxプラグインがありますが、部分的な保存を行うプラグインは見たことがありません。

IE 5.5にはあなたが探していたものがあったことを覚えています;）

ここで回答として言及したすべてのツールを調べました。しかし、それらはあなたが見つめていた美しい顔をした、汚いHTML CSSを繰り返し提供します。彼らはあなたにJSを与えません。

私がやること：

1. 最初に、ページに不要な広告をフィルタリングします
2. 次に、完全なWebページをリンクリソースとともに保存します。
3. 不要なHTML、CSS、JSを削除する
4. リソースのリンクを1つずつ慎重に解除していきます。