SnappySnippet を使用すると、Web サイトから特定の HTML CSS JS を簡単に抽出できるようになりますか?

DOM の特定の要素から HTML CSS JS を選択的に抽出する方法

はじめに

Web 開発者は、多くの場合、検査する必要があります。 Web サイトのソース コードを参照してマークアップを理解します。 Firebug や Chrome 開発者ツールなどのツールを使用するとコードを簡単に検査できますが、ローカル テストのために特定のセクションをコピーするのは面倒な場合があります。この記事では、このプロセスを簡略化するツールである SnappySnippet を紹介します。

SnappySnippet

SnappySnippet は、ユーザーが次のことを可能にする Chrome 拡張機能です。

• 最後に検査した DOM ノードから HTML CSS JS を抽出します
• 抽出されたコードを CodePen または JSFiddle に直接送信します
• HTML および CSS クリーンアップ オプションをカスタマイズします

実装の課題

最初の試行: getMatchedCSSRules()

• 抽出された HTML スニペットのコンテキストでセレクターが一致しませんでした

2 回目の試み: getComputedStyle()

• CSS を HTML から分離するのは難しいことがわかりました
• デフォルト値を持つプロパティを削除します
• 短縮プロパティのみを保持する
• 接頭辞付きプロパティを削除する
• 同一の CSS ルールを結合する
• HTML のインデントをクリーンアップして修正する
• 破損を避けるためにオプションのフィルターを追加するCSS

結論

SnappySnippet は、特定の DOM 要素から HTML CSS JS を簡単に抽出できる貴重なツールです。カスタマイズ可能な機能により、ユーザーは抽出プロセスを特定のニーズに合わせて調整できます。

以上がSnappySnippet を使用すると、Web サイトから特定の HTML CSS JS を簡単に抽出できるようになりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。