Prototipazione del futuro di DevTools

12 anni fa lo sviluppo web non aveva quasi alcun attrezzo. Non c'era modo semplice per ispezionare il DOM, monitorare la rete o persino console.log.

Sviluppo Web nel 2002 - debug con avvisi. Da

Questi tempi bui possono essere riassunti da questa citazione di Joe Hewitt, creatore di Firebug e dell'API Console:

"Sono sempre sorpreso di sentire la gente chiamare FireBug" innovativa ". Ciò dimostra quanto debole sia la cassetta degli attrezzi dello sviluppatore web che qualcosa di vecchio stile come una console sarebbe considerato romanzo."

La creazione di Firebug nel 2006 ha segnato l'inizio dei moderni strumenti di sviluppo web. Oggi, ogni browser principale viene fornito con fantastici strumenti integrati per gli sviluppatori web. Dietro ogni DevTools c'è un team dedicato di sviluppatori, designer e product manager che lo spingono avanti.

Man mano che DevTools è diventato importante, hanno iniziato a competere tra loro e hanno acquisito tonnellate di nuove capacità mentre cercavano di tenere il passo con la piattaforma in evoluzione.

Firefox DevTools è stato il primo a presentare un ispettore di griglia - https://youtu.be/dU7xtnzfqxQ

L'eredità di Firebug

Credo che al giorno d'oggi, siamo fortunati ad avere uno dei migliori strumenti del settore. In effetti, i nostri strumenti sono diventati così buoni che sono costantemente biforcati e adattati per funzionare con altre piattaforme.

Stetho - Chrome DevTools fork per il debug di applicazioni Android - https://facebook.github.io/stetho/

Una cosa che mi ha sempre colpito è il modo in cui i concetti originali introdotti da Joe in Firebug continuano a vivere, quasi invariati, negli attuali DevTools.

Pannello Elements in Edge, Safari, Chrome e Firefox DevTools.

Queste somiglianze rendono sicuramente le nostre vite molto più facili quando si passa da un browser all'altro, ma mi sono sempre chiesto: questi concetti sono mai stati messi alla prova? O sono stati semplicemente copiati senza pensarci troppo? E se lo fossero, posso in qualche modo sfidarli da solo?

Ispirarsi

Motivato dall'invito a parlare a Front-Trends, ho deciso di costruire un paio di prototipi che mostrassero alcuni percorsi alternativi che i nostri strumenti potrebbero seguire in futuro. Alla ricerca di ispirazione, ho pensato di conoscere le applicazioni utilizzate in altre professioni. Speravo di identificare alcuni schemi e idee che vale la pena prendere in prestito.

Passare attraverso i manuali di strumenti casuali, senza capire il contesto, non sembrava un buon piano. Per fortuna, ho un paio di buoni amici che non sono sviluppatori web e hanno accettato di presentarmi ai loro strumenti. E così ho incontrato: Kasia - ingegnere strutturale, Bolko - fotografo e cineasta, Ola - scienziata e designer di sistemi di misura e controllo, Kuba - game designer e programmatrice e Patrycja che è graphic designer. Ho chiesto loro di guidarmi attraverso il loro normale flusso di lavoro, di parlare di ciò che piace e non piace dei loro strumenti e di come apprendono nuove funzionalità.

I miei amici al lavoro.

Queste interviste hanno portato alcune intuizioni intriganti su come gli altri lavorano. Ecco alcune delle idee che ho raccolto che potrebbero essere portate sul browser DevTools.

Immaginare il futuro

Flessibilità

Tutte le applicazioni che mi sono state presentate (DaVinci Resolve, Autocad, Sketch, LabView, Unity) hanno layout molto più flessibili rispetto ai nostri DevTools. Ogni pannello, scheda e finestra possono essere spostati, chiusi e ridimensionati. Questo è qualcosa che aiuta a personalizzare lo strumento e adattarlo alle tue esigenze. Unity ti consente anche di salvare e gestire più layout con facilità. Nel frattempo, nei nostri DevTools, è impossibile avere pannelli Performance e Sorgenti affiancati.

Per mostrare come sarebbe un layout flessibile in Chrome DevTools ho creato un prototipo basato sul layout dorato:

Costruire da blocchi

