Web Bileşeni Geliştirme Araçları Chrome OffiDocs ile

TANIM

Web Bileşenleri ve Web Bileşeni Kitaplıkları için geliştirici araçları Web Bileşeni DevTools, Web Bileşenleri ile çalışan tüm geliştiricilere yöneliktir.

Sağlanan araçlar, geçerli sayfadaki özel öğelere hızlı bir şekilde göz atılmasını sağlayan ve söz konusu bileşenlerin niteliklerinin ve özelliklerinin değiştirilmesine olanak tanıyan yeni bir Chrome Devtools paneli oluşturur.

Web Bileşeni DevTools, Özel Öğeler Bildirimini (https://github.

Web Bileşenlerini analiz etmek için com/webcomponents/custom-elements-manifest).

Özellikler: Web Bileşeni DevTools, geliştiriciye doğrudan tarayıcının kullanıcı arayüzünden gelişmiş özellikler sağlar; örneğin: - Sayfadaki özel öğelerin ve sayfa içindeki erişilebilir iframe'lerin listelenmesi - Listedeki özel öğelerin filtrelenmesi - Niteliklerin incelenmesi ve değiştirilmesi özel öğeler - Özel öğelerin özelliklerini (nesneler ve diziler bile) inceleme ve değiştirme - Gönderilen olayları gözlemleme - Özel öğenin işlevlerini çağırma ve dönüş değerlerini günlüğe kaydetme - Web bileşenlerinin kaynak kodunu sayfada görüntüleme - Web bileşenleriyle doğrudan etkileşim kurma konsol aracılığıyla Neden? Web Bileşenlerini geliştirme sürecinde, ister Lit gibi bir kütüphaneyle ister herhangi bir kütüphane olmadan olsun, bileşenleriniz üzerinde normal tarayıcı geliştirme araçlarının size sağladığından biraz daha fazla kontrole sahip olmak isteyebileceğiniz durumlar ortaya çıkar.

Örneğin şunları isteyebilirsiniz: Öğenin Niteliklerini değiştirin Öğenin Özelliklerini değiştirin Öğeden olayların ne zaman gönderildiğini izleyin İşlevleri çağırın Ve Web Bileşenleri ile çalışırken, Gölge DOM genellikle mevcuttur, bu da onu oldukça zorlaştırır öğenin yolunu bulun.

Ve yolu bulsanız bile belge yazmak zorundasınız.

querySelector("seçici dizem > öğe adı").

setAttribute("my-attr", "foo") bir değeri her değiştirmek istediğinizde oldukça zahmetlidir.

Bu kullanım durumu için Web Bileşenleri DevTools oluşturuldu: Geliştiricinin, öğelerinin özniteliklerini, özelliklerini ve dolayısıyla durumunu doğrudan devtools penceresinden bir düğmeye tıklayarak kolayca değiştirebilmesini sağlamak.

Sorunlar: DevTools'u kullanırken karşılaştığınız tüm sorunlar GitHub Deposuna (https://github.php) gönderilmelidir.

com/Matsuuu/web-component-devtools/issues).

Ek bilgi:

- Matsuuu tarafından sunulmaktadır
- Ortalama puan: 5 yıldız (beğendim)
- Geliştirici Bu e-posta adresi spam robotlarından korunuyor. Sen, görüntülüyebilmek için JavaScript etkinleştirilmelidir gerekir.

Web Bileşeni Geliştirici Araçları web extension OffiDocs ile entegre Chromium Online