Hoe Firefox's Web Developer Tools te gebruiken
Het menu Webontwikkelaar van Firefox bevat hulpmiddelen voor het inspecteren van pagina's, het uitvoeren van willekeurige JavaScript-code en het bekijken van HTTP-verzoeken en andere berichten. Firefox 10 heeft een geheel nieuwe Inspector-tool en bijgewerkt Scratchpad toegevoegd.
De nieuwe webontwikkelaarfuncties van Firefox, in combinatie met geweldige add-ons voor webontwikkelaars zoals Firebug en de Web Developer Toolbar, maken Firefox een ideale browser voor webontwikkelaars. Alle tools zijn beschikbaar onder Web Developer in het menu van Firefox.
Pagina-infovenster
Inspecteer een specifiek element door er met de rechtermuisknop op te klikken en te selecteren Inspecteren (of drukken op Q). U kunt ook de Inspecteur vanuit het Web Developer-menu.
Onder aan het scherm ziet u een werkbalk, die u kunt gebruiken om het infovenster te besturen. Het geselecteerde element wordt gemarkeerd en andere elementen op de pagina worden grijs weergegeven.
Als u een nieuw element wilt kiezen, klikt u op Inspecteren op de werkbalk, beweeg uw muis over de pagina en klik op uw element. Firefox markeert het element onder je cursor.
U kunt navigeren tussen bovenliggende en onderliggende elementen door op de broodkruimels op de werkbalk te klikken.
HTML Inspector
Klik op de HTML om de HTML-code van het momenteel geselecteerde element te bekijken.
Met de HTML-inspector kun je de HTML-tags uitvouwen en samenvouwen, zodat je deze in één oogopslag eenvoudig kunt visualiseren. Als u de HTML van de pagina in een plat bestand wilt zien, kunt u selecteren Bekijk paginabron vanuit het Web Developer-menu.
CSS Inspector
Klik op de Stijl om de CSS-regels toegepast op het geselecteerde element te zien.
Er is ook een CSS-eigenschappenvenster - schakel tussen de twee door op te klikken Reglement en eigenschappen toetsen. Om u te helpen bij het vinden van specifieke eigenschappen, bevat het eigenschappenvenster een zoekvak.
U kunt de CSS van het element direct bewerken vanuit het venster Regels. Schakel het selectievakje uit om een regel te deactiveren, klik op de tekst om een regel te wijzigen of voeg uw eigen regels toe aan het element boven aan het venster. Hier heb ik de lettertype: vet; CSS-regel, waardoor de tekst van het element vet wordt.
JavaScript Scratchpad
Het Kladblok zag ook een update met Firefox 10 en bevat nu syntax highlighting. U kunt JavaScript-code typen om op de huidige pagina uit te voeren.
Als je eenmaal hebt, klik je op de uitvoeren menu en selecteer Rennen. De code wordt uitgevoerd op het huidige tabblad.
Web Console
De Web Console vervangt de oude Error Console, die is verouderd en wordt verwijderd in een toekomstige versie van Firefox.
De console geeft vier verschillende soorten berichten weer, waarmee u de zichtbaarheid van netwerkverzoeken, CSS-foutmeldingen, JavaScript-foutmeldingen en webontwikkelaarsboodschappen kunt wisselen.
Wat is een webontwikkelaarsboodschap? Het is een bericht afgedrukt op het object window.console. We kunnen bijvoorbeeld de window.console.log ("Hello World"); JavaScript-code in het Kladblok om een ontwikkelaarsboodschap af te drukken naar de console. Webontwikkelaars kunnen deze berichten integreren in hun JavaScript-code om te helpen bij foutopsporing.
Vernieuw de pagina en u ziet de gegenereerde netwerkaanvragen en andere berichten.
Gebruik het zoekvak om de berichten te filteren; klik op een verzoek als u meer details wilt zien.
Vanaf Firefox 10 kan de Web Console samenwerken met de Pagina Inspector. De variabele $ 0 vertegenwoordigt het momenteel geselecteerde object in het infovenster. Dus als u bijvoorbeeld het momenteel geselecteerde object wilt verbergen, kunt u uitvoeren $ 0.style.display =”none” in de console.
Als u meer wilt weten over het gebruik van de console en de ingebouwde functies, bekijk dan de Web Console-pagina op de Mozilla-website voor ontwikkelaarsnetwerken..
Meer hulpprogramma's ophalen
De Meer hulpprogramma's ophalen optie neemt u mee naar de add-oncollectie van de Web Developer's Toolbox op de Mozilla Add-Ons-website. Het bevat enkele van de beste add-ons voor webontwikkelaars, inclusief Firebug en de Web Developer Toolbar.
Als u Firefox al een paar jaar gebruikt, herinnert u zich de DOM Inspector misschien nog. De geïntegreerde ontwikkelaarstools van Firefox hebben sindsdien een lange weg afgelegd.
