Tegenwoordig is het ontwikkelen en ontwerpen van webpagina's binnen ieders bereik. Webprogrammeertalen zijn zo eenvoudig dat iedereen ze kan leren en hun website in een mum van tijd kan opstarten. Bovendien zijn er op internet een groot aantal bronnen en tutorials waardoor we onze kennis kunnen uitbreiden en elk probleem dat we tegenkomen kunnen oplossen. Het kan echter nooit kwaad om een beetje hulp te hebben, en hier Chrome wordt onze beste bondgenoot.
Jaren geleden was de ultieme browser voor webontwikkelaars was Firefox. Deze browser had een reeks tools en extensies waardoor het mogelijk was om webs efficiënt en gemakkelijk te ontwerpen en te debuggen. Maar door het succes van de browser van Google gaven ontwikkelaars er de voorkeur aan hun pagina's te maken boven de meest gebruikte browser. En daarom hebben we er niet alleen een verzameling uitzonderlijke tools in, maar we kunnen ook een grote verzameling extensies vinden waarmee we websites nauwkeuriger en efficiënter kunnen programmeren.
De Chrome Developer Console
Google Chrome heeft zijn eigen ontwikkelaarstools die in de browser zijn ingebouwd. Deze tools zijn wat we kennen als "ontwikkelconsole" en we kunnen deze op elk moment starten door op de F12-toets op ons toetsenbord te drukken. Ook via Opties> Meer tools> Sectie ontwikkelaarstools .
Zoals we kunnen zien, biedt deze console voor ontwikkelaars ons een reeks tools die handig kunnen zijn bij het testen en debuggen van een website, of deze nu van ons is of op het netwerk is gepubliceerd. We kunnen 9 tools vinden, gescheiden in tabbladen, in deze sectie:
- troosten - Een console die automatisch fouten op internet detecteert, zodat we ze snel kunnen oplossen.
- Elementen : toont de HTML en CSS van de pagina, en stelt ons in staat om deze direct te wijzigen.
- bronnen : toont ons een tabel met alle bronnen die op de pagina zijn geladen.
- Netwerk : een tabblad waarop we alle verbindingen zien die de pagina maakt met de server, alle bronnen die worden gedownload en hoe lang het duurt om ze allemaal te laden.
- Performance - Een prestatietest voor het web.
- Geheugen : hiermee kunt u geheugen dumpen voor analyse.
- Aanvraag : stelt ons in staat om alle bestanden die door het web zijn gemaakt, lokaal op onze pc te bekijken.
- Security : stelt ons in staat om de beveiliging van de webpagina te controleren.
- Lighthouse - Wordt gebruikt om problemen met prestaties, toegankelijkheid en gebruikerservaring te identificeren en op te lossen.
Het is een van de meest complete ontwikkelaarsconsoles die we kunnen vinden. Maar ook moeilijk te beheersen, omdat we, aangezien de gegevens onbewerkt zijn, dieper zullen moeten graven om wijzigingen en basistests aan te brengen. En daarom zijn er uitbreidingen.
Uitbreidingen om webdesign te vergemakkelijken
Hoewel we met de ontwikkelaarstools van Chrome bijna alles kunnen doen, zijn er bepaalde taken die ingewikkeld zijn en langer duren dan zou moeten. Daarom, als we deze taak willen vereenvoudigen, kunnen we onze toevlucht nemen tot de volgende extensies. Allemaal natuurlijk helemaal gratis.
Window Resizer: test het web op verschillende schermformaten
Wanneer we een webpagina maken, is het erg belangrijk dat deze is aangepast aan alle soorten schermen en resoluties. Of we het nu openen via een smartphone, een tablet, een ultrabreed scherm of een kleine laptop, alle elementen moeten correct worden afgesteld. Aangezien we hoogstwaarschijnlijk niet zoveel schermen bij de hand hebben, kunnen we het beste onze toevlucht nemen tot het Window Resizer verlenging.
Met deze extensie kunnen we het browservenster gemakkelijk verkleinen om verschillende resoluties te simuleren, zowel verticaal als horizontaal. We kunnen de standaardresoluties kiezen of onze eigen maken. We kunnen het zelfs wijzigen met behulp van eenvoudige sneltoetsen.
Wappalyzer: ken diepgaand de technologieën van elke website
Websites worden niet langer alleen in HTML en CSS geschreven. Tegenwoordig hebben de pagina's andere talen (zoals JavaScript of PHP) waarmee we dynamische websites kunnen maken met allerlei soorten inhoud. Bovendien hebben ze meestal ook een CMS en een reeks scripts en API's van derden die ons helpen om het vorm te geven.
Als we programmeerkennis hebben, kunnen we alle informatie gemakkelijk achterhalen door de headers te analyseren. Maar als we het niet ingewikkelder willen maken, kunnen we het dankzij één klik doen Wappalyzer . Deze extensie stelt ons in staat om de frameworks te kennen die een website gebruikt, het CMS en zelfs de server waarop deze draait.
Library Sniffer: het eenvoudige alternatief voor Wappalyzer
Bibliotheek Sniffer is een extensie die erg lijkt op de vorige, dus er valt niet veel van te markeren. Dankzij dit kunnen we gemakkelijk de technologie kennen die een webpagina gebruikt, maar we zullen het op een veel meer verkapte manier doen: vanuit de adresbalk zelf. Aan de rechterkant van de URL zien we een pictogram dat aangeeft welke CMS wordt gebruikt, en ook de frameworks en services van derden.
Welk lettertype: hou je van een lettertype? ontdek wat het is
Een van de stijlkenmerken van elke website zijn de lettertypen, het lettertype. De bronnen. Een webpagina kan de browser het standaardlettertype laten gebruiken of, als u een specifiek lettertype wilt, kunt u dit in de code specificeren. Als we de code van een website analyseren, kunnen we zien of deze een gespecificeerde bron heeft of niet. Maar als we onszelf niet ingewikkeld willen maken, is het het gemakkelijkst om te installeren Welk lettertype , een extensie die er automatisch voor zorgt.
Webontwikkelaar: een alles-in-één werkbalk voor webdesign
Vaak moet een webontwikkelaar toegang hebben tot allerlei functies en tools om bijvoorbeeld scripts aan of uit te zetten, of om alle foto's te tonen of te verbergen. Dankzij Web Developer we zullen in staat zijn om een ontwikkelbalk toe te voegen aan de bovenkant van elke website.
Vanuit deze balk kunnen we on-the-fly wijzigingen aanbrengen in de HTML- en CSS-code van de pagina. We kunnen bijvoorbeeld de grootte van de foto's, de resolutie van het scherm wijzigen en zelfs elementen en services uitschakelen, zoals JavaScript, notificaties en zelfs cookies. Essentieel om te controleren hoe de pagina zich onder allerlei omstandigheden gedraagt.
Code Cola, verander de CSS "on the fly"
Groot, klein, rood, zwart, wit, gecentreerd, uitgelijnd… hoe zien de letters en andere elementen van een website er beter uit? We kunnen altijd de Chrome-ontwikkelaarstools gebruiken om te testen dankzij Code cola we kunnen "on the fly", in realtime, de stijl van elk element op een pagina zien.
Met deze extensie kunnen we onder andere het lettertype, de kleur, de stijl en zelfs de oriëntatie en grootte van zowel de tekst als elk element dat op het web is geladen, wijzigen. En dat allemaal vanuit een heel eenvoudig menu, waardoor we geen code in de editor hoeven te wijzigen.
Checklist voor webontwikkelaars: analyseer uw website om goede praktijken te volgen
Het maken van een website is een vrij lange en ingewikkelde klus, en het is gemakkelijk om tijdens het proces een fout te maken. Zelfs als we meerdere keren controleren of alles in orde is, kan er iets over het hoofd worden gezien. Dankzij de Controlelijst voor webontwikkelaars we kunnen een eenvoudige checklist aan onze browser toevoegen, waardoor we ervoor kunnen zorgen dat aan alle belangrijke punten van de browser wordt voldaan.
We zullen zien aan de hand van basispraktijken, zoals het controleren van links naar optimalisatie en SEO-taken voor Google. We kunnen alle taken die we voltooien een voor een markeren en zo zullen we niets missen.
Check My Links: links naar beneden? Maak het
Google houdt niet van websites met weggevallen links. En het is een van de meest voorkomende straffen voor positionering. Als onze website veel links heeft, en we hebben een CMS, kunnen we deze gebruiken om alles te controleren en te zien welke werken of welke niet werken. Maar als we niet met een CMS werken, wordt het erg ingewikkeld.
Dankzij de Check My Links extensie kunnen we in één oogopslag zien welke links niet werken of niet meer werken. Zo kunnen we de pagina bewerken om ze te corrigeren, of beter, ze verwijderen, waarbij we de overeenkomstige sanctie van Google vermijden.
