Share
Bekijk de geweldige nieuwe functies van Chrome 4 voor ontwikkelaars, zoals platformonafhankelijke ondersteuning, geweldige integratie met webinspecteurs en handige nieuwe extensies. Het wordt steeds moeilijker om Chrome de titel te ontzeggen als de nieuwe browser voor webontwikkelaars. Als het er nog niet helemaal is, zal het snel zijn!
Met snelle laadtijden, een pittige JavaScript-engine, een solide basis voor WebKit en ondersteuning voor grote namen, heeft Google Chrome een respectabel marktaandeel gewonnen en zelfs Safari overtroffen om in december de op drie na populairste browser te worden. Voor ontwikkelaars is Firefox echter de lieveling van velen vanwege de mogelijkheid om op elk besturingssysteem te draaien en vanwege het uitgebreide aanbod van add-ons voor webontwikkeling, zoals Firebug en de Web Developer Toolbar. Maar het is belangrijk om JavaScript in alle browsers te testen en een robuuste set hulpmiddelen in elke browser (inclusief Internet Explorer), is precies wat ontwikkelaars nodig hebben om hun code optimaal te benutten..
Gelukkig voor ons hebben de Google-mensen hard gewerkt om Chrome cross-platform te maken, de fantastische Web Inspector van WebKit te integreren en extensies toe te voegen, waardoor Chrome 4 een ongelooflijk handig hulpmiddel is voor webontwikkeling. In deze zelfstudie laat ik enkele functies zien die Chrome 4 tot een geweldige aanvulling op de hulpprogramma-belt voor webontwikkelaars maken.
Vanaf 25 januari is Chrome 4 officieel vrijgegeven als stabiel voor Windows. Mac- en Linux-gebruikers moeten echter een beetje meer dapper zijn om alles te ervaren wat Chrome 4 te bieden heeft. Mac-gebruikers moeten de "dev" -versie downloaden en Linux-gebruikers de "bèta" -versie, en dat is het absoluut waard! Bekijk de volgende koppelingen voor een exemplaar van Chrome voor uw besturingssysteem dat alles ondersteunt wat we in dit artikel bespreken:
Laten we nu beginnen met de nitty gritty! In Firefox is Firebug een uitkomst voor ontwikkelaars, met een debugging-console, HTML & CSS-manipulatie, JavaScript-profilering en heel veel andere goedheid. De WebKit-mensen hebben de aandacht getrokken en hebben de afgelopen jaren een set hulpprogramma's, de Web Inspector, geperfectioneerd, die een vergelijkbare set functies biedt als Firebug. In Chrome 4 heeft de Web Inspector het label 'Developer Tools'.
Naast Chrome 4 is de Web Inspector al een tijdje actief in eerdere versies van Chrome en Safari, hoewel deze een beetje verborgen is. Om toegang te krijgen tot de Web Inspector in verschillende browsers:
Als je niet hebt gewerkt met de Firebug- of Web Inspector-console, mis je een goede manier om JavaScript te debuggen. De JavaScript-console heeft verschillende belangrijke functies, zoals het vastleggen van fouten en het presenteren ervan in een nuttig formaat, het testen van korte JavaScript-bits en als een handige plaats om nuttige informatie zoals variabele waarden en uitvoeringstijden te loggen. In de praktijk gebruik ik deze tool regelmatig om de prestaties van mijn programma's te evalueren en om ervoor te zorgen dat bepaalde variabelen correct worden berekend.
Naast de JavaScript-console is het altijd prettig om een tool te hebben waarmee je snel de HTML- en stijlinformatie van bepaalde elementen op de pagina kunt bekijken. Het paneel Web Inspector Elements geeft een boomstructuurweergave van het Document Object Model (DOM), zodat u in het document kunt inzoomen om een item van belang te selecteren. U kunt ook toegang krijgen tot de informatie van een bepaald object door met de rechtermuisknop op een item in de browser te klikken en 'Inspect Element' te selecteren.
Ten slotte moet ik er rekening mee houden dat het paneel Elementen veel meer biedt dan eenvoudige inspectie. U kunt stijlen aanpassen en toevoegen, html bewerken en in de nieuwste versies gebeurtenislisteners bekijken die zijn gekoppeld aan een geselecteerd DOM-element. Deze functies kunnen allemaal van pas komen als je te maken hebt met kleine eigenaardigheden die je niet helemaal kunt achterhalen.
De laatste functie die ik wil markeren in Web Inspector / Developer Tools is het tabblad "Resources". Als je met het tabblad 'Net' van Firebug hebt gewerkt, zie je verschillende overeenkomsten. In essentie geeft het tabblad Bronnen een overzicht van alle informatie die wordt uitgewisseld tussen uw browser en de server, van de afbeeldingen tot de JavaScript-code tot het document zelf. Het toont ook een ton handige informatie, zoals:
Een elegant hulpmiddel waarmee de paginasnelheid eenvoudig kan worden geïnspecteerd. Het tabblad Bronnen kan u helpen bij het identificeren en platdrukken van knelpunten in de prestaties. Probeer het eens en kijk waar uw pagina te dik is, sla uw dikke afbeeldingen en code af en zorg voor een betere ervaring voor uw gebruikers!
Een compleet overzicht van de Web Inspector / Developer Tools zou gemakkelijk zelf een tutorial kunnen zijn, maar we hebben meer grond te bieden! Ik raad ten zeerste aan om de volgende bronnen te raadplegen voor meer informatie:
Nu, terwijl ik altijd ben weggeblazen door de snelheid van Safari 4 en Chrome in vergelijking met Firefox, ontbrak het ze beide aan een kritieke functie: add-ons. In Chrome 4 verandert dit allemaal met de toevoeging van 'extensies'. U kunt functionaliteit toevoegen aan Chrome door extensies te downloaden en installeren of door de standaardhulpprogramma's van de branche te gebruiken: HTML, CSS en JavaScript om uw eigen te schrijven. Extensies kunnen worden gedownload vanuit de Chrome Extensions Repository en moeten vrij eenvoudig te installeren zijn. Er zijn al een aantal zeer overtuigende extensies gemaakt die de ontwikkeling van het web ondersteunen, van snelle validatie tot resolutietests. Laten we er een paar bekijken.
Een webontwikkelaar kan nooit echt voldoende geobsedeerd zijn door prestaties, en hoe meer tools trage prestaties identificeren, hoe beter. Dat is precies waar Speed Tracer, een Chrome-extensie ontwikkeld door Google, in het spel komt. Speed Tracer tilt het deelvenster "Bronnen" naar het volgende niveau door een visualisatie te bieden van de tijd die nodig is om taken op een laag niveau uit te voeren, zoals het renderen van CSS of het parseren van HTML en JavaScript. Ik zou het ten zeerste aanbevelen een kijkje te nemen bij een videodemonstratie van Speed Tracer die door de mensen bij Google is samengesteld om een beter idee te krijgen van hoe het u kan helpen de prestaties van uw applicaties te verbeteren..
Verhuizen van Firefox naar Chrome, een extensie waar iedereen naar op zoek is, is een vervanging van de fantastische Web Developer Toolbar. Voor degenen die niet weten, de Web Developer Toolbar gaat over de taken die Firebug niet had moeten doen, zoals snelle validatie van HTML en CSS, de mogelijkheid om JavaScript of afbeeldingen snel uit te schakelen en een tool voor het controleren van links. Die functies worden allemaal met stijl behandeld door Pendule, die een groot deel van de kernfunctionaliteit van de Web Developer Toolbar (niet helemaal alles) biedt, terwijl het een aantal goodies biedt, zoals een kleurenkiezer.
Webontwikkelaars moeten er vaak voor zorgen dat hun ontwerpen op verschillende resoluties werken. Met resolutietest kunnen ontwikkelaars hun browservenster op efficiënte wijze aanpassen aan een aantal veelvoorkomende resoluties voor snel en eenvoudig testen. Met de nieuwste versie kunt u zelfs meerdere vensters met verschillende resoluties openen met slechts een paar klikken. Resolutietest is fantastisch om ervoor te zorgen dat uw doelgroep de pagina ziet die u hen wilt laten zien.
Er zijn gelegenheden waarbij het niet alleen nodig is om een screenshot te maken van het huidige zichtbare gedeelte van een website, maar een screenshot van de hele pagina. U wilt bijvoorbeeld een volledige pagina afdrukken voor peer-critical review of om te demonstreren in uw portfolio. Hiervoor heb ik vroeger een Desktop-tool gebruikt, maar nu doet Webpage ScreenShot het goed om schermafdrukken van een volledige pagina te maken met een paar klikken.
Stuit je ooit op een fantastische pagina en vraag je af: "Waarmee gebruiken ze om dit te bouwen?" Ik wel, en vaak merk ik dat ik de broncode doorzoek om te achterhalen wie de man achter het gordijn is. Hoewel het een nuttige trainingsoefening is, en een noodzakelijke training als u werkelijk Wil je weten wat er aan de hand is, dan kan Chrome Sniffer je meestal een momentopname geven van welke JavaScript- en PHP-frameworks voor een bepaalde pagina worden gebruikt. Navigeer bijvoorbeeld naar NetTuts en Chrome Sniffer laat ons weten dat het wordt uitgevoerd op Wordpress met Google Analytics en jQuery.
De toekomst van webontwikkeling blijft er helderder en helderder uitzien! Hoewel we nog maar een paar jaar geleden een beperkte set hulpprogramma's hadden voor het opsporen van fouten in JavaScript, het sleutelen aan CSS en het weergeven van HTML, hebben we vandaag een verscheidenheid aan krachtige opties. Nu Google Chrome cross-platform is geworden, de WebKit Web Inspector volledig heeft geïntegreerd en uitbreidingen heeft toegevoegd, is het een veelzijdige tool om ontwikkelaars te helpen hun eigen pagina's te verbeteren. Ik moedig jullie allemaal aan om een kopie voor jezelf te downloaden en probeer het eens te proberen om je pagina's te verbeteren, kom dan hier terug en deel je favoriete plug-ins en hulpprogramma's met de rest van ons!
Wist je dat je tot $ 600 kunt verdienen voor het schrijven van een PLUS tutorial en / of screencast voor ons?? We zijn op zoek naar diepgaande en goed geschreven tutorials over HTML, CSS, PHP en JavaScript. Als je van het vermogen bent, neem dan contact op met Jeffrey via [email protected].
Houd er rekening mee dat de daadwerkelijke compensatie afhankelijk is van de kwaliteit van de laatste zelfstudie en screencast.
Accentsconagua