Firefox 10, joka tulee ulos 31. tammikuuta (samana päivänä Firefox 11 tulee virallinen beta-julkaisu), lopulta kiertyy selaimen kasvavaan kehitystyökalujen joukkoon Page ja Style Inspectorilla.

Joillakin tavoin nämä työkalut ovat samankaltaisia ​​kuin Firebug, mutta ne ovat myös ainutlaatuisia Mozilla-ey.

Sen sijaan, että yrittäisitte toistaa Firebugia tai WebKit-kehitystyökaluja, Mozilla on sisällyttänyt vain olennaisimmat piirteet, keskittyen pikemminkin kokemuksen tekemiseen tyylikkääksi.

Tekeekö uusi lähestymistapa, vai tuleeko suunnittelijoille palata Firebugiin? Katsotaanpa.

Voit vetää sivunvalvojan napsauttamalla hiiren kakkospainikkeella Web-sivua ja valitsemalla "Tarkasta". (Firebug muutti äskettäin kontekstivalikon kohtaa "Inspect in Firebug" -tekstiin, joten se toimii rauhanomaisesti sisäänrakennetuilla dev-työkaluilla.) Näytön alaosassa näkyy violetti palkki, jossa on luettelo valitusta elementin vanhemmista ja lapsista.

Voit napsauttaa vanhempia tai lapsia valitsemalla ne ja napsauttamalla hiiren kakkospainikkeella elementtiä nähdäksesi sisarukset. On myös painikkeita "Tarkastele", "HTML" ja "Tyyli". Jos Firebugin välilehdet ja -painikkeet tuovat sinut ylös seinälle, tämä ulkoasu on jumaluus. Jos haluat vain nähdä DOM: n, klikattava "HTML" voi ensin viedä sinut ylös seinään.

Syömään

HTML-painikkeen napsauttaminen tuo esiin paneelin, joka näyttää sivusi muodostavien HTML-tunnisteiden hierarkian. Tässä näkymässä voit laajentaa ja tiivistää tunnisteita ja muokata niiden attribuutteja. Napauttamalla Tarkasta-painiketta voit siirtää hiiren osoittimien päälle tarkastelemaan niitä, ja kuten sinä niin, Firefox korostaa tarkastettavan elementin ja tummentaa loput sivusta.

Napsauttamalla "Tyyli" -painiketta näet Style Inspector -ohjelman, joka näyttää valitun elementin CSS-säännöt. Style Inspectorissa voit siirtyä "Säännöt" -valikosta "Ominaisuudet" -osiosta, joka antaa sinulle valitun elementin lasketut CSS-ominaisuudet sekä linkit Mozillan dokumentaatioon jokaiselle ominaisuudelle.

Tyyli-tarkastaja istuu sivun oikealla puolella, kun Sivun tarkastaja ja HTML-ruutu istuvat näytön alareunassa. Voit valita molemmat paneelit, vain yhden niistä tai ei.

The Firefox HTML inspector, expanded.

Tämä pohjimmiltaan kattaa kaiken, mitä Page ja Style Inspectors tekevät. Firefoxin aikaisemmissa versioissa esitelty web-konsoli ja JavaScript-scratchpad ovat erillisiä työkaluja. Verkkoaktiivisuuden tarkkailua ei ole. Käyttäjäagenttiä ei ole, ei muokata HTML-ominaisuutena, ei suorituskyvyn testaustyökaluja, ei ole mitään tapaa pistää uusia tunnisteita sivulle, eikä aktivoitava elementin lepotilaa. Ei ole edes "layout" -paneelia, jolla voit tarkastella elementtisi ulottuvuuksia, pehmusteita ja marginaaleja.

Kaikista näistä rajoituksista huolimatta palaan aina sivun ja tyylin tarkastajille. Palaan selkeän käyttöliittymän, huomaamattomasti sijoitettujen paneelien ja funky purppuran kromaan. Palaan takaisin, koska he ovat ilo käyttää, ja koska he vastaavat tarpeitani suurimman osan ajasta.

