Firefoxin Web Developer -valikossa on työkaluja sivujen tarkistamiseen, mielivaltaisen JavaScript-koodin suorittamiseen ja HTTP-pyyntöjen ja muiden viestien katseluun. Firefox 10 lisäsi täysin uuden tarkastajan työkalun ja päivitti Scratchpadin.
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.
Tarkastele tietyn elementin napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla Tarkastaa (tai painamalla Q). Voit myös käynnistää Tarkastaja Web Developer -valikosta.
Näytön alaosassa näkyy työkalupalkki, jota voit käyttää tarkastajan ohjaamiseen. Valittu elementti korostuu ja sivun muut elementit himmennetään.
Jos haluat valita uuden elementin, napsauta Tarkastaa nappia työkalupalkissa, siirrä hiiren osoitin sivulle ja napsauta elementtiä. Firefox korostaa elementtiä kohdistimen alla.
Voit siirtyä vanhempien ja lasten elementtien välillä napsauttamalla työkalupalkin leikkausruutuja.
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.
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.
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 korvaa vanhan virheenkonsolin, joka on vanhentunut ja poistetaan tulevassa Firefox-versiossa.
Konsoli näyttää neljä eri viestityyppiä, joiden avulla voit vaihtaa verkkopyyntöjen, CSS-virheilmoitusten, JavaScript-virheviestien ja web-kehittäjien viestejä.
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.
Päivitä sivu ja näet tuotetut verkkopyynnöt ja muut viestit.
Suodattaa viestit hakukentän avulla; napsauta pyyntöä, jos haluat nähdä lisätietoja.
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.
Jos haluat lisätietoja konsolin käytöstä ja sen sisäänrakennetuista toiminnoista, tutustu Web-konsoli -sivuun Mozilla Developer Network -verkkosivustossa.
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.
