Share
Scopri le fantastiche nuove funzioni di Chrome 4 per gli sviluppatori, come il supporto multipiattaforma, l'integrazione straordinaria di Web Inspector e le nuove estensioni a portata di mano. Diventa sempre più difficile negare a Chrome il titolo come nuovo browser per gli sviluppatori web. Se non è ancora abbastanza, sarà presto!
Con tempi di caricamento rapidi, un motore JavaScript scattante, una solida base WebKit e il supporto di grandi nomi, Google Chrome ha conquistato una quota di mercato rispettabile, superando persino Safari per diventare il terzo browser più popolare a dicembre. Per gli sviluppatori, tuttavia, Firefox è stato l'amore di molti per la sua capacità di funzionare su qualsiasi sistema operativo e per la sua ricca offerta di componenti aggiuntivi per lo sviluppo web, come Firebug e la barra degli strumenti di sviluppo web. Ma è importante testare JavaScript in tutti i browser e disporre di un robusto set di strumenti (incluso Internet Explorer), è esattamente ciò che gli sviluppatori devono sfruttare al massimo il loro codice.
Fortunatamente per noi, le persone di Google hanno lavorato duramente per rendere Chrome multipiattaforma, integrare il fantastico Web Inspector di WebKit e aggiungere estensioni, rendendo Chrome 4 uno strumento incredibilmente utile per lo sviluppo web. In questo tutorial, mostrerò alcune delle caratteristiche che rendono Chrome 4 una grande aggiunta alla cintura di utilità per sviluppatori web.
A partire dal 25 gennaio, Chrome 4 è stato ufficialmente rilasciato come stabile per Windows. Gli utenti Mac e Linux, tuttavia, dobbiamo essere un po 'più coraggiosi per provare tutto ciò che Chrome 4 ha da offrire. Gli utenti Mac devono scaricare la versione "dev" e gli utenti Linux la versione "beta", e ne vale la pena! Dai un'occhiata ai seguenti link per ottenere una copia di Chrome per il tuo sistema operativo che supporta tutto ciò di cui parleremo in questo articolo:
Ora entriamo nel nitty gritty! In Firefox, Firebug è una manna dal cielo per gli sviluppatori, che fornisce una console di debug, manipolazione di HTML e CSS, profili JavaScript e molto altro. La gente del WebKit ha notato e negli ultimi due anni ha perfezionato un set di strumenti chiamato Web Inspector, che offre un set simile di funzioni a Firebug. In Chrome 4, Web Inspector è etichettato come "Strumenti per sviluppatori".
Oltre a Chrome 4, il Web Inspector è stato in azione per un po 'dalle precedenti versioni di Chrome e Safari, anche se è un po' nascosto. Per accedere a Web Inspector in vari browser:
Se non hai lavorato con la console di Firebug o di Web Inspector, ti stai perdendo un ottimo modo per aiutare a eseguire il debug di JavaScript. La console JavaScript offre diverse funzioni importanti, come catturare errori e presentarli in un formato utile, testare brevi bit di JavaScript e come luogo utile per registrare informazioni utili come valori variabili e tempi di esecuzione. In pratica, utilizzo regolarmente questo strumento per valutare le prestazioni dei miei programmi e garantire che determinate variabili vengano calcolate correttamente.
Oltre alla console JavaScript, è sempre utile disporre di uno strumento che ti consenta di visualizzare rapidamente le informazioni HTML e di stile di determinati elementi nella pagina. Il pannello Elementi di Web Inspector fornisce una vista a struttura ad albero del DOM (Document Object Model), che consente di approfondire il documento per selezionare un elemento di interesse. Puoi anche accedere alle informazioni di un determinato oggetto facendo clic con il pulsante destro del mouse su un elemento all'interno del browser e selezionando "Ispeziona elemento".
Infine, dovrei notare che il pannello Elementi consente molto più di una semplice ispezione. È possibile modificare e aggiungere stili, modificare html e, nelle ultime versioni, visualizzare i listener di eventi collegati a un elemento DOM selezionato. Queste funzionalità possono essere tutte molto utili quando hai a che fare con piccoli capricci che non riesci a capire.
L'ultima funzione che vorrei evidenziare all'interno di Web Inspector / Developer Tools è la scheda "Risorse". Se hai lavorato con la scheda "Net" di Firebug, noterai diverse somiglianze. In sostanza, la scheda Risorse fornisce una ripartizione di tutte le informazioni scambiate tra il browser e il server, dalle immagini al JavaScript al documento stesso. Mostra anche un sacco di informazioni utili, come ad esempio:
Uno strumento elegante che consente di ispezionare facilmente la velocità della pagina, la scheda Risorse può aiutarti a identificare e schiacciare i colli di bottiglia delle prestazioni. Fai una prova e vedi dove la tua pagina è troppo grassa, quindi abbassa le immagini e il codice per fornire un'esperienza migliore ai tuoi utenti!
Una panoramica completa di Web Inspector / Developer Tools potrebbe facilmente essere un tutorial a parte, ma abbiamo più terreno da trattare! Consiglio vivamente di verificare le seguenti risorse per saperne di più:
Ora, mentre sono sempre rimasto stupefatto dalla velocità di Safari 4 e Chrome rispetto a Firefox, a entrambi mancava una funzionalità critica: i componenti aggiuntivi. In Chrome 4, tutto cambia con l'aggiunta di "estensioni". Puoi aggiungere funzionalità a Chrome scaricando e installando estensioni o utilizzando gli strumenti standard della negoziazione: HTML, CSS e JavaScript, per scrivere le tue. Le estensioni possono essere scaricate dal Chrome Extensions Repository e dovrebbero essere abbastanza semplici da installare. Sono già state create numerose estensioni molto interessanti che aiutano lo sviluppo web, dalla convalida rapida al test della risoluzione. Diamo un'occhiata a pochi.
Uno sviluppatore web non può mai essere ossessionato dalle prestazioni, e più strumenti identificano le prestazioni lente meglio è. È qui che entra in gioco Speed Tracer, un'estensione di Chrome sviluppata da Google. Speed Tracer porta il pannello "Risorse" al livello successivo fornendo una visualizzazione del tempo necessario per eseguire attività di basso livello, come il rendering di CSS o l'analisi di HTML e JavaScript. Consiglio vivamente di dare un'occhiata a una dimostrazione video di Speed Tracer realizzata dai ragazzi di Google per avere un'idea migliore di come può aiutarti a migliorare le prestazioni delle tue applicazioni.
Passando da Firefox a Chrome, un'estensione che tutti cercheranno sostituirà la fantastica barra degli sviluppatori Web. Per coloro che non lo sanno, la barra degli strumenti di sviluppo Web si occupa delle attività che Firebug non è stato progettato per gestire, come la rapida convalida di HTML e CSS, la possibilità di disabilitare rapidamente JavaScript o immagini e uno strumento per controllare i collegamenti. Queste funzioni sono gestite con stile da Pendule, che offre gran parte delle funzionalità di base della barra degli strumenti di sviluppo Web (non del tutto tutte), mentre offre alcuni extra propri, come un selettore di colori.
Gli sviluppatori Web spesso devono assicurarsi che i loro progetti funzionino con una varietà di risoluzioni. Resolution Test consente agli sviluppatori di ridimensionare in modo efficiente la finestra del browser su una serie di risoluzioni comuni per test rapidi e facili. L'ultima versione consente anche di aprire più finestre con risoluzioni diverse con solo un paio di clic. Il Resolution Test è fantastico per assicurarsi che il pubblico di destinazione stia vedendo la pagina che vuoi che loro vedano.
Ci sono occasioni in cui è necessario non solo catturare uno screenshot dell'attuale porzione visibile di un sito Web, ma uno screenshot dell'intera pagina. Ad esempio, potresti voler stampare una pagina intera per la revisione critica tra pari o per dimostrare nel tuo portfolio. In precedenza utilizzavo uno strumento Desktop per questo, ma ora ScreenShot di Webpage fa un buon lavoro di catturare screenshot a pagina intera in pochi clic.
Ti capita mai di imbatterti in una pagina fantastica e ti chiedi "che cosa usano per costruire questo?", E spesso mi trovo a scavare attraverso il codice sorgente cercando di capire chi è l'uomo dietro il sipario. Mentre è un esercizio di allenamento utile, e uno necessario se tu veramente vuoi sapere cosa sta succedendo, Chrome Sniffer di solito può darti un'istantanea di quali framework JavaScript e PHP sono in uso per una determinata pagina. Ad esempio, accedi a NetTuts e Chrome Sniffer ci informa che viene eseguito su Wordpress utilizzando Google Analytics e jQuery.
Il futuro dello sviluppo web continua a sembrare più luminoso e luminoso! Mentre solo pochi anni fa disponevamo di un set limitato di strumenti per eseguire il debug di JavaScript, armeggiare con i CSS e visualizzare HTML, oggi abbiamo una serie di potenti opzioni. Ora che Google Chrome è diventato multipiattaforma, completamente integrato con WebKit Web Inspector e aggiunto estensioni, è uno strumento versatile per aiutare gli sviluppatori a migliorare le proprie pagine. Invito tutti voi a scaricare una copia per voi stessi e fare un tentativo per vedere se può aiutarvi a migliorare le vostre pagine, quindi tornare qui e condividere i vostri plugin e strumenti preferiti con il resto di noi!
Sapevi che puoi guadagnare fino a $ 600 per scrivere un tutorial PLUS e / o screencast per noi? Stiamo cercando tutorial dettagliati e ben scritti su HTML, CSS, PHP e JavaScript. Se sei dell'abilità, contatta Jeffrey a [email protected].
Si prega di notare che il risarcimento effettivo dipenderà dalla qualità del tutorial finale e screencast.
Accentsconagua