Tarkastajien yksinkertainen käyttöliittymä tarkoittaa myös, että ne ovat hyödyllisiä myös silloin, kun olen tehnyt ikkunan pieneksi testattavien mallien testaamiseksi. Kun he eivät täytä tarpeitani, aion vain avata Firebugin tai Web Developer Toolbarin. (Haluan tehdä tämän paljon vähemmän, jos sisäänrakennetut dev-työkalut vastaisivat Firebugin Layout- ja Net-paneeleja.)

The Firefox HTML inspector used to analyze a responsive design

Mozillan kehitystyökalujen ei tarvitse vastata niiden kilpailijoiden työkalujen ominaisuuksia, koska näiden työkalujen erikoispiirteet ovat jo Firefox-laajennuksia. Tämä tekee Firefox-dev-työkaluista ainutlaatuisen.

Nämä selaimet ovat jopa 11

HTML- ja tyyppitarkastajan lisäksi joitain innovatiivisia ominaisuuksia on suunniteltu myöhemmille Firefox-julkaisuille. Firefox 11: n kehittäjätyökalujen avulla voit tarkastella verkkosivua kolmiulotteisina tunnisteinä. Joka kerta, kun peset tagia, tuota tunnistetta kasvaa. Tämä ominaisuus on todella yllättävän hyödyllinen - näet yhdellä silmäyksellä, onko jokin elementti väärässä vanhemman sisällä ja näet, että kyseiset tunnisteet pinoavat parantamaan uusia kehittäjiä div-itis oikealle nopeasti.

The Firefox 3D inspector analylzing Web Designer Depot

Myös Firefox 11: ssä johtuvat tyylisuunnittelija. Tämä on työkalu, jonka avulla voit luoda uusia tyylejä, aivan kuten mikä tahansa hyvä tekstieditori. Tärkein ero on se, että muutoksia sovelletaan live-sivuihin heti kun kirjoitat.

Aikaisemmin tällainen live CSS -muokkaus on ollut sellaisten kehitysympäristöjen verkkotunnus Espresso , joten on mahtavaa nähdä tämä ominaisuus rakennettu suoraan selaimeen. Lisää ominaisuuksia, kuten "työkaluja sovellusten suorituskykyä koskevien ongelmien auttamiseksi", ovat suunnitellut myöhemmin tänä vuonna.

Firefox 11's CSS editor

Jopa Firefox 11: ssä vertailemalla sisäänrakennettuja Dev-työkaluja Firebugin (tai WebKit dev -työkalujen kanssa) on hieman verrattavissa iOS: n ja Androidin välillä. Edellisellä on puhdas, intuitiivinen käyttöliittymä ja muutamia innovatiivisia ideoita, mutta se on lyhyt tehonkäyttäjän ominaisuuksista.

Jälkimmäisellä on kaikki piirteet, joita voit ajatella, ja voit määrittää liekit pois, jos se on, mutta se ei ole aivan yhtä tyylikäs kuin Cupertinon wunderkind. Toisin kuin iOS ja Android, molempia työkaluja on helppo käyttää samanaikaisesti, jos haluat. Mozilla jatkaa osallistua Firebugiin ja on tehnyt selväksi, että Firebug on täällä pitkän matkan.

Firefox's HTML inspector and Firebug, existing together in harmony.

Mikä työkalu on sinulle sopiva? Tämä riippuu siitä, mitä ominaisuuksia tarvitset, mitä ominaisuuksia voit elää ilman, ja miltä tuntuu metsästää laajennuksia täyttämään haluamasi työkalun aukot. Mitä mieltä olet uusista kehittäjätyökaluista, tämä on yksi alue, jossa et voi syyttää Firefoxia WebKit-sovelluksesta.

Oletko innostunut uusien Firefox-työkalujen kehittämisestä Firefoxissa 10? Mitkä ovat sinun go-to dev-työkalusi? Kerro meille kommentit!