Firefoxin uudet web-kehittäjäominaisuudet yhdessä upeiden web-kehittäjien lisätoimien kanssa, kuten Firebug ja Web Developer Toolbar, tekevät Firefoxista ihanteellisen selaimen web-kehittäjille. Kaikki työkalut ovat käytettävissä Web-kehittäjän alla Firefoxin valikossa.
Page Inspector
Tarkastele tietyn elementin napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla Tarkastaa (tai painamalla Q). Voit myös käynnistää Tarkastaja Web Developer -valikosta.
Jos haluat valita uuden elementin, napsauta Tarkastaa nappia työkalupalkissa, siirrä hiiren osoitin sivulle ja napsauta elementtiä. Firefox korostaa elementtiä kohdistimen alla.
HTML-tarkastaja
Klikkaa HTML -painiketta valitaksesi valitun elementin HTML-koodin.
HTML-tarkastajan avulla voit laajentaa ja pilkkoa HTML-tunnisteita, minkä ansiosta se on helppo katsella yhdellä silmäyksellä. Jos haluat nähdä sivun HTML-tiedoston tasaisessa tiedostossa, voit valita Näytä sivun lähdekoodi Web Developer -valikosta.
CSS Inspector
Klikkaa Tyyli painiketta nähdäksesi valitun elementin CSS-säännöt.
Lisäksi on CSS-ominaisuuspaneeli - vaihda näiden kahden välillä napsauttamalla säännöt ja ominaisuudet painikkeet. Jotta voit löytää tiettyjä ominaisuuksia, ominaisuuspaneelissa on hakukenttä.
Voit muokata elementin CSS: ää lennossa Säännöt-paneelista. Poista valintaruudut käytöstä poistaaksesi säännön, napsauta tekstiä muuttamalla sääntöä tai lisäämällä omiasi sääntöjä ruudun yläosassa olevaan elementtiin. Täällä olen lisännyt font-weight: bold; CSS-sääntö, jolloin elementin teksti on lihavoitu.
JavaScript Scratchpad
Scratchpad näki myös päivityksen Firefox 10: lla, ja siinä on nyt syntaksin korostus. Voit kirjoittaa nykyisen sivun JavaScript-koodilla.
Kun olet, napsauta Suorittaa valikosta ja valitse Juosta. Koodi toimii nykyisessä välilehdessä.
Web-konsoli
Web-konsoli korvaa vanhan virheenkonsolin, joka on vanhentunut ja poistetaan tulevassa Firefox-versiossa.
Mikä on web-kehittäjäviesti? Se on viesti, joka tulostetaan window.console objektille. Voimme esimerkiksi suorittaa ohjelman window.console.log ("Hello World"); JavaScript-koodi Scratchpadilla, jotta voit tulostaa kehittäjäviestin konsoliin. Web-kehittäjät voivat integroida nämä viestit JavaScript-koodiinsa vianmäärityksen helpottamiseksi.
Firefoxista 10 alkaen Web Console voi toimia yhdessä sivun tarkastajan kanssa. $ 0 -muuttuja edustaa valitun valitun objektin tarkastajalle. Joten, jos haluat esimerkiksi piilottaa valitun objektin, voit käyttää sitä $ 0.style.display =”none” konsolissa.
Hanki lisää työkaluja
Hanki lisää työkaluja -vaihtoehto vie sinut Web-kehittäjän Toolbox-lisäosastolle Mozilla Add-Ons -sivustossa. Se sisältää joitain parhaita lisäosia web-kehittäjille, kuten Firebug ja Web Developer Toolbar.
Jos olet käyttänyt Firefoxia muutaman vuoden ajan, voit muistaa DOM-tarkastajan. Firefoxin integroidut kehittäjätyökalut ovat siitä lähtien olleet kaukana.
