Kuinka käyttää Firefoxin Web Developer Tools -työkaluja
Firefoxin Web-kehittäjä -valikko sisältää työkaluja sivujen tarkastamiseen, mielivaltaisen JavaScript-koodin suorittamiseen ja HTTP-pyyntöjen ja muiden viestien katseluun. Firefox 10 lisäsi uuden Inspector-työkalun ja päivitti Scratchpadin.
Firefoxin uudet web-kehittäjän ominaisuudet yhdistyvät yhdessä mahtavien web-kehittäjien lisäosien, kuten Firebugin ja Web Developer Toolbarin kanssa, tekevät Firefoxista ihanteellisen selaimen web-kehittäjille. Kaikki työkalut ovat käytettävissä Web-kehittäjänä Firefoxin valikossa.
Sivutarkastaja
Tarkista tietty elementti napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla Tarkastaa (tai painamalla Q). Voit myös käynnistää Tarkastaja Web-kehittäjän valikosta.
Näet näytön alaosassa työkalurivin, jota voit käyttää tarkastajan ohjaamiseen. Valittu elementti näkyy korostettuna ja muut sivun elementit himmentyvät.
Jos haluat valita uuden elementin, napsauta Tarkastaa -painike työkalurivillä, siirrä hiiri sivulle ja napsauta elementtiä. Firefox korostaa kohdistimen alla olevaa elementtiä.
Voit navigoida vanhemman ja lapsen elementtien välillä napsauttamalla työkalurivin leipäkirjoja.
HTML-tarkastaja
Klikkaa HTML -painikkeella voit tarkastella valitun elementin HTML-koodia.
HTML-tarkastaja sallii HTML-tunnisteiden laajennuksen ja kokoonpanon, mikä helpottaa kuvien näyttämistä yhdellä silmäyksellä. Jos haluat nähdä sivun HTML: n tasaisessa tiedostossa, voit valita Näytä sivun lähdekoodi Web-kehittäjän valikosta.
CSS-tarkastaja
Klikkaa Tyyli -painiketta, jos haluat nähdä valitun elementin CSS-säännöt.
On myös CSS-ominaisuuspaneeli - vaihda näiden välillä napsauttamalla säännöt ja ominaisuudet painikkeet. Ominaisuuksien paneelissa on hakukenttä, jotta voit löytää tiettyjä ominaisuuksia.
Voit muokata elementin CSS-ohjelmaa sääntöjen paneelista. Poista valinta valitsemalla valintaruudut, napsauta tekstiä, jos haluat muuttaa sääntöä, tai lisää omia sääntöjä ruudun yläosassa olevaan elementtiin. Tässä olen lisännyt font-paino: lihavoitu; CSS-sääntö, jolloin elementin teksti on lihavoitu.
JavaScript Scratchpad
Scratchpad näki myös päivityksen Firefox 10: llä ja sisältää nyt syntaksin korostuksen. Voit kirjoittaa JavaScript-koodin, joka toimii nykyisellä sivulla.
Kun olet, napsauta Suorittaa ja valitse Juosta. Koodi toimii nykyisessä välilehdessä.
Web-konsoli
Web-konsoli korvaa vanhan virhekonsolin, joka on poistettu käytöstä ja joka poistetaan Firefoxin tulevassa versiossa.
Konsolissa on neljä erilaista viestiä, joita voit vaihtaa verkon pyyntöjen, CSS-virheilmoitusten, JavaScript-virheilmoitusten ja web-kehittäjien viestien näkyvyyden mukaan..
Mikä on web-kehittäjän viesti? Se on viesti, joka on tulostettu ikkunan.console-objektiin. Esimerkiksi voisimme ajaa window.console.log ("Hei maailma"); JavaScript-koodi Scratchpadissa, jos haluat tulostaa kehittäjäviestin konsoliin. Web-kehittäjät voivat integroida nämä viestit JavaScript-koodiinsa vianmäärityksessä.
Päivitä sivu ja näet generoidut verkkopyynnöt ja muut viestit.
Voit suodattaa viestit hakukentän avulla; napsauta pyyntöä, jos haluat nähdä lisätietoja.
Firefox 10: stä alkaen Web Console voi toimia yhdessä Page Inspectorin kanssa. $ 0 muuttuja edustaa tarkastajan valittua kohdetta. Jos esimerkiksi halusit piilottaa valitun objektin, voit ajaa $ 0.style.display =”none” konsolissa.
Jos olet kiinnostunut oppimaan lisää konsolin käytöstä ja sen sisäänrakennetuista toiminnoista, tutustu Web Console -sivulle Mozillan kehittäjäverkkosivustossa.
Hanki lisää työkaluja
Hanki lisää työkaluja vaihtoehto vie Web-kehittäjän työkalupakki-apuohjelmakokoelmaan Mozilla-lisäosien verkkosivustolla. Se sisältää joitakin web-kehittäjien parhaita lisäosia, kuten Firebug ja Web Developer Toolbar.
Jos olet käyttänyt Firefoxia muutaman vuoden ajan, saatat muistaa DOM-tarkastajan. Firefoxin integroidut kehitystyökalut ovat tulleet pitkän matkan jälkeen.
