Luca MinutiNegli ultimi anni i tool per semplificare lo sviluppo web hanno fatto passi da gigante. In particolare i Chrome DevTools (accessibili premendo F12 da una pagina del browser) sono passati da 4 panelli (source, network, element, console) a più di 25. Ormai tutti sappiamo usare le funzionalità base come l'oggetto console, i breakpoint e l'ispezione/modifica del DOM. Ma ci sono letteralmente centinaia di funzioni che possono semplificare notevolmente lo sviluppo di pagine web. Di seguito vedremo alcune tecniche particolarmente utili in congiunzione con ExtJS.
Disable cache
Una delle prime cose che faccio quando devo fare debug di un'applicazione ExtJS è aprire i DevTools (F12) e, nella pagina network, assicurarmi che sia abilitata la voce "Disable cache". In questo modo, quando sono aperti i devtools, viene disabilitata la cache del browser e il codice che viene eseguito è sicuramente la versione più recente.
Ispezione delle ComboBox e elementi popup
Uno dei problemi che si presentano spesso usando ExtJS è quello di ispezionare gli elementi di una ComboBox. Infatti una volta aperto il menù discesa per ispezionalo è necessario cliccare il pulsante Inspect ma in questo modo la ComboBox perde il focus e si chiude. Per risolvere il problema la cosa più semplice è aprire la pagina rendering dei DevTools e selezionare la voce "Emulate a focused page". In questo modo la pagina avrà sempre il focus anche cliccando su elementi del browser esterni alla pagina stessa.
Snippets
Un'altra funzionalità molto utile sono gli snippets, infatti nella pagina "source" è possibile inserire dei frammenti di codice da usare nella console. Personalmente uso molto spesso questo snippet:
Ext.Component.from($0.id);
Banalmente permette di ottenere un riferimento al componente selezionato in modo da poterlo usare per fare dei test. $0 indica l'elemento selezionato tramite il tool inspect, con la proprietà id si ricava, appunto, l'id e il metodo statico from della classe Ext.Component cerca il componente ExtJS che contiene l'elemento del DOM indicato.
In pratica quello che faccio è:
- Attivo la modalità inspect (CTRL+SHIFT+C)
- Seleziono il componente
- Lancio lo snippet (CTRL+p e nome dello snippet preceduto da !)
A questo punto posso cliccare col pulsante destro del mouse sull'output della console e selezionare "Store object as global variable". Chrome creerà una variabile globale (es. temp1) che è possibile usare per dei test. Per esempio, supponendo che il componente sia una ComboBox posso scrivere:
temp1.getStore().getCount();
Per ottenere il numero dei record dello store collegato alla ComboBox. Un'altro modo consiste nell'usare $_ che contiene il risultato dell'ultima espressione, quindi dopo aver lanciato lo snippet è possibile usare un codice come:
$_.getStore().getCount();
Modifica della banda
Una cosa che succede spesso durante lo sviluppo è che il caricamento dei dati sembra sempre molto veloce, un po' perché magari i dati sono pochi oppure banalmente perché stiamo lavorando con dei dati locali o comunque in LAN. Proprio per questo è possibile con i DevTools simulare una larghezza di banda ridotta. Nel pannello "network", infatti, si trova la voce Throttling tramite cui è possibile impostare i seguenti valori:
- No throttling
- Fast 3G
- Slow 3G
- Offline
- Custom
Anche in questo caso il valore impostato viene usato solo con la pagina dei DevTools aperta.
