Web Component DevTools sa Chrome kasama ang OffiDocs

DESCRIPTION

Tooling ng developer para sa mga Web Components at Web Component Libraries Ang Web Component DevTools ay naglalayon sa lahat ng mga developer na nagtatrabaho sa mga Web Components.

Ang tooling na ibinigay ay lumilikha ng bagong panel ng Chrome Devtools, na nagbibigay-daan sa mabilisang pagtingin sa mga custom na elemento sa kasalukuyang page, at nagbibigay-daan sa pagbabago ng mga katangian at katangian ng nasabing mga bahagi.

Ginagamit ng Web Component DevTools ang Custom Elements Manifest (https://github.

com/webcomponents/custom-elements-manifest) upang suriin ang mga Web Components.

Mga Tampok: Nagbibigay ang Web Component DevTools ng mga advanced na feature sa developer, diretso mula sa UI ng browser hanggang, halimbawa: - Paglilista ng mga custom na elemento sa page, at mga naa-access na iframe sa loob ng page - Pag-filter ng mga custom na elemento sa listahan - Pag-inspeksyon at pagbabago sa mga katangian ng mga custom na elemento - Pag-inspeksyon at pagbabago ng mga katangian (kahit na mga bagay at array) ng mga custom na elemento - Pagmamasid sa mga ipinadalang kaganapan - Pagtawag ng mga function ng custom na elemento, at pag-log sa mga return value - Tingnan ang source code ng mga bahagi ng web sa pahina - Direktang makipag-ugnayan sa mga bahagi ng web sa pamamagitan ng console Bakit? Sa proseso ng pagbuo ng mga Web Components, mayroon man itong library tulad ng Lit, o walang anumang uri ng library, may mga darating na sitwasyon kung saan maaaring gusto mong magkaroon ng kaunting kontrol sa iyong mga bahagi kaysa sa ibinibigay sa iyo ng regular na browser devtools.

Halimbawa, maaaring gusto mong: I-toggle ang Mga Katangian ng elemento I-toggle ang Properties ng elemento Subaybayan kung kailan naipadala ang mga kaganapan mula sa elemento Mga function ng tawag At kapag nagtatrabaho ka sa mga Web Components, karaniwang naroroon ang Shadow DOM, na ginagawang medyo mahirap hanapin ang landas patungo sa elemento.

At kahit na nakuha mo ang landas, kinakailangang magsulat ng dokumento.

querySelector("my-selector-string > element-name").

setAttribute("my-attr", "foo") sa tuwing gusto mong baguhin ang isang value ay medyo mahirap.

Para sa kaso ng paggamit na ito ang Web Components DevTools ay nilikha: Upang paganahin ang developer na madaling baguhin ang mga katangian, mga katangian at samakatuwid ay estado ng kanilang elemento diretso mula sa devtools window sa pag-click ng isang pindutan.

Mga isyu: Anumang mga isyu na nararanasan mo habang ginagamit ang DevTools ay dapat isumite sa GitHub Repository (https://github.

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

Karagdagang impormasyon:

- Inaalok ni Matsuuu
- Average na rating: 5 bituin (nagustuhan ito)
- Developer Ang e-mail address ay protektado mula sa spambots. Kailangan mo enable ang JavaScript upang tingnan ito.

Web Component DevTools web extension isinama sa OffiDocs Chromium online