Chrome DevTools
Tags: javascript, chrome, extjs, italian
Published: 2023-12-29 14:31:04

Negli 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.

![Disable cache](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qifq6t05wfdbp88gtplp.png)

## 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.

![Focus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwtljcapzepit074bjav.png)

## 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:

```javascript
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 è:

1. Attivo la modalità inspect (CTRL+SHIFT+C)
2. Seleziono il componente
3. 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:

```javascript
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:

```javascript
$_.getStore().getCount();
```

![Snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b0bgwgxc756ekagbq28.png)

## 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.

![Throttling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efc2xyuk5p4fcmpznua1.png)

## Riferimenti

* [Sito ufficiale](https://developer.chrome.com/docs/devtools/)
* [DevTools tips](https://developer.chrome.com/tags/devtools-tips/)