ほとんどの Web 開発者と同様に、私はときどき Web サイトのソースを見て、マークアップがどのように構築されているかを確認するのが好きです。Firebug や Chrome 開発者ツールなどのツールを使用するとコードを簡単に検査できますが、特定のセクションをコピーしてローカルで操作したい場合、個々の要素とそれに関連する CSS をすべてコピーするのは面倒です。そしておそらく、ソース全体を保存し、無関係なコードを切り取るのと同じくらい多くの作業が必要です。
Firebug で要素を右クリックして、[この要素の HTML+CSS+JS を保存] オプションを使用できると便利です。そのようなツールは存在しますか？この機能を追加するために Firebug または Chrome 開発者ツールを拡張することは可能ですか?
ようやくこのツールを作成する時間ができました。Github からSnappySnippetをインストールできます。指定された (最後に検査された) DOM ノードから HTML+CSS を簡単に抽出できます。さらに、CodePen または JSFiddle にコードを直接送信できます。楽しみ！
::beforeおよび::after疑似要素で動作しますSnappySnippet はオープン ソースであり、GitHubでコードを見つけることができます。
これを作成している間にかなり多くのことを学んだので、私が経験したいくつかの問題とそれらに対する私の解決策を共有することにしました。
最初に、元の CSS ルール (Web サイトの CSS ファイルから取得) を取得しようとしました。驚くべきことに、これは のおかげで非常に簡単ですがwindow.getMatchedCSSRules()、うまくいきませんでした。問題は、HTML スニペットのコンテキストではもはや一致しない、ドキュメント全体のコンテキストで一致する HTML および CSS セレクターの一部のみを取得していたことです。セレクターを解析して変更するのは得策ではないように思えたので、この試みは断念しました。
次に、@CollectiveCognition が提案したことから始めました - getComputedStyle(). ただし、すべてのスタイルをインライン化するのではなく、HTML から CSS を分離したかったのです。
ここでの解決策はあまり美しくはありませんでしたが、非常に簡単でした。選択したサブツリーのすべてのノードに ID を割り当て、その ID を使用して適切な CSS ルールを作成しました。
ノードに ID を割り当てることはうまくいきましたが、CSS ルールのそれぞれに最大 300 個のプロパティがあり、CSS 全体を読み取れないことがわかりました。指定された要素に対して計算されたすべての可能な CSS プロパティと値
を返すことが判明しました。getComputedStyle()それらのいくつかは空で、いくつかはブラウザのデフォルト値を持っていました。デフォルト値を削除するには、最初にブラウザーから取得する必要がありました (各タグには異なるデフォルト値があります)。解決策は、Web サイトからの要素のスタイルを、空の に挿入された同じ要素と比較することでした<iframe>。ここでのロジックは、空の にはスタイル シートがない<iframe>ため、そこに追加した各要素にはデフォルトのブラウザー スタイルしかありませんでした。このようにして、重要でないプロパティのほとんどを取り除くことができました。
次に気付いたのは、同等の省略形を持つプロパティが不必要に出力されていたことです (たとえば、 wasborder: solid black 1pxと then border-color: black;、border-width: 1pxitd.)。
これを解決するために、私は単純に相当する省略形を持つプロパティのリストを作成し、それらを結果から除外しました。
-webkit-前の操作の後、各ルールのプロパティの数は大幅に減少しましたが、聞いたことのないプレフィックス付きのプロパティがたくさんあることがわかりました( -webkit-app-region? -webkit-text-emphasis-position?)。これらのプロパティのいくつかは有用であると思われるため ( など) 、
これらのプロパティのいずれかを保持する必要があるかどうか疑問に思っていました。ただし、これを確認する方法がわかりませんでした。ほとんどの場合、これらのプロパティは単なるゴミであることを知っていたので、それらをすべて削除することにしました。-webkit-transform-origin-webkit-perspective-origin
私が見つけた次の問題は、同じ CSS ルールが何度も繰り返されていることです (たとえば<li>、まったく同じスタイルを持つそれぞれに対して、作成された CSS 出力に同じルールがありました)。
これは、ルールを相互に比較し、まったく同じプロパティと値のセットを持つルールを組み合わせただけの問題でした。その結果、代わりに#LI_1{...}, #LI_2{...}を得#LI_1, #LI_2 {...}ました。
結果に満足したので、HTML に移行しました。outerHTMLプロパティがサーバーから返されたとおりにフォーマットされているため、混乱しているように見えました。
必要な HTML コードouterHTMLは、単純なコードの再フォーマットだけでした。これはすべての IDE で利用できるものであるため、まさにそれを行う JavaScript ライブラリがあると確信していました。そして、私が正しかったことがわかりました (jquery-clean)。さらに、不要な属性削除エクストラ ( など) がstyleありdata-ng-repeatます。
状況によっては、上記のフィルターによってスニペットの 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
ぜひご利用いただき、改善していただければ幸いです。
これは、 Scrapbookと呼ばれる Firebug プラグインによって実行できます。
設定でJavascriptオプションを確認できます
編集：
これも役立ちます
Firequark は、HTML スクリーン スクレイピングのプロセスを支援するための Firebug の拡張機能です。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);
楽しみ。
最近、検査された要素、html、および関連する css とメディアクエリのみをページからコピーするためのクロム拡張「eXtract Snippet」を作成しました。これにより、実際に関連する CSS が得られることに注意してください。
https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en
Firebug にもこの機能が必要です。それまでは、このオンライン サービスを使用してクラスを削除し、CSS をインライン スタイルに変換するという別の方法があります。
http://clipboardjs.comはこれをうまく行っています。コピーされたバージョンが元のバージョンとまったく同じであるため、それで遊んで学習できるという期待は現実的ではないかもしれません.
これに対する単一のソリューションを備えたツールは私にはわかりませんが、Firebug とWeb Developer 拡張機能を同時に使用できます。
Firebug を使用して必要な html セクションをコピーし (Inspect Element)、Web Developer を使用してどの CSS が要素に関連付けられているかを確認します (Web Developer の「View Style Information」を呼び出す - Firebug の「Inspect Element」のように機能しますが、html を表示する代わりにマークアップには、そのマークアップに関連付けられた CSS が表示されます)。
それはまさにあなたが望むものではありません (すべてを 1 回クリックするだけです) が、かなり近く、少なくとも直感的です。
ページ全体の HTML や CSS などを保存するFirefox プラグインがありますが、部分的に保存するプラグインは見たことがありません。
IE 5.5にはあなたが探していたものがあったことを覚えています;）
ここで回答として言及されているすべてのツールを調べました。しかし、彼らはあなたが見つめていた美しい顔をした汚い HTML CSS を繰り返し提供します。彼らはあなたにJSを与えません。
私がやること：