Alcune funzionalità di DevTools cross-browser che potresti non conoscere

Trascorro molto tempo in DevTools e sono sicuro che lo fai anche tu. A volte rimbalzo persino tra di loro, specialmente quando eseguo il debug di problemi tra browser. DevTools è molto simile ai browser stessi: non tutte le funzionalità in DevTools di un browser saranno le stesse o supportate in DevTools di un altro browser.

Ma ci sono alcune funzionalità di DevTools che sono interoperabili, anche alcune meno conosciute che sto per condividere con te.

Per brevità, nell'articolo utilizzo "Chromium" per fare riferimento a tutti i browser basati su Chromium, come Chrome, Edge e Opera. Molti dei DevTools in essi contenuti offrono esattamente le stesse caratteristiche e capacità l'uno dell'altro, quindi questa è solo la mia scorciatoia per riferirmi a tutti in una volta.

Cerca i nodi nell'albero DOM

A volte l'albero DOM è pieno di nodi nidificati in nodi che sono nidificati in altri nodi e così via. Ciò rende piuttosto difficile trovare quello esatto che stai cercando, ma puoi cercare rapidamente l'albero DOM utilizzando Cmd + F (macOS) o Ctrl + F (Finestre).

Inoltre, puoi anche cercare utilizzando un selettore CSS valido, come .red, o usando un XPath, come //div/h1.

Nei browser Chromium, lo stato attivo passa automaticamente al nodo che corrisponde ai criteri di ricerca durante la digitazione, il che potrebbe essere fastidioso se si lavora con query di ricerca più lunghe o un albero DOM di grandi dimensioni. Fortunatamente, puoi disabilitare questo comportamento andando a Impostazioni profilo (F1) → Preferenze → globali → Cerca durante la digitazione → Disabilita.

Dopo aver individuato il nodo nell'albero DOM, puoi scorrere la pagina per portare il nodo all'interno del viewport facendo clic con il pulsante destro del mouse sul nodo e selezionando "Scorri nella vista".

Accedi ai nodi dalla console

DevTools offre molti modi diversi per accedere a un nodo DOM direttamente dalla console.

Ad esempio, puoi usare $0 per accedere al nodo attualmente selezionato nell'albero DOM. I browser Chromium fanno un ulteriore passo avanti consentendoti di accedere ai nodi selezionati nell'ordine cronologico inverso rispetto alla selezione storica utilizzando, $1, $2, $3, ecc.

Un'altra cosa che i browser Chromium ti consentono di fare è copiare il percorso del nodo come espressione JavaScript sotto forma di document.querySelector facendo clic con il pulsante destro del mouse sul nodo e selezionando Copia → Copia percorso JS, che può quindi essere utilizzato per accedere al nodo nella console.

Ecco un altro modo per accedere a un nodo DOM direttamente dalla console: come variabile temporanea. Questa opzione è disponibile facendo clic con il pulsante destro del mouse sul nodo e selezionando un'opzione. Tale opzione è etichettata in modo diverso in DevTools di ciascun browser:

• cromo: Tasto destro → “Memorizza come variabile globale”
• Firefox: Tasto destro → “Usa nella console”
• Safari: Tasto destro → “Log Element”

Visualizza gli elementi con i badge

DevTools può aiutare a visualizzare gli elementi che corrispondono a determinate proprietà visualizzando un badge accanto al nodo. I badge sono cliccabili e diversi browser offrono una varietà di badge diversi.

In Safari, è presente un pulsante badge nella barra degli strumenti del pannello Elementi che può essere utilizzato per attivare o disattivare la visibilità di badge specifici. Ad esempio, se un nodo ha a display: grid or display: inline-grid Dichiarazione CSS ad essa applicata, a grid badge viene visualizzato accanto ad esso. Facendo clic sul badge verranno evidenziate le aree della griglia, le dimensioni delle tracce, i numeri di riga e altro sulla pagina.

I badge attualmente supportati in FirefoxI DevTools di sono elencati in Firefox documenti di origine. Ad esempio, a scroll badge indica un elemento scorrevole. Cliccando sul badge si evidenzia l'elemento che causa l'overflow con un overflow distintivo accanto ad esso.

In cromo browser, è possibile fare clic con il pulsante destro del mouse su qualsiasi nodo e selezionare "Impostazioni badge..." per aprire un contenitore che elenca tutti i badge disponibili. Ad esempio, elementi con scroll-snap-type avrà un scroll-snap badge accanto ad esso, che al clic attiverà il scroll-snap sovrapposizione su quell'elemento.

Prendendo screenshot

Da un po' di tempo siamo in grado di acquisire screenshot da alcuni DevTools, ma ora è disponibile in tutti e include nuovi modi per acquisire immagini a pagina intera.

Il processo inizia facendo clic con il pulsante destro del mouse sul nodo DOM che si desidera acquisire. Quindi seleziona l'opzione per acquisire il nodo, che viene etichettato in modo diverso a seconda di quale DevTools stai utilizzando.

Ripetere gli stessi passaggi sul html node per acquisire uno screenshot a pagina intera. Quando lo fai, però, vale la pena notare che Safari mantiene la trasparenza del colore di sfondo dell'elemento: Chromium e Firefox lo cattureranno come sfondo bianco.

C'è un'altra opzione! Puoi acquisire uno screenshot "reattivo" della pagina, che ti consente di acquisire la pagina con una larghezza di visualizzazione specifica. Come ci si potrebbe aspettare, ogni browser ha modi diversi per arrivarci.

• cromo: Cmd + Shift + M (macOS) o Ctrl + Shift + M (Finestre). Oppure fai clic sull'icona "Dispositivi" accanto all'icona "Ispeziona".
• Firefox: Strumenti → Strumenti browser → “Modalità design reattivo”
• Safari: Sviluppo → “Entra in modalità Responsive Design”

Suggerimento per Chrome: ispeziona lo strato superiore

Chrome ti consente di visualizzare e ispezionare gli elementi di livello superiore, come una finestra di dialogo, un avviso o un modale. Quando un elemento viene aggiunto a #top-layer, ottiene un top-layer badge accanto ad esso, che al clic ti porta al contenitore di livello superiore situato subito dopo il </html> etichetta.

L'ordine degli elementi in top-layer container segue l'ordine di impilamento, il che significa che l'ultimo è in cima. Clicca il reveal badge per tornare al nodo.

Suggerimento per Firefox: passa all'ID

Firefox collega l'elemento che fa riferimento all'attributo ID al suo elemento di destinazione nello stesso DOM e lo evidenzia con una sottolineatura. Utilizzo CMD + Click (macOS) o CTRL + Click (Windows) ) per passare all'elemento di destinazione con l'identificatore.

Concludendo

Un bel po' di cose, vero? È fantastico che ci siano alcune funzionalità DevTools incredibilmente utili supportate allo stesso modo in Chromium, Firefox e Safari. Ci sono altre funzionalità meno conosciute supportate da tutti e tre che ti piacciono?

Ci sono alcune risorse che tengo a portata di mano per rimanere aggiornato sulle novità. Ho pensato di condividerli con qui:

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/