7 nuove funzioni di Google Chrome che dovresti sapere

Oltre alla sua funzione di grande browser Internet quotidiano, Google Chrome è anche un ottimo strumento per lo sviluppo web attraverso DevTools.

Il DevTools è costantemente aggiornato con nuove versioni. Quindi, potrebbero esserci alcune funzionalità e strumenti DevTools che potresti aver perso durante il percorso. Pertanto, ecco 7 delle nuove funzioni di Google Chrome che dovresti conoscere .

Introduzione - Esperimento di Chrome DevTools

Chrome ha alcune funzionalità interessanti, che sono nascoste o disabilitate di default. Per attivare queste funzionalità sperimentali, vai a chrome://flags/#enable-devtools-experiments tramite la barra degli indirizzi di Chrome e attiva l'opzione Esperimento DevTool e riavvia Chrome .

Dopo il riavvio, lancia DevTools e fai clic sull'icona dell'ingranaggio in alto a destra nel pannello DevTools, e dovresti vedere la scheda "Esperimento" nella barra laterale sinistra. Verifica quali funzionalità vuoi attivare.

1. Miglioramento dell'emulatore di dispositivi mobili

Oggi avere un sito Web ottimizzato per i dispositivi mobili è un must. Con Chrome, puoi eseguire il debug dei siti web in modalità mobile tramite la funzione Mobile Emulator, che è stata completamente rinnovata e aggiunta con un sacco di nuove funzionalità.

Per abilitare Mobile Emulator, lancia DevTools e fai clic sull'icona Mobile accanto all'icona loop / search, come mostrato nello screenshot seguente. Come puoi vedere, sopra l'emulatore è ora dotato di righelli in modo da poter vedere esattamente la dimensione del viewport in cui si trova il sito.

2. Selezioni di cursori multipli

Vuoi modificare più righe insieme in un file sorgente come puoi con Sublime Text? Chrome ora supporta i cursori multipe e la selezione in DevTools. Usa Ctrl + clic o Cmd + Fai clic per selezionare più righe contemporaneamente.

3. Limitazione della connessione di rete

Ora puoi anche testare la risposta e le prestazioni del tuo sito web su varie connessioni tramite DevTools. In DevTools, premere Esc per avviare Console Drawer, quindi selezionare Emulation. Nella scheda Rete, selezionare il tipo di velocità per limitare la connessione di rete e vedere il rendimento del sito Web con la velocità selezionata.

4. Modalità offline

Google Chrome ora è dotato di modalità offline, che ti consente di aprire siti web mentre sei offline. Se stai sviluppando un'applicazione web che ha lo scopo di funzionare anche quando gli utenti sono offline, questa funzione sarebbe davvero utile. Per abilitare la modalità offline, vai a chrome://flags/#enable-offline-mode tramite la barra degli indirizzi e attiva l'opzione "Abilita modalità cache offline".

Non dimenticare di riavviare Chrome affinché l'effetto abbia luogo.

5. Trascina e rilascia HTML nell'editor

A volte è necessario copiare un elemento HTML nel tuo editor. Invece di copiarlo manualmente e incollarlo nell'editor di testo, puoi semplicemente trascinare il DOM e rilasciarlo nell'editor .

Attualmente, puoi trascinare solo un elemento e i suoi elementi figli non seguiranno. Spero che questo sarà migliorato nel prossimo aggiornamento.

6. Controllo dei CSS

Ora puoi anche controllare il tuo CSS, ad esempio ispezionando regole di stile inutili che non vengono utilizzate nella pagina web. Per fare ciò, vai alla scheda "Audits" e fai clic su "Esegui" per avviare il controllo del CSS. Verrà visualizzato un elenco di classi / selettori che non vengono utilizzati nella pagina corrente, come indicato di seguito.

7. Aggiunta di SourceMap

Con Source Map, puoi vedere la versione non compilata o incompleta di CSS o JavaScript (JS). Questa funzione è particolarmente utile per gli sviluppatori che compongono stili o JS che utilizzano Pre-processori come Sass, LESS o CoffeeScript. Con la mappa sorgente attivata, puoi trovare la posizione del codice su JS o CSS generato su una determinata riga e numero di colonna. L'ultima versione di Chrome ti consente di aggiungere manualmente la mappa sorgente.

Per fare ciò, assicurati di essere nel pannello sorgente e poi apri un file. Successivamente, fai clic con il tasto destro e seleziona Aggiungi mappa sorgente. per aggiungere il file .map .

Street Art by By Smates che trasmette la mente

Che tu lo ami o lo odi, la street art è qualcosa che è qui per restare. Andando oltre le tradizionali tele e materiali, gli artisti di strada spingono costantemente i confini e giocano con le idee per farti fermare nelle tue tracce. Uno di questi artisti di strada che sta facendo ondate adesso è Smates .Qu

(Consigli tecnici e di design)

Il browser Chrome ottiene un incremento di velocità con l'ottimizzazione guidata dei profili

Il prossimo Chrome build di Google, Chrome 55, avrà alcuni miglioramenti per rendere il browser di Google meno ricco di risorse. Nel frattempo, la società ha implementato qualcos'altro per accelerare Chrome: Profile Guided Optimization .Originariamente una funzionalità che si trova negli strumenti di sviluppo Microsoft Visual Studio, Profile Guided Optimization (PGO) è una tecnologia che tiene traccia dell'interazione dell'utente con un'applicazione.Alc

(Consigli tecnici e di design)