Aumenta la produttività degli sviluppatori Web

Ultimo aggiornamento il 13 ottobre 2020

Se ti piace fare sviluppo web come me, dovresti sapere l'importanza di avere ottimi strumenti nel tuo browser web che semplifichino il tuo lavoro e aumentino la tua produttività. Questo è il caso di Google Chrome e dell'offerta completa delle estensioni di Chrome che aumenterà la produttività del tuo sviluppatore web.

Sì, Firefox è un browser eccellente per lo sviluppo web e Firefox Developer Edition è fantastico per il debug e il test CSS. Tuttavia, Chrome ha un lungo elenco di estensioni di strumenti che offrono supporto per le ultime funzionalità web e strumenti per sviluppatori che lo rendono uno dei preferiti da molti sviluppatori web per aumentare la produttività degli sviluppatori web.

Il Chrome Marketplace ha alcune delle migliori estensioni, vecchie o nuove, per aiutare gli sviluppatori a sviluppare e testare un sito web o una pagina di destinazione. Di seguito, conoscerai alcune delle migliori estensioni che suggerisco come "indispensabili" nella tua casella degli strumenti di sviluppo web.

Estensioni di Chrome che migliorano la produttività degli sviluppatori Web

Assistente tag

Tag Assistant aiuta a risolvere i problemi di installazione di vari tag Google, inclusi Google Analytics, Google Tag Manager, ecc. Tag Assistant ti consente di verificare di aver installato correttamente diversi tag Google sulla tua pagina. Basta passare a qualsiasi pagina e Tag Assistant ti dirà quali tag sono presenti, segnalerà eventuali errori rilevati e suggerirà miglioramenti che possono essere apportati alla tua implementazione. La maggior parte dei tag di Google viene controllata, inclusi Google Analytics, AdWords Conversion Tracking, Google Tag Manager, ecc.

Cosa corre

Scopri cosa gestisce un sito Web: framework, strumenti di analisi, plug-in di WordPress, caratteri, è il tuo nome. L'estensione WhatRuns è a portata di clic per trovare le tecnologie utilizzate su qualsiasi sito Web che visiti. Rileva anche gli strumenti e i servizi nuovi e imminenti da Strumenti per sviluppatori e reti pubblicitarie a plugin e temi di WordPress. Non solo: puoi seguire i siti Web in modo da ricevere notifiche quando utilizzano nuove tecnologie o rimuovono quelle esistenti.

Vue.js Devtools

Il suo nome è molto esplicito. È un'estensione DevTools di Chrome e Firefox per il debug delle applicazioni Vue.js. Ti consente di ispezionare le gerarchie dei componenti Vue.js negli Strumenti per sviluppatori di Chrome. Otterrai una nuova scheda in Chrome DevTools: "Vue".

Reagisci agli strumenti degli sviluppatori

Come Vue.js Devtools, React Developer Tools è un'estensione di Chrome e Firefox DevTools per la libreria JavaScript open source React. Ti consente di ispezionare le gerarchie dei componenti React negli Strumenti per sviluppatori di Chrome. Otterrai due nuove schede nei tuoi Chrome DevTools: "Componenti" e "Profiler". La scheda Componenti mostra i componenti React radice di cui è stato eseguito il rendering sulla pagina e i sottocomponenti di cui è stato eseguito il rendering. Selezionando uno dei tre componenti, puoi ispezionare e modificare i suoi oggetti di scena e lo stato attuali nel pannello a destra. Nei breadcrumb, puoi ispezionare il componente selezionato, il componente che lo ha creato, il componente che lo ha creato, ecc.

Visualizzatore JSON Fantastico

Questa estensione ti aiuta a visualizzare la risposta JSON da qualsiasi sito Web o richiesta API nel tuo browser. Ti introduce a fantastiche esperienze JSON Prettify. Ha molte caratteristiche uniche che lo rendono fantastico. Aiuta gli sviluppatori a formattare o abbellire JSON e ad attraversare le proprietà in una vista grafica. Ha un grafico intuitivo e interattivo che rappresenta la risposta del tuo server o il tuo JSON fornito nella sezione di input nella vista grafica.

Ispettore META SEO

