13Sep
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 Inspector
Inspecteer een specifiek element door er met de rechtermuisknop op te klikken en Inspecteer te selecteren( of door op Q te drukken).U kunt ook de Inspector starten vanuit het menu Web Developer.
U ziet een werkbalk onder aan het scherm, 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 de
Inspect -knop op de werkbalk, zweeft u met de muis over de pagina en klikt u 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 -knop om de HTML-code van het momenteel geselecteerde element te bekijken.
Met de HTML-inspector kunt u de HTML-tags uitvouwen en samenvouwen, zodat u deze in één oogopslag eenvoudig kunt visualiseren. Als u de HTML van de pagina in een plat bestand wilt zien, kunt u View Page Source selecteren in het menu Web Developer.
CSS Inspector
Klik op de Style -knop om de CSS-regels toegepast op het geselecteerde element te bekijken.
Er is ook een CSS-eigenschappenvenster - schakel tussen de twee door op de -regels en Properties -knoppen te klikken. Om u te helpen specifieke eigenschappen te vinden, bevat het eigenschappenvenster een zoekvak.
U kunt de CSS van het element direct bewerken vanuit het venster Regels. Schakel een van de selectievakjes 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 in het deelvenster. Hier heb ik het lettertype-gewicht toegevoegd: vet; CSS-regel, waardoor de tekst van het element vet wordt.
JavaScript Scratchpad
Het Scratchpad zag ook een update met Firefox 10 en bevat nu syntax highlighting. U kunt JavaScript-code invoeren om op de huidige pagina uit te voeren.
Klik op Execute -menu en selecteer Run zodra u dit hebt gedaan. De code wordt uitgevoerd op het huidige tabblad.
Web Console
De Web Console vervangt de oude Error Console, die is verouderd en zal worden 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 webontwikkelaarsmeldingen kunt wijzigen.
Wat is een webontwikkelaarsboodschap? Het is een bericht afgedrukt op het object window.console. We kunnen bijvoorbeeld het venster .console.log( "Hello World") uitvoeren; 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.
Ververs 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. Als u bijvoorbeeld het momenteel geselecteerde object wilt verbergen, kunt u $ 0.style.display = "none" uitvoeren in de console.
Als u meer wilt weten over het gebruik van de console en de ingebouwde functies, raadpleegt u de Webconsole-pagina op de Mozilla-website voor ontwikkelaarsnetwerken.
Meer hulpmiddelen ophalen
De Meer gereedschappen ophalen Met de optie gaat u naar de add-onverzameling van de Toolbox voor webontwikkelaars 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 wellicht de DOM Inspector. De geïntegreerde ontwikkelaarstools van Firefox hebben sindsdien een lange weg afgelegd.