13Sep
Firefoxin Web Developer -valikko sisältää 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.
Page Inspector
Tarkasta tietyn elementin napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla Tarkista ( tai painamalla Q ).Voit myös käynnistää -tarkastajan Web Developer -valikosta.
Näytön alaosassa näkyy työkalurivi, jonka avulla voit hallita tarkastajaa. Valittu elementti korostuu ja sivun muut elementit himmennetään.
Jos haluat valita uuden elementin, napsauta Tarkista -painiketta työkalurivillä, siirrä hiiren osoitin sivulle ja napsauta elementtiä.Firefox korostaa elementtiä kohdistimen alla.
Voit siirtyä vanhempien ja lasten elementtien välillä napsauttamalla työkalurivin leikkausruutuja.
HTML-tarkastaja
Napsauta HTML -painiketta nähdäksesi valitun elementin HTML-koodin.
HTML-tarkastaja mahdollistaa HTML-tunnisteiden laajentamisen ja pienentämisen, joten niiden visualisointi on helppoa yhdellä silmäyksellä.Jos haluat nähdä sivun HTML-tiedoston tasaisessa tiedostossa, voit valita Web Developer -valikosta Näytä sivun lähde .
CSS-tarkastaja
Napsauta -tyyliä -painiketta nähdäksesi valitun elementin CSS-säännöt.
Myös CSS-ominaisuuspaneeli - vaihda näiden kahden välillä napsauttamalla -sääntöjä ja Properties -painikkeita. 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ä omat säännöt ruudun yläosassa olevaan elementtiin. Tässä 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 nyt se sisältää syntaksin korostuksen. Voit kirjoittaa nykyisen sivun JavaScript-koodilla.
Kun olet, napsauta Suorita -valikko ja valitse Suorita. Koodi toimii nykyisessä välilehdessä.
Web Console
Web Console 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. Esimerkiksi voimme käyttää 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.
Suodata viestejä hakukentän avulla;napsauta pyyntöä, jos haluat nähdä lisätietoja.
Web-konsoli voi toimia Firefox 10: n tavoin yhdessä Page Inspectorin kanssa.$ 0 -muuttuja edustaa nykyisin valittua kohdetta tarkastajalle. Jos esimerkiksi haluat piilottaa valitun objektin, voit käyttää $ 0.style.display = "none" -ohjelmaa konsolissa.
Jos haluat lisätietoja konsolin käytöstä ja sen sisäisistä toiminnoista, tutustu Web-konsoli -sivuun Mozilla Developer Network -verkkosivustossa.
Saat lisää työkaluja
Saat lisää työkaluja -vaihtoehto vie sinut Web-kehittäjän työkalupalkin 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.