13Sep

Kuinka käyttää Firefoxin Web-kehittäjän työkaluja

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.