Utile per ispezionare i metadati presenti all'interno di pagine web, solitamente non visibili durante la navigazione. I metadati non sono solo i soliti meta tag HTML, ma i tag XFN, vari microformati, l'attributo canonical introdotto di recente, i link no-follow, ecc. Questa estensione è principalmente rivolta agli sviluppatori web che hanno bisogno di verificare l'HTML del loro sito per segui le Linee guida di Google dei Webmaster, ma anche a chi è curioso di conoscere i contenuti delle pagine che solitamente non sono visibili ma possono rivelare interessanti proprietà del sito. Ha anche un'opzione di stampa/esportazione che ti consente di stampare o salvare come PDF il rapporto o copiare/incollare i dati nel tuo strumento preferito.

Visualizzatore rapido in stile HTML

Visualizzatore rapido in stile elemento HTML DOM. Basta muovere il mouse e mostra gli stili del bersaglio.

Visualizzatore CSS

CSSViewer è un semplice visualizzatore di proprietà CSS per Chrome e Firefox. Per abilitare CSSViewer, fai clic sull'icona della barra degli strumenti e quindi passa il mouse su qualsiasi elemento che desideri ispezionare nella pagina corrente.

Font Ninja

Identifica i caratteri da qualsiasi sito Web, aggiungi ai segnalibri, provali e acquistali. Analizza i file dei font per ottenere risultati più accurati. Sposta il testo su qualsiasi testo per ottenere il nome del carattere e le proprietà CSS. La finestra principale dell'estensione visualizzerà anche un riepilogo di tutti i caratteri utilizzati su un sito web. È possibile ottenere maggiori informazioni sui caratteri. Controlla quanti stili sono disponibili, la loro fonderia e il prezzo.

Amo l'adattivo: test mobile/reattivo

Strumento per testare siti web responsive. L'estensione ILOVEADAPTIVE per Chrome aggiunge un pulsante alla barra degli strumenti. Quando fai clic sul pulsante, si aprirà l'URL in cui ti trovi nella scheda corrente. Le caratteristiche principali includono l'anteprima di un URL su più dispositivi contemporaneamente, il filtraggio dei dispositivi, il filtraggio del sistema operativo, la modifica della loro quantità, lo zoom, la visualizzazione del pannello iOS, il passaggio a orizzontale e verticale.

Vitali web

Misura le metriche per un sito sano. I Web Vitals sono segnali di qualità fondamentali per fornire un'esperienza utente eccezionale sul Web (https://web.dev/vitals). Questa estensione misura i Core Web Vitals, fornendo un feedback istantaneo su caricamento, interattività e metriche di spostamento del layout. È coerente con il modo in cui queste metriche vengono misurate da Chrome e segnalate ad altri strumenti di Google.

Righello di pagina Redux

Un righello Web Developer\Designer per ottenere dimensioni pixel perfette e posizionamento per misurare gli elementi su qualsiasi pagina Web. Page Ruler Redux è uno strumento di progettazione e sviluppo web di base che ti consente di ottenere misurazioni perfette ai pixel degli elementi web. È progettato per lo sviluppo del front-end di siti Web, il web design o qualsiasi attività di cui potresti aver bisogno per ottenere misurazioni pixel perfette di qualsiasi elemento web.

Righello della griglia

Crea griglie e misura facilmente la loro distanza. Ti permette di creare griglie verticali e orizzontali, in stile Photoshop. Ha anche un righello per misurare la distanza tra le tue griglie.

Delinealo

Questa estensione delinea ogni elemento HTML su una pagina web, permettendoti di vedere i bordi degli elementi. L'estensione supporta tutti i colori dell'arcobaleno (rosso, arancione, giallo, verde, blu, indaco e viola). Ha anche la funzionalità per rimuovere il contorno dopo che è stato applicato.

Emulatore di browser mobile

Testare pagine Web mobili e reattive sul desktop. Seleziona le risoluzioni dello schermo mobile più comuni con un solo clic del mouse. La pagina della scheda attiva si aprirà in una finestra separata.

Bene, questo è il mio elenco di estensioni di Chrome che ti suggerisco di avere nel tuo browser Chrome per aumentare la produttività del tuo sviluppatore web. Sì, sì... Ci sono altre estensioni utili e interessanti là fuori che non ho incluso nell'elenco sopra. Ma, quando verrà il momento, continuerò a esplorare altre fantastiche estensioni che probabilmente saranno elencate in un futuro blog.