Questo post fa parte di una serie di post del blog che descrivono le modifiche che stiamo apportando all'architettura di DevTools e il modo in cui viene creata.
Quando DevTools è stato creato per la prima volta, molti anni fa, il team ha deciso di creare un framework di UI personalizzato. Si è trattato di una scelta ragionevole in quel momento e ha funzionato bene DevTools.
Da allora, però, la piattaforma ha introdotto varie funzionalità e una di queste, Web components, è la soluzione perfetta per creare nuovi elementi dell'interfaccia utente in DevTools. Sfruttando ciò che fornisce la piattaforma, possiamo ridurre notevolmente la quantità di codice UI personalizzato che dobbiamo mantenere e investire di più nella creazione di funzionalità per DevTools, piuttosto che nel supportare un'infrastruttura su misura.
Per facilitare la transizione, abbiamo creato una guida alla creazione di elementi UI in DevTools da condividere con il resto del team DevTools. Alcune delle guide sono progettate su misura per DevTools e la sua architettura, che prevede vincoli specifici, ma alcune sono linee guida generiche sugli approcci che abbiamo utilizzato per creare, strutturare e testare i componenti web.
Oggi rendere questo documento disponibile pubblicamente all'indirizzo goo.gle/building-ui-devtools. Se hai mai pensato a come vengono utilizzati i componenti web nelle grandi applicazioni del mondo reale o ad alcune delle sfide legate all'integrazione dei componenti in un codebase preesistente di grandi dimensioni, questo documento potrebbe esserti di aiuto e fornire alcune risposte. Se hai domande sulle nostre linee guida, non esitare a inviarmi un tweet.
Scarica i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.
Contattare il team di Chrome DevTools
Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni
> Guida > Segnala i problemi di DevTools in DevTools. - Tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.