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 om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.