Una cosa che mi è piaciuta di Sketch e LabView è come ti permettono di costruire blocchi più grandi da quelli più piccoli. In Sketch, è possibile creare una libreria di simboli (ad esempio pulsanti, etichette, input) da cui è quindi possibile creare un design completo di una pagina Web. Se decidi di voler modificare l'aspetto di un pulsante, puoi passare rapidamente dalla vista di una "pagina Web" alla modifica di un "simbolo" specifico. E quando hai finito, tutti i pulsanti sul tuo design vengono aggiornati di conseguenza.

Se hai avuto la possibilità di creare un'app o un sito Web utilizzando un framework moderno, tutte queste discussioni sui "simboli" probabilmente hanno suonato un campanello. Con così tante nuove app costruite con web / reazioni / ecc. componenti Credo che potremmo migliorare notevolmente i nostri DevTools facendoli capire meglio questi concetti.

Per mostrare come potrebbe essere una migliore integrazione con i componenti, ho creato un prototipo che consente allo sviluppatore di passare senza problemi dal lavorare su una determinata pagina / schermata a un singolo componente:

Ispettore consapevole del contesto

Unity ha uno strumento di ispezione molto pulito che ti offre diverse opzioni a seconda dell'elemento da ispezionare (modello 3d, file audio, scena). Non è necessario cambiare gli strumenti ogni volta che si passa dalla modifica di un modello 3d alla modifica di un file audio: inspector si adatta semplicemente in base al contesto.

Nel nostro DevTools, otteniamo lo stesso pannello "Stili" indipendentemente dal nodo dell'albero DOM che stiamo attualmente esaminando. Per alcune cose, come un tag META, un percorso SVG, un tag di script, ecc. Il pannello "Stili" non è così utile, quindi nel mio prossimo prototipo ho cercato di affrontare questo:

Sequenza temporale

Quando si modifica un video, ad es. usando DaVinci Resolve, operi su una linea temporale che ti permette di saltare facilmente tra le varie parti del tuo progetto. Questa facilità di andare avanti e indietro mi ha fatto pensare a quanto incredibilmente utile quella caratteristica sarebbe avere nei nostri strumenti.

L'animazione è terminata prima che tu riesca a ispezionarla? Hai fatto clic su "Avanti" nel debugger troppe volte e hai perso il codice di cui desideri eseguire il debug? In questo momento devi ricaricare la pagina e riprovare, ma con uno strumento timeline sarebbe un gioco da ragazzi:

Se questo prototipo ti sembra un po 'troppo futuristico, dovresti sapere che abbiamo già fatto un passo per renderlo possibile: il motore JavaScript di Edge supporta il Debugging dei viaggi nel tempo.

Tela infinita

Quasi ogni strumento che mi è stato presentato per implementare un'idea di "tela infinita". L'idea è di darti uno spazio su cui puoi disporre liberamente i tuoi disegni, disegni, componenti, ecc. E se vuoi concentrarti su una di queste cose, tutto è solo uno scorrimento e uno zoom via.

Uno sviluppatore che lavora su un sito Web sicuramente non interagisce con esso allo stesso modo di un utente normale. Forse è il momento di ripensare al modo in cui la finestra principale del browser potrebbe essere migliorata per soddisfare meglio le esigenze degli sviluppatori. Credo che l'idea di "tela infinita" si adatti perfettamente qui. E se potessi mantenere più dispositivi, browser e dimensioni dello schermo tutti sulla stessa tela? Quanto sarebbe bello poter visualizzare rapidamente in anteprima tutte le pagine dell'applicazione? Che ne dici di scaricare tutte le schede del browser e passare completamente alla navigazione a scorrimento e zoom?

Trasformare le idee in realtà

Spero che ti siano piaciute alcune delle idee presentate sopra e sei d'accordo con me sul fatto che renderebbero i nostri strumenti ancora migliori. Sono sicuro che hai delle buone idee per te. Ma adesso cosa? Dobbiamo solo aspettare e sperare che queste idee vengano attuate?

Se non vuoi aspettare, ho delle buone notizie. Firefox e Chrome DevTools possono essere facilmente estesi tramite le estensioni del browser. È anche possibile contribuire direttamente a Firefox DevTools, Chrome DevTools o Safari Web Inspector in quanto tutti sono open source. Infine, se desideri creare uno strumento che si integri con un browser, ma sia separato da esso (proprio come il codice VS), puoi crearlo sulla parte superiore del protocollo DevTools. Per ulteriori ispirazioni ed esempi di ciò che è possibile, suggerisco di controllare awesome-chrome-devtools.

(Un grande ringraziamento a Kenneth Auchenberg, Jonathan Garbee, Umar Hansa e Jason Laster e per la revisione di questo post)