OffiDocs を使用した Chrome の Web コンポーネント DevTools

説明：

OffiDocs Chromium オンラインを使用して、Chrome オンライン Web ストア拡張機能 Web コンポーネント DevTools を実行します。

Web コンポーネントおよび Web コンポーネント ライブラリ用の開発者ツール Web コンポーネント DevTools は、Web コンポーネントを使用するすべての開発者を対象としています。

提供されるツールにより、新しい Chrome Devtools パネルが作成され、現在のページ上のカスタム要素を簡単に確認したり、コンポーネントの属性やプロパティを変更したりできるようになります。

Web コンポーネント DevTools はカスタム要素マニフェスト (https://github.

com/webcomponents/custom-elements-manifest) を使用して Web コンポーネントを分析します。

機能: Web コンポーネント DevTools は、ブラウザの UI から直接、開発者に次のような高度な機能を提供します。 - ページ上のカスタム要素のリスト、およびページ内のアクセス可能な iframe - リスト上のカスタム要素のフィルタリング - 属性の検査と変更カスタム要素 - カスタム要素のプロパティ (オブジェクトや配列も) の検査と変更 - ディスパッチされたイベントの監視 - カスタム要素の関数の呼び出し、および戻り値のログ記録 - ページ上の Web コンポーネントのソース コードの表示 - Web コンポーネントとの直接対話コンソール経由 なぜですか? Web コンポーネントの開発プロセスでは、Lit のようなライブラリを使用する場合でも、いかなる種類のライブラリを使用しない場合でも、通常のブラウザの開発ツールが提供するものよりもコンポーネントをもう少し制御したい状況が発生します。

たとえば、次のようなことが考えられます。 要素の属性を切り替える 要素のプロパティを切り替える 要素からイベントがディスパッチされたときに監視する 関数を呼び出す また、Web コンポーネントを使用している場合、通常は Shadow DOM が存在するため、次のことを行うのがかなり困難になります。要素へのパスを見つけます。

そして、たとえパスを取得したとしても、文書を書かなければなりません。

querySelector("私のセレクター文字列 > 要素名")。

値を変更するたびに setAttribute("my-attr", "foo") するのは非常に面倒です。

このユースケースのために、Web コンポーネント DevTool が作成されました。これは、開発者がボタンをクリックするだけで、属性、プロパティ、したがって要素の状態を devtools ウィンドウから直接簡単に変更できるようにするためです。

問題: DevTools の使用中に発生した問題は、GitHub リポジトリ (https://github.

com/matsuuu/web-component-devtools/issues)。

追加情報：

- まつうさん提供
- 平均評価 : 5 つ星 (とても気に入りました)
-開発者 このメールアドレスは、スパムロボットから保護されています。 アドレスを確認するにはJavaScriptを有効にする必要があります。

Web コンポーネント DevTools Web 拡張機能と OffiDocs Chromium online の統合