Vernieuwing van de DevTools-architectuur: migreren naar webcomponenten

Dit bericht maakt deel uit van een reeks blogposts waarin de wijzigingen worden beschreven die we aanbrengen in de architectuur van DevTools en hoe deze is gebouwd.

Toen DevTools vele, vele jaren geleden voor het eerst werd gemaakt, koos het team ervoor om een ​​op maat gemaakt UI-framework te bouwen. Dit was destijds een redelijke keuze en heeft DevTools goed gediend.

Maar sindsdien zijn er verschillende functies op het platform geland en een daarvan, Web Components, is uitstekend geschikt voor het bouwen van nieuwe UI-elementen in DevTools. Door te vertrouwen op wat het platform biedt, kunnen we de hoeveelheid op maat gemaakte UI-code die we moeten onderhouden aanzienlijk verminderen en meer investeren in het bouwen van functies voor DevTools, in plaats van het ondersteunen van op maat gemaakte infrastructuur.

Om te helpen bij de transitie hebben we een handleiding gemaakt voor het bouwen van UI-elementen in DevTools, die we kunnen delen met het bredere DevTools-team. Een deel van de handleiding is op maat gemaakt voor DevTools en zijn architectuur, wat zijn eigen beperkingen met zich meebrengt, maar een deel ervan zijn algemene richtlijnen over de benaderingen die we hebben gebruikt om webcomponenten te bouwen, structureren en testen.

Vandaag maken we dit document openbaar beschikbaar op goo.gle/building-ui-devtools . Als u zich ooit meer heeft afgevraagd over hoe webcomponenten worden gebruikt in grote toepassingen in de echte wereld, of over enkele van de uitdagingen die gepaard gaan met het integreren van componenten in een grote, reeds bestaande codebase, kan dit document u wellicht helpen en enkele antwoorden bieden. Als u vragen heeft over onze richtlijnen, kunt u mij tweeten .

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .