Share
Google Chrome è uno dei più grandi giocatori del Web oggi. È veloce, affidabile, ricco di funzionalità ed è estremamente utile, specialmente se sei uno sviluppatore web. Chrome consente anche l'installazione di estensioni di terze parti. Costruiamo queste estensioni con puro HTML, CSS e JavaScript. Il team di Google fa un ottimo lavoro. In questo articolo, vedremo alcuni strumenti pratici, in Chrome, che aiutano con i nostri processi di sviluppo.
Oggigiorno la reattività è ovunque. Con l'avvento dei dispositivi mobili, dobbiamo far funzionare le nostre applicazioni su molte risoluzioni diverse. Le ultime versioni di Chrome contengono meravigliosi strumenti per semplificare il nostro lavoro. Iniziamo definendo una pagina semplice e continuando a renderla reattiva. Ecco il codice HTML:
Web design reattivo
Responsive web design (RWD) è un approccio di web design ...
C'è uno stile di base sulla pagina. Le regole CSS, fanno galleggiare i collegamenti di navigazione e rendono le due sezioni posizionate l'una accanto all'altra. Il risultato è simile a questo:
Ora, avendo l'HTML e il CSS di base, possiamo iniziare a sperimentare. Poniamo i punti di interruzione delle nostre query sui media. È importante sceglierli in base al contenuto e dove il contenuto inizia a sembrare brutto. Impostare risoluzioni come 1024x768, solo perché è popolare, non è una buona pratica.
Il nostro contenuto si interrompe e vogliamo vedere la dimensione esatta del viewport. Quindi dobbiamo ridimensionare la finestra del browser. Sotto Chrome, siamo in grado di aprire il pannello degli strumenti per sviluppatori e aumentare le sue dimensioni in là.
Si noti che mentre stiamo modificando la dimensione della finestra, vediamo la sua dimensione nel file angolo in alto a destra. Questo piccolo suggerimento elimina la necessità di un controllo manuale delle dimensioni. Nel nostro caso, entrambe le sezioni sotto la navigazione sono diventate troppo schiacciate, circa 500 px. Quindi, questo è il posto giusto per la nostra prima query multimediale:
section float: left; larghezza: 50%; @media all e (max-width: 550px) section float: none; larghezza: 100%;
Se andiamo un po 'al di sotto di 550px, vedremo che la navigazione provoca uno scroll orizzontale di 540 px. Una nuova definizione di query multimediale risolve questo problema.
.nav list-style: none; margine: 10px auto; padding: 0; larghezza: 510 px; .nav li float: left; margine: 0 20px 0 0; @media all e (max-width: 540px) .nav width: auto; .nav li float: none; margine: 0; padding: 0; allineamento del testo: centro;
Il risultato è una pagina Web che funziona su una vasta gamma di schermi. Sì, la nostra pagina è semplice e ha solo due punti di interruzione, ma il processo di scelta sarà lo stesso, anche se abbiamo un sito Web gigante.
Spesso riceviamo segnalazioni di bug che la nostra applicazione non funziona correttamente su qualche dispositivo specifico. Chrome può simulare vari dispositivi, per aiutare a risolvere questo problema. Imposta la risoluzione esatta dello schermo e definisce le intestazioni HTTP corrette. Quindi, siamo in grado di ottenere una visione ravvicinata di ciò che l'utente reale vede. Il rilevamento del browser JavaScript funzionerà anche perché il browser modifica le intestazioni delle richieste.
Diciamo che dobbiamo simulare un dispositivo iPhone5. C'è un piccolo pulsante che apre il cassetto pannello e poi c'è un Emulazione linguetta.
Scegliamo il dispositivo e Chrome applica tutte le impostazioni in Schermo, Agente utente e sensori sezioni. Il browser emula anche gli eventi tattili.
La nostra pagina è ora reattiva, ma a un certo punto dobbiamo apportare modifiche. Ancora una volta, siamo in grado di utilizzare Chrome come strumento e vedere quali stili sono applicati al documento. Ad esempio, il testo nella prima sezione è troppo grande. Vogliamo cambiarlo e impostare un nuovo colore.
Il Elementi il pannello è anche utile se abbiamo bisogno di vedere una specifica regola CSS, ma non sappiamo dove sia la definizione di quella regola. C'è una sezione sul lato destro, che mostra gli stili calcolati applicati all'elemento attualmente selezionato e quindi possiamo modificarlo.
E infine, a volte, dobbiamo cercare determinati stili CSS, ma è difficile trovarli perché ci sono molte definizioni. Nel strumenti per sviluppatori pannello, abbiamo un bel campo filtro. Diciamo che vogliamo accedere alle regole per il nostro tag che ha il concetto classe applicata, ecco come potremmo farlo:
Google Chrome è uno strumento universale. Ha strumenti per supportare i designer come abbiamo fatto nell'ultima sezione di questo tutorial. Ma può fare lo stesso per gli sviluppatori, come vedremo ora.
C'è un buon debugger JavaScript, integrato in Chrome. C'è anche una console meravigliosa e un visualizzatore di sorgenti. Per illustrare come funziona tutto, aggiungeremo un po 'di logica al nostro esempio. Vogliamo cambiare l'etichetta Esempi nel menu principale a Fantastici esempi quando noi clic sul link. Useremo jQuery come aiuto, in modo che possiamo concentrarci meglio sull'esempio:
Accentsconagua
$ ('. nav'). on ('clic', funzione (e) var clicked = e.currentTarget; if (clicked.innerHTML === 'Esempi') clicked.innerHTML = 'Impressionanti esempi'; altro console.log ('do nothing ...');); Probabilmente già conosci il problema, ma vediamo come funziona il codice sopra.
Non importa cosa noi clic noi abbiamo fare niente… nella console. Quindi, sembra il nostro Se la clausola è sempre falsa. Impostiamo un punto di interruzione per vedere cosa sta succedendo.
Il debugger si arresta al nostro punto di interruzione e ci mostra le variabili definite locali. La variabile cliccato, punta all'elemento di navigazione e non al elemento. Così è innerHTML la proprietà non è assolutamente Esempi. Ecco perché abbiamo ottenuto fare niente… ogni volta. Per correggere il bug, potremmo semplicemente usarlo .nav a invece di solo .nav.
Sopra è l'approccio tradizionale che funziona se sappiamo esattamente dove impostare il punto di interruzione. Ma se lavoriamo con una base di codice di grandi dimensioni e soprattutto se dobbiamo eseguire il debug del file concatenato, diventa un po 'problematico. Iniziamo la collocazione console.log qua e là e controlla la console. Funzionerà, ma presto avremo molti dati, sarà difficile filtrare i dati e trovare le informazioni necessarie. Anche Chrome ha una soluzione per questo problema. Potremmo definire l'output nella console aggiungendo % c di fronte al testo, passato al .ceppo metodo. Successivamente, allega un secondo parametro contenente i nostri stili. Per esempio:
C'è qualcos'altro che potremmo aggiungere. Il consolle l'oggetto ha due metodi non così popolari - gruppo e groupEnd. Ci danno la possibilità di raggruppare i nostri registri.
C'è anche una libreria che combina sia lo stile che il raggruppamento dell'output, Deb.js. L'unica cosa che dobbiamo fare è includerla nella nostra pagina prima degli altri script e allegare .deb () alla fine della funzione che vogliamo ispezionare. C'è anche .debc () versione che invia gruppi compressi alla console.
Con questa libreria, possiamo ottenere gli argomenti passati alla funzione, il suo valore di ritorno alla traccia dello stack e il tempo di esecuzione. Come accennato in precedenza, i messaggi sono ben raggruppati e annidati l'uno nell'altro, quindi è molto più semplice seguire il flusso dell'applicazione.
Una delle caratteristiche killer del browser di Google è l'ecosistema dell'estensione. C'è un modo per noi di scrivere programmi installabili che vengono eseguiti nel browser e ci sono dozzine di utili API che possiamo usare. La cosa più importante però è che non dobbiamo imparare una nuova lingua. Le tecnologie che useremo sono i soliti HTML, CSS e JavaScript. Leggi la seguente introduzione allo sviluppo dell'estensione di Chrome.
C'è anche una sezione separata nel negozio web di Chrome chiamato sviluppo web. Contiene strumenti utili realizzati appositamente per noi - sviluppatori. Ce n'è uno chiamato Yez !. Porta funzionalità come terminale nel pannello Strumenti per sviluppatori. Siamo in grado di eseguire comandi di shell e ottenere il loro output in tempo reale.
L'estensione stessa non è sufficiente per eseguire comandi di shell. Questo perché non abbiamo accesso al sistema operativo. Ecco perché esiste un modulo Node.js che funge da proxy. Yez! si collega all'app Node.js in esecuzione tramite socket web. Potremmo installare il modulo tramite il gestore di pacchetti Node.js utilizzando npm install -g yez.
Yez! ha anche una bella integrazione con Git e ci mostra il ramo nella directory corrente. Siamo in grado di eseguire i comandi del terminale e ottenere immediatamente il risultato.
L'estensione è stata originariamente sviluppata come task runner. Quindi ha un'interfaccia per le definizioni delle attività. In realtà, è solo una serie di comandi della shell che si rincorrono. Stiamo ottenendo gli stessi risultati creando script di shell.
Possiamo anche vedere l'output del terminale in tempo reale. Quindi l'estensione è adatta per lo sviluppo di applicazioni Node.js. Normalmente dobbiamo riavviare il processo Node.js, ma ora tutto è visibile all'interno di Chrome.
Come sviluppatori web, spesso accade che dobbiamo eseguire richieste HTTP alle nostre applicazioni. Forse abbiamo sviluppato un'API REST o abbiamo uno script PHP che accetta i parametri POST. È disponibile uno strumento da riga di comando chiamato cURL. È probabilmente lo strumento più utilizzato per interrogare il web.
Con cURL, non dobbiamo saltare al terminale. È disponibile DHC (REST HTTP API Client). È un'estensione che ci dà il pieno controllo della richiesta HTTP. Potremmo cambiare il metodo di richiesta, le intestazioni oi parametri GET e POST. Visualizza anche il risultato della richiesta, con le sue intestazioni. Uno strumento molto utile.
Conosciamo tutti l'importanza dei test. È estremamente importante per noi sapere che i nostri programmi si comportano correttamente. A volte, la scrittura di test può essere difficile. Soprattutto se abbiamo bisogno di testare l'interfaccia utente. Per fortuna, c'è un modulo Node.js che controlla il nostro browser (Chrome) e attiva azioni come visitare una pagina, fare clic su un link o compilare un modulo. Si chiama DalekJS. È facilmente installabile eseguendo:
npm install -g dalek-cli
Facciamo un breve esperimento e vediamo come funziona tutto. In una directory appena creata, abbiamo bisogno di a package.json file con il seguente contenuto:
"nome": "progetto", "descrizione": "descrizione", "versione": "0.0.1", "devDependencies": "dalekjs": "0.0.8", "dalek-browser-chrome": "0.0.10"
Dopo aver corso installazione di npm nella stessa directory, otterremo dalekjs e Dalek-browser Chrome installato in a node_modules cartella. Inseriremo il nostro test all'interno di un file chiamato test.js. Salviamolo nella stessa cartella. Ecco uno script breve che verifica la funzionalità di ricerca di GitHub:
var url = 'https://github.com/'; module.exports = 'dovrebbe eseguire la ricerca in GitHub': function (test) test .open (url) .type ('# js-command-bar-field', 'dalek') .submit ('# top_search_form') .assert.text ('. repolist h3 a', 'dalekjs / dalek', 'C'è un collegamento con label dalekjs') .click ('[href = "/ dalekjs / dalek"]') .assert.text (' .repository-description p ',' DalekJS Base framework ',' È il repository giusto ') .done (); Per eseguire il test, dobbiamo licenziare dalek ./test.js -b chrome nella nostra console. Il risultato è che DalekJS avvia un'istanza del browser Google Chrome. Quindi apre il sito di GitHub, a quel punto puoi digitare Dalek nel campo di ricerca e va al repository corretto. Alla fine, Node.js semplicemente chiude la finestra aperta. L'output nella console è simile a questo:
DalekJS supporta PhantomJS, Firefox, InternetExplorer e Safari. È uno strumento utile e funziona su Windows, Linux e Mac. La documentazione è disponibile presso la pagina ufficiale dalekjs.com
Quando siamo di fronte al nostro computer, passiamo la maggior parte del tempo nel browser. È bello sapere che Google Chrome non è solo un programma per navigare sul Web, ma è anche un potente strumento per lo sviluppo web.
Ora ci sono tantissime estensioni utili e una community in costante crescita, quindi ti invito a provare Google Chrome, se non lo stai già utilizzando per la tua prossima app web.
