Haluan myöntää, että olen selainpohjaisten kehittäjätyökalujen suuri fani. Tämä on todella salainen superase web-kehittäjille.

Ilman niitä tuijottaisimme verkkosivua epätoivoisin silmin ja yrittäisimme selvittää, miksi elementit eivät ole kohdakkain, miksi kuvat eivät lataudu ja miksi muut monimutkaisemmat asiat eivät toimi.

Vaihdoin hiljattain päivittäiseen käyttöön Firefox ja tajusin, että en tiennyt käytännössä mitään Firefoxin kehittäjätyökaluista. Lisäksi tajusin, kuinka paljon ne ovat kehittyneet viime vuosien aikana! Mutta ne jätetään usein huomiotta ominaisuusartikkeleissa. Mielestäni tämä on epäreilua, joten pidin velvollisuuteni kertoa niistä.

Ja nyt on julkaistu artikkeli, joka korostaa joitain näistä työkaluista, ja sen mukana tulee visuaalisia gifiä, jotta et kyllästy lukemiseen.

Temppuja kuvakaappauksilla

Kuvakaappaus koko sivusta

Avaa Web-kehityspaneeli selaimessasi. Valitse luettelosta "Kehittäjätyökalut". Napsauta "Muokkaa työkaluja" -välilehteä ja valitse "Ota kuvakaappaus koko sivusta" -kohdan vieressä oleva valintaruutu. Napsauta sitten työkalupalkissa kamerakuvaketta. Sivun kuvakaappaus tallennetaan oletuskansioon nykyisen sivun leveyden mukaan.

Solmun kuvakaappaus

Avaa "Kehittäjätyökalut" -välilehti, valitse "Tarkastaja" -tila ja ota sitten käyttöön "Valitse elementti sivulta" -toiminto tämän tilan vasemmalla puolella. Nyt löydät tarvitsemasi solmun, napsauta sitä hiiren oikealla napsautuksella hiirellä ja valitse "Screenshot of node".

Luokan poistaminen elementistä

Joskus elementillä on useita luokkia, etkä voi heti ymmärtää, mikä luokka on vastuussa tietystä attribuutista. Valitsemalla elementin Inspector-paneelista ja napsauttamalla oikealla olevaa ".cls"-painiketta yläkulma Säännöt-paneelissa näet luettelon kaikista luokista ja voit helposti poistaa ne käytöstä tai ottaa ne uudelleen käyttöön.

Vedä edestakaisin Tarkastaja-paneelissa

Tarkastaja-paneelissa voit vetää mitä tahansa HTML-elementtiä ja muuttaa sen sijaintia sivulla. Purista vain vasenta painiketta hiirtä rivin alussa, sinun pitäisi saada käsikuvake näkyviin, niin voit tehdä tuhoa verkkosivulla.

Pikanäppäimet Selectors API:lle

Vielä yksi siisti ominaisuus"Console" ovat Selectors API:n pikanäppäimet. Palaamme "konsoliin" ja kirjoitamme:

$ ()  - pikanäppäin for document.querySelector()

$$() - pikanäppäin tiedostolle document.querySelectorAll()

Käytä viimeisen toiminnon arvoa "Konsolissa"

Käytä $_ palataksesi "Consolissa" suoritetun edellisen toiminnon arvoon

Napsauta hiiren kakkospainikkeella mitä tahansa elementtiä Inspectorissa ja valitse "Käytä konsolissa". Se liitetään väliaikaiseen muuttujaan.

JavaScriptin virheenkorjaus

Voit asentaa ohjauspisteet, ja lausekkeet, joita voit katsoa JS-lähdetiedostoissa Kehittäjätyökalujen Debugger-paneelissa, jotta näet kaikki tapahtuvat muutokset.

Kun sivu ladataan uudelleen, keskeytyskohdat ja seurantalausekkeet pysyvät ennallaan ja komentosarja pysyy halutussa paikassa.

Chrome on yksi suosituimmista selaimista nykyinen hetki. Se tarjoaa mukava ympäristö kehittäjälle, jolla on monia hyödyllisiä toimintoja. Google Chrome DevTools on virallinen työkalu, jonka avulla kehittäjät voivat saada enemmän täysi pääsy selaimeen ja sovellukseen.

DevToolsin ominaisuudet

Täällä voit itse testata sivuston näyttöä erilaisia ​​laitteita, muokkaa HTML- ja CSS-tiedostoja lennossa, mittaa suorituskykyä yksittäisiä alueita, debug JavaScript.

Voit myös käyttää yksittäisiä siruja Google Chrome Kanarian - kokeellinen Chrome-versio. Tämä versio voidaan helposti käyttää tavallisen Chromen rinnalla.

Käyttöön ja kokeiluun erilliset työkalut tarvitsemasi kehittäjä osoitepalkki selain enter

ja valitse kaikki tarvittavat työkalut.

KANSSA täysi setti Voit tarkistaa mahdollisuudet virallisilla verkkosivuilla.

Kuinka avata kehittäjätyökalu?

Voit tehdä tämän käyttämällä jotakin seuraavista vaihtoehdoista:

1. Selaimen valikon kautta

Siirry valikkoon napsauttamalla kuvaketta, napsauta "Lisää työkaluja" ja valitse "Kehittäjätyökalut".

1. Hiiren oikealla napsautuksella

Napsauta hiiren kakkospainikkeella mitä tahansa sivuelementtiä ja valitse "Tarkista elementti".

1. Pikanäppäinten käyttö

Paina pikanäppäintä käyttöympäristösi mukaan

• Windows: F12 tai myös Ctrl + Shift + I
• Mac: Cmd + Opt + I

Vinkkejä ja temppuja kehittäjätyökalujen kanssa työskentelemiseen.

Tässä on vain muutamia saatavilla olevista monista vaihtoehdoista. Joihinkin niistä käytetään kanariaa.

Selaa nopeasti tiedostojen välillä.

IN avaa välilehti lähdetiedostoilla napsauttamalla yhdistelmä Ctrl+ P (Cmd + P) ja etsi tarvittavat tiedostot.

Muotoile ()

Napsauttamalla () voit muuttaa lähdekoodin muotoilua ja palata normaalinäkymään.

HTML-elementin muokkaaminen

Voit muokata HTML-koodia lennossa valitsemalla minkä tahansa elementin DOM:sta ja kaksoisnapsauttamalla sitä. Sulkevia tunnisteita muokataan automaattisesti. Kaikki muutokset näkyvät välittömästi.

CSS-ominaisuuksien muokkaaminen

Kuten HTML:ää, voit muokata CSS:ää samalla tavalla.

Hae lähdekoodista

Voit hakea nopeasti lähdekoodi käyttämällä yhdistelmät Ctrl+ Vaihto + F (Cmd + Opt + F) ja etsi myös css-valitsimella painamalla Ctrl + F (Cmd + F).

Katkaisupisteet Javascriptin keskeytyspisteissä

Javascriptin virheenkorjauksessa on usein hyödyllistä käyttää keskeytyskohtia. Kehittäjätyökalussa voit valita rivinumeron, johon haluat lopettaa, ja ladata sivun uudelleen painamalla Ctrl + R (Cmd + R). Lataus keskeytyy tässä vaiheessa.

Hyppää rivinumeron mukaan

Painamalla Ctrl + O (Cmd + O) ja käyttämällä erityinen syntaksi, voit mennä nopeasti osoitteeseen haluttu rivi. Esimerkissä kirjoitit: 200:10, mikä tarkoittaa, että siirtymä meni riville 200 ja sarakkeelle 10.

Paljon kursoreita

Jos haluat syöttää arvoja samanaikaisesti useaan paikkaan tai muokata samaa fonttikokoa, paina Ctrl + Click (Cmd + Click) voit syöttää tietoja samanaikaisesti useisiin paikkoihin.

Ikkunan asennon muuttaminen

DevTools-ikkunassa on kolme asentoa: toisella puolella, alareunassa ja kelluvassa. Voit vaihtaa niiden välillä näppäinyhdistelmällä Ctrl + Shift + D (Cmd + Shift + D) tai ikkunan oikeassa yläkulmassa olevan erityisen valikon kautta.

Evästeiden poistaminen

Kolmannen osapuolen laajennuksien käyttäminen edellyttää joskus evästeiden poistamista. "Resurssit"-välilehdeltä löydät tarvittavat evästeet ja poistat ne kontekstivalikon kautta.

Testaus eri laitteilla

Jos sinulla on responsiivinen muotoilu, voit testata sovellustasi eri laitteilla. Tämän tilan avulla voit tarkistaa asettelun ongelmia mobiililaitteet ah tai at erilaisia ​​kokoja selain. Siirry tähän tilaan painamalla tai yhdistelmää Ctrl-näppäimet+ Vaihto + M (Cmd + Vaihto + M). Siellä voit valita tarvittava laite, näytön suunta ja koko.

Väripaletti ja pipetti

Klikkaamalla css-tyylejä päälle haluttu väri Merkinnässä sinut ohjataan välittömästi väripaletille, jossa voit valita mille tahansa elementille malliisi sopivan värin. Pipettimen avulla näet nopeasti minkä tahansa sivun elementin värin.

Värimuodon vaihtaminen

Voit vaihtaa eri värinäyttöjen välillä: RGBA, HSL ja heksadesimaali. Paina Shift + Napsauta värilohkoa muuttaa muotoa.

Kosketusnäytön emulointi

Hieno DevTools-ominaisuus auttaa simuloimaan kosketusnäyttöä ja kiihtyvyysmittaria. Voit tehdä tämän seuraamalla polkua "Console -> Emulation -> Sensors".

Vaihto elementtitilojen välillä

Usein on tarpeen tarkistaa piilotettu tyyli, kuten :hover-attribuutti. Firefoxissa paikallisen kehitysympäristön avulla voit testata sitä suoraan, kun sitä kutsutaan. Mutta Chromessa asia on toisin. On olemassa asia nimeltä "toggle element state". Sen avulla voit tarkastella määritteen ominaisuuksia suoraan tyylipaneelissa.

Tallennetaan kuvaa Data URI:na (base64-koodaus)

Voit tallentaa sivun kuvan Data URI:ksi tai muuntaa sen base64:ksi. Mitään ei tarvitse käyttää kolmannen osapuolen palvelut. Voit tehdä tämän siirtymällä "Verkko"-välilehdelle ja valitsemalla haluttu kuva, napsauta sitä hiiren kakkospainikkeella ja napsauta "Kopioi kuva tietojen URL-osoitteeksi".

Näytä User Agent Shadow DOM

Kun käytät säätimiä, kuten painiketta tai syöttöriviä, selain lisää automaattisesti piilotettuja määritteitä. Näet ne painamalla F1 (?) ja valitsemalla Näytä käyttäjäagentti DOM". Kuten esimerkissä näkyy, DOM-puumme ilmestyi piilotettu attribuutti#shadow-root div. Nyt voit tarvittaessa lisätä siihen joitain CSS-tyylejä.

Seuraavan esiintymän valitseminen

Kun haluat muuttaa samaa ominaisuutta useille elementeille, kehittäjätyökalu voi nopeuttaa tätä prosessia. Kaksoisnapsauta haluamaasi ominaisuutta ja merkitse kaikki vaaditut esiintymät painamalla Ctrl + D (Cmd + D). Nyt kun arvo vaihdetaan yhdessä paikassa, se muuttuu samanaikaisesti muissa valituissa paikoissa.

Työympäristö

Oletuksena, kun muutat jotain kehittäjätyökalussa, kaikki katoaa, kun sivu ladataan uudelleen. Työympäristön avulla voit tallentaa tarvittavat muutokset levylle. Napsauta kansiota hiiren kakkospainikkeella ja napsauta valikosta Lisää kansio paikalliseen työtilaan ja tee sama haluttu tiedosto, mutta napsauta valikossa "Map to tiedostojärjestelmä resurssi...".

Filminauhan lataus

Et voi sivuuttaa hienoa kykyä luoda elokuvanauha osavaltioista, kun lataat sivustoasi. Jos haluat tarkistaa, miten sivustosi hahmonnetaan sen latausvaiheessa, siirry "Verkko"-paneeliin, napsauta kuvaa kameralla ja paina sitten Ctrl + R (Cmd + R) ladataksesi sivu uudelleen. Tämän seurauksena saat kuvakaappauksia sivusi latautumisesta joka hetki.

DOM-latausaika

Chrome DevToolsin avulla voit tarkistaa DOM-rakenteen latausnopeuden ja sivun yleisen latausnopeuden. Voit tehdä tämän siirtymällä "Verkko"-välilehdelle, napsauttamalla "Näytä yleiskatsaus" ja painamalla Ctrl + R (Cmd + R) ladataksesi sivun uudelleen. Sininen viiva näyttää DOM-rakenteen latausajan ja punainen viiva kokonaisajan. Kaikki vasemmalla ja sinisellä viivalla estävät DOM:n lataamisen ja aiheuttavat hidasta sivun renderöintiä.

Verkon nopeusprofiilit

Voit testata sovelluksen latautumista mennessä mobiiliverkko tai rajoitetun Internet-nopeuden olosuhteissa on mahdollista luoda erityinen profiili, joka osoittaa vaadittu nopeus lataukset. Voit tehdä tämän siirtymällä "Verkko"-välilehden "Throttling" -pudotusvalikkoon ja napsauttamalla "Lisää mukautettu profiili..." luodaksesi oman profiilisi tai valitsemalla jonkin ehdotetuista.

Turvapaneeli

Sen avulla voit testata HTTPS-siirtoa ja korjata nopeasti mahdolliset varoitukset. Siirry "Turvallisuus"-paneeliin ja paina Ctrl + R (Cmd + R). Vihreä Turvalliset skriptit merkitään ja epäilyttävät skriptit merkitään punaisella.

Google AMP HTML -tarkistus

Firefoxin kehittäjätyökalujen käyttäminen Google Chromessa

Jos tarvitset Firefoxin kehittäjätyökalun, voit kokeilla Valencea, Firefox-tiimin kokeellista laajennusta. Se on tarkoitettu virheenkorjaukseen eri selaimet. Vaatii Chromen version 37 ja uudemman.

Esimerkiksi OSX:ssä voit suorittaa Chromen debug-version käyttämällä seuraavaa komentoa

Hei, rakkaat ystävät. Selaimen kehittäjäpaneeli (konsoli) on välttämätön työkalu jokaiselle verkkosivuston omistajalle, jonka avulla voit tarkastella nopeasti html-koodi sivut ja css-tyylit. Voit myös ottaa selvää sivustoa ladattaessa tapahtuneista virheistä ja tarkistaa sivuston mukautuvuuden.

Tänään harkitsemme html-koodin, css-tyylien ja mukautuvuuden käyttöä kehittäjäpaneelissa. Nämä ovat työkaluja, joita tarvitaan useimpien ongelmien ratkaisemiseen.

varten yhteinen ymmärrys Annan sinulle esimerkin siitä, milloin saatat tarvita kehittäjäpaneelia.

Oletetaan, että tulit blogiini ja kiinnostuit siitä, mitä fonttia käytän tai värjään ja niin edelleen. Yleensä tämä voi olla mikä tahansa elementti sivustolla. Ja halusit tehdä saman verkkosivustollasi.

Sitten katsot selaimen kehittäjäpaneelista haluamaasi elementtiä, josta näet sen html-koodin ja css-tyylit.

Toinen vaihtoehto paneelin käyttämiseen on, kun haluat tehdä jotain sivustolla, mutta et vielä tiedä, miltä se näyttää.

Tässä tapauksessa voit myös käyttää kehittäjäpaneelia ja katsoa, ​​miltä ideasi näyttää selaimessa. Loppujen lopuksi kaikki kehittäjäpaneelissa tekemäsi näkyy vain sinulle. Ja jotta vierailijat näkevät kokeilusi, sinun on siirrettävä tyylejä ja koodeja sivuston tiedostoihin.

Verkkovastaavan paneelin avaaminen ja käyttöliittymään tutustuminen

Kehittäjäpaneeli on läsnä jokaisessa moderni selain. Avataksesi sen, sinun on painettava näppäimistön F12-näppäintä.

Paneelin käyttöliittymä sisään eri selaimet ovat erilaisia, mutta toimintaperiaatteet ovat samanlaiset.

Suosittelen Firefox-selaimen paneelia.

Itse paneeli on jaettu kahteen osaan ja sisältää välilehdet ja työkalut työhön.

Paneelissa voit tarkastella sivun HTML-koodia ja muokata sitä siellä. Voit tehdä tämän valitsemalla haluamasi elementin, napsauttamalla hiiren kakkospainikkeella ja valitsemalla valikosta "Muokkaa nimelläHTML (MuokatakutenHTML)".

Tyylien käsittelyä varten sinun on siirryttävä CSS-paneelin osioon, jossa voit lisätä tyylejä tai poistaa olemassa olevia tyylejä poistamalla niiden vieressä olevan valintaruudun. Kaikki voidaan muuttaa.

Täältä saat selville, missä tiedostossa tyylit sijaitsevat ja millä rivillä.

Kuinka analysoida verkkosivuston html-elementtiä ja selvittää sen css-tyylit

Katsotaanpa esimerkkiäni, joka on jokaisessa artikkelissa.

Halutun elementin analysoimiseksi sinun on napsautettava sitä hiiren kakkospainikkeella ja valittava valikkokohta .

Koko periaate koodin kanssa työskentelyssä paneelissa on, että sinun on valittava html-koodi vasemmasta ikkunasta, ja oikeassa ikkunassa on tämän elementin tyylejä.

Ja jos kaikki on melko yksinkertaista tyyleillä, niin html-koodin kanssa työskennellessäsi on ymmärrettävä sen eheys. Eli jokaisella elementillä on tunnisteet, joissa se sijaitsee. Nämä voivat olla kappaleita, linkkejä, kuvia ja niin edelleen. Useimmiten nämä ovat DIV-lohkoja, joissa on avaustunniste < div> ja sulkeminen div>. Ja tämä kaikki näkyy selvästi paneelissa.

Kopioinnissa tai muokkauksessa on tärkeää ymmärtää, mistä lohko alkaa ja mihin se päättyy. Pienimmänkin virheen tekeminen tässä voi häiritä koko mallin asettelua.

Opetusvideossa käsittelen tätä asiaa yksityiskohtaisesti. Ja jos haluat nopeasti hallita perustiedot html:n ja css:n osalta suosittelen menemään sivulle "Ilmaiseksi" ja lataa Jevgeni Popovin kursseja.

Kuinka kopioida html-koodi paneelista sivuston tiedostoihin

Kehittäjäpaneelin käyttämiseen voi olla monia ideoita. Paneelissa kokeilun jälkeen tulos on siirrettävä sivuston tiedostoihin. Ja tässä on vaikeuksia. Tosiasia on, että paneeli näyttää html-koodin, ja useimmat nykyaikaiset sivustot, mukaan lukien WordPress-alustalla olevat, luodaan käyttämällä kieltä PHP ohjelmointi. Ja tämä on kuin taivas ja maa.

Katsotaanpa siis esimerkkiä bannerin kopioimisesta blogistani ja siirtämisestä toiseen sivustoon.

Tätä varten sinun on avattava kehittäjäpaneeli ja tutkittava haluttua elementtiä. Kun olet määrittänyt DIV-lohkon alun, paina etutähtäimen oikeaa painiketta ja valitse valikkokohta "Kopioi ulkoinenHTML"

Koodi on kopioitu leikepöydälle ja nyt sinun on liitettävä se kohtaan, jossa haluat nähdä tämän bannerin.

Tätä prosessia on melko vaikea kuvata, joten suosittelen katsomaan opetusvideota, jossa kaikki selitetään ja näytetään yksityiskohtaisesti.

Kuinka siirtää tyylejä kehittäjäpaneelista sivuston tiedostoihin

Kun olet päättänyt koodin ja tyylit, voit aloittaa niiden siirtämisen sivuston tiedostoihin. Koska toistaiseksi kaikki nämä muutokset näkyvät vain sinulle selaimessa, ja jos päivität sivun, kaikki muutokset katoavat.

, minulle se on kätevämpää. Koska Notepad++:ssa työskennellessä on koodin korostus ja rivinumerointi. Ja tämä auttaa paljon, kun sinun ei tarvitse vain kopioida tyylejä, vaan tehdä muutoksia olemassa oleviin. Nämä tyylit on helppo löytää rivinumeron perusteella.

Kuinka tarkistaa mallin reagointikyky kehittäjäpaneelissa

Voit vaihtaa paneelin mukautuvaan tilaan painamalla näppäinyhdistelmää CTRL+SHIFT+M tai kehittäjäpaneelin painiketta, joka sijaitsee eri tavalla eri selaimissa.

Johtopäätös

Tässä artikkelissa en tarkastellut kaikkia kehittäjäpaneelin työkaluja, vaan vain niitä, jotka voivat olla hyödyllisiä ja joita monet verkkovastaavat käyttävät useimmiten.

Paneelin käyttö ja koodin ja tyylien kanssa työskentelyn taidot ovat välttämättömiä, kun työskentelet verkkosivustojen ja kumppaniohjelmien kanssa.

Ota työkalu käyttöön, siitä on sinulle hyötyä monta kertaa.

Jos sinulla on kysyttävää, vastaan ​​mielelläni kommenteissa.

Ystävät, toivotan teille menestystä. Nähdään uusissa artikkeleissa.

Terveisin Maxim Zaitsev.

• Käännös

Nykyään Google Chrome on eniten suosittu selain verkkokehittäjien keskuudessa. Nopean kuuden viikon julkaisujakson ja jatkuvasti laajenevien kehittäjätyökalujen ansiosta selaimesta on tullut pakollinen työkalu. Useimmat teistä todennäköisesti tuntevat monet sen ominaisuudet, kuten reaaliaikainen CSS-muokkaus konsolin ja virheenkorjauksen avulla. Tässä artikkelissa tarkastellaan 15 jännittävää vinkkiä ja temppua, jotka parantavat tuottavuuttasi entisestään.

1. Vaihda tiedostoja nopeasti

Jos olet käyttänyt Sublime Text -tekstiä, et luultavasti voisi elää ilman "Mene mihinkään" ( Kääntäjän huomautus: Idea-käyttäjille tämä toiminto on nimeltään "Hae kaikkialta" ja sitä kutsutaan kaksoisnapsauta Vaihtonäppäimet). Tulet iloiseksi kuullessani, että kehittäjätyökaluissa on samanlainen ominaisuus. Paina Ctrl + P (Cmd + P, jos haluat Mac-käyttäjät), kun kehittäjäpaneeli on auki, löytääksesi ja avataksesi nopeasti minkä tahansa tiedoston projektissasi.

2. Hae lähdekoodista

Mutta entä jos haluat etsiä lähdekoodista? Voit etsiä kaikkia ladattuja tiedostoja sivulla painamalla Ctrl + Vaihto + F (Cmd + Opt + F). Tämä hakumenetelmä tukee myös säännöllisten lausekkeiden hakua.

3. Siirry riville

Kun olet avannut tiedoston Lähteet-välilehdessä, kehittäjätyökalujen avulla voit siirtyä mille tahansa tiedoston riville. Voit tehdä tämän painamalla Ctrl + G (Windows ja Linux) (tai Cmd + L (Mac)) ja syötä rivinumero.

Toinen tapa on painaa Ctrl + O, mutta kirjoita hakutekstin sijaan ":" ja rivinumero ( Kääntäjän huomautus: tai voit mennä vielä pidemmälle ja kirjoittaa tiedostonimen ja rivinumeron käyttämällä erottimena ":", kun taas koko tiedostonimen syöttäminen ei ole ollenkaan välttämätöntä, tämä on haku).

4. DOM-elementtien hakeminen konsolin avulla

Developer Tools -konsoli tukee useita hyödyllisiä taikatoimintoja ja muuttujia DOM-haussa:

• $() - vastaa tiedostoa document.querySelector(). Palauttaa ensimmäisen vastaavan elementin CSS-valitsin esim. $("DIV") palauttaa ensimmäisen DIV-elementti sivulla.
• $$() - vastaa tiedostoa document.querySelectorAll(). Palauttaa luettelon elementeistä ( Kääntäjän huomautus: eli NodeList), jotka vastaavat annettua CSS-valitsinta.
• $0 - $4 on viiden viimeisen Elementit-välilehdellä valitsemasi DOM-elementin historia, jossa $0 on viimeinen.

Tietääkseen lisää ominaisuuksia konsolit ovat mahdollisia.

5. Useiden kohteiden ja valintojen käyttäminen

Kun muokkaat tiedostoa, voit asettaa useita merkintöjä pitämällä Ctrl-näppäintä (Cmd for Mac) painettuna ja napsauttamalla haluamaasi kohtaa, jolloin voit asettaa merkin useaan paikkaan kerralla.

6. Säilytä loki

Kun otat käyttöön Säilytä loki -vaihtoehdon Konsoli-välilehdellä, tulokset tallennetaan sen sijaan, että niitä tyhjennetään aina, kun sivu ladataan. Tämä on kätevää, jos haluat tarkastella ennen sivulta poistumista ilmenevien virheiden historiaa.

(Kääntäjän huomautus: samanlainen ominaisuus on käytettävissä Verkko-välilehdessä. Kun tämä on käytössä, kyselyhistoriaa ei enää tyhjennetä sivujen välillä vaihdettaessa. Kuitenkin, jos sivu on uudelleenohjattu JavaScriptin avulla ja mikä tahansa muu kysely suoritettiin, tämän kyselyn tulosta on lähes aina mahdotonta tarkastella. Älä unohda poistaa näitä ominaisuuksia käytöstä, kun suoritat virheenkorjausta pitkään! Kehittäjätyökalut kuluttavat lähes aina enemmän järjestelmäresurssit kuin itse sivu!)

7. Pienennettyjen lähteiden esikäsittely

Työkalut Chromen kehittäjä on sisäänrakennettu "parannus" minimoiduista lähdekoodeista luettavaan muotoon. Painike sijaitsee auki vasemmassa alakulmassa tällä hetkellä tiedosto Lähteet-välilehdellä.

(Kääntäjän huomautus: joskus ei riitä, että tämä ominaisuus otetaan käyttöön automaattisesti, kuten esimerkiksi FireFoxissa)

8. Laitetila

Kehittäjätyökalut sisältävät tehokkaan tilan mobiililaitteille optimoitujen sivujen kehittämiseen. Tämä Googlen video näyttää suurimman osan siitä lisätoimintoja, kuten näytön tarkkuuden muuttaminen, kosketusnäytön kosketusten emulointi ja heikkolaatuisten verkkoyhteyksien emulointi.

9. Emuloi laitteen antureita

Toinen laitetilan hieno ominaisuus on kyky simuloida mobiililaitteiden antureita, kuten kosketusnäytöt ja kiihtyvyysmittarit. Voit jopa määrittää omasi maantieteelliset koordinaatit. Objekti sijaitsee Elementit-välilehden alaosassa kohdassa Emulointi -> Anturit.

10. Värin valinta

Kun valitset väriä tyylieditorissa, voit napsauttaa värimallia ja värinvalintaikkuna tulee näkyviin. Kun tämä ikkuna on auki, hiiren osoitin muuttuu suurennuslasiksi, jonka avulla voit valita sivun värejä pikselitarkkuudella.

11. Pakotetun elementin tila

Kehitystyökalujen avulla voit simuloida tällaisia ​​CSS-tiloja elementti DOM kuten:hover ja:focus, mikä helpottaa tyylien kirjoittamista niille. Tämä ominaisuus on käytettävissä CSS-ominaisuuseditorissa.

12. Näytä varjo DOM

Elementit, kuten syöttökentät ja painikkeet, selaimet, luodaan muista peruselementtejä jotka ovat yleensä piilossa. Voit kuitenkin siirtyä kohtaan Asetukset -> Yleiset ja ottaa käyttöön Näytä käyttäjäagentin varjo-DOM näyttääksesi nämä peruselementit Elementit-välilehdessä. Tämä antaa sinulle mahdollisuuden suunnitella ne erikseen.

13. Valitse seuraava esiintymä

Jos painat Ctrl + D (Cmd + D), kun muokkaat tiedostoja Lähteet-välilehdessä, nykyisen sanan seuraava esiintymä korostetaan lisäksi, jolloin voit muokata niitä samanaikaisesti.

14. Värimuodon muuttaminen

KANSSA käyttämällä vaihtonäppäintä+ Napsauta värimallia, CSS-muokkauspaneelissa värimuodoksi muutetaan RGBA, HSL heksadesimaali ( Kääntäjän huomautus: samaan aikaan sekä heksadesimaalilyhennetty muoto että koko, ja jopa isolla kirjaimella. Jos tämä ei sovi sinulle, selain yrittää löytää tämän värin vakiovärivakioiden luettelosta. Tämän ominaisuuden ainoa haittapuoli on se, että voidaan valita vaadittava muoto, sinun on usein "napsautettava" kaikkia muita mahdollisia vaihtoehtoja).

15. Paikallisten tiedostojen muokkaaminen työtilassa

Työtilat - tehokkain työkalu kehittäjäpaneeli, joka muuttaa kehittäjätyökalut IDE:ksi. Työalue sisältää Lähteet-välilehden tiedostorakenteen, joka vastaa paikallista projektirakennetta, joten voit nyt muokata ja tallentaa suoraan ilman, että sinun tarvitsee kopioida ja liittää muutoksia ulkoiseen tekstieditoriin.

Voit määrittää työtilat siirtymällä Lähteet-välilehteen ( Kääntäjän huomautus: Ota navigointipaneeli käyttöön, jos se on piilotettu, napsauta Näytä navigaattori -painiketta välilehden vasemmassa yläkulmassa) ja napsauta hiiren kakkospainikkeella mitä tahansa navigointipaneelin kohtaa tai vedä koko projektin välilehti kehittäjäpaneeliin. Nyt valittu kansio, sen alihakemistot ja kaikki niissä olevat tiedostot ovat muokattavissa riippumatta siitä, millä sivulla olet. Vielä suuremman käyttömukavuuden vuoksi voit käyttää tällä sivulla käytettyjä tiedostoja, joiden avulla voit muokata ja tallentaa niitä.

UPD. Kääntäjän huomautus:

Lisätty kansio on käytettävissä kaikilla välilehdillä. Siksi, jos projektissasi on useampi kuin yksi HTML-tiedosto, riittää kun avaat sen seuraavassa selaimen välilehdessä.

Voit oppia lisää työtiloista

On niin, että web-kehittäjät suosivat Firefoxia muihin selaimiin verrattuna. Heidän työssään avustavat suuresti monet hyödyllisiä lisäosia. Tässä artikkelissa tarkastelemme niitä, joita mielestämme tarvitset varmasti onnistuneeseen verkko-ohjelmointiin. Lisäksi kerromme sinulle joistakin tärkeimmistä merkittäviä ominaisuuksia nämä lisäykset.

Ensinnäkin sinun on asennettava Firebug.

Firebug

Firebug on lisäosa, jonka pitäisi ehdottomasti olla jokaisen verkkokehittäjän arsenaalissa. Jos et tiedä mistä sen löytää, mene osoitteeseen . Sinun on luultavasti käynnistettävä Firefox uudelleen aktivoidaksesi Firebugin.

Tämän jälkeen voit tarkastella Firebugia jollakin seuraavista tavoista: seuraavia menetelmiä: valikossa Työkalut > Web-kehittäjä s > Firebug tai napsauttamalla hiiren kakkospainikkeella ja valitsemalla näkyviin tulevasta valikosta "Tarkista elementti Firebugilla".

On myös toinen vaihtoehto: etsi Firebug-kuvake Firefoxista, napsauta sitä ja lisäosa-ikkuna tulee näkyviin.

Firebug on hyvin samanlainen kuin Chromen kehittäjätyökalut. Siinä on paneeli HTML-rakenteen ja -tyylien katseluun sekä konsolipaneeli virheiden, varoitusten ja lokien katseluun. Mutta se ei ole vielä kaikki: meillä on vielä muutamia vinkkejä, joista toivomme sinulle hyötyä.

Lohkon koon muuttaminen

HTML-elementti on tehty CSS-laatikkomallista, joka puolestaan ​​koostuu reunuksesta, täytteestä ja täytteestä. On mahdollista, että meidän on muutettava näitä indikaattoreita. IN tässä tapauksessa sinun on valittava elementti, jota haluat muuttaa, ja siirry "Järjestys"-paneeliin.

Täältä löydät kuvan CSS-laatikkomallista sekä sen leveys- ja korkeusominaisuudet. Vaikka näitä kahta arvoa ei ole määritelty CSS:ssä, tämä työkalu tarpeeksi älykäs havaitsemaan ne.

Jos haluat muuntaa ne, napsauta arvoa ja käytä nuolia ylös (suurentamaan sitä) ja alas (pienentääksesi sitä).

Lasketut tyylit

Ihmettelet todennäköisesti, miksi tietyt tyylit eivät usein toimi. Yksinkertaisin ja nopea tapa Tapa oppia tästä, varsinkin jos sinulla on satoja tyylejä, on tutkia Laskettu tyyli -paneelia. Alla olevassa esimerkissä tekstin värin ankkuritunniste muutetaan muotoon class.button , joka puolestaan ​​muuttuu muotoon.button.add.

Fonttiperheen oppiminen (helppo tapa)

Olet luultavasti törmännyt moniin salakirjoitusperheisiin CSS:n font-family-ominaisuudesta. Valitettavasti, tämä vaihtoehto ei auta meitä tietämään, mitä fonttia selain käyttää. Voit ratkaista tämän ongelman asentamalla Firebug-laajennus kutsutaan .

Kun asennus on valmis, lataa verkkosivusi. Nyt näet selvästi, mikä fontti on tällä hetkellä käytössä. Meidän tapauksessamme on Helvetica Neue.

Työn analyysi

Tämä saattaa tuntua triviaalilta, mutta . Sivustoa, joka latautuu nopeammin, pidetään pätevämmin suunniteltuna ja sisällöltään korkeammalla. Nopeutta ei siis voi sivuuttaa.

Verkkopaneeli

Ensimmäinen asia, joka sinun on tarkistettava arvioidaksesi verkkosivuston suorituskykyä, on verkkopaneeli. Se tallentaa verkkosivustosi HTTP-pyynnön latautuessaan. Alla oleva kuvakaappaus näyttää sivun, joka lataa 42 pyyntöä ja kestää noin 4,36 sekuntia.

Voit myöhemmin luokitella HTTP-pyynnöt niiden tyypin mukaan (HTML, CSS ja kuvat).

YSlow!

Vaihtoehtoisesti voit asentaa Yahoo!:n Firebugin laajennuksen. Aktivoinnin jälkeen näyttö tulee näkyviin lisäpaneeli, jota kutsutaan nimellä - Yslow!.

Yslow!, kuten web-hallintapaneeli, tallentaa sivusi sen latautuessa ja kertoo sitten, miksi sivustosi on hidas, ja antaa vinkkejä sen korjaamiseen. IN tässä esimerkissä testasimme verkkosivua ja se sai 86, mikä on OK luokitus.

Sivun nopeus

Voit myös asentaa laajennuksen. Se, kuten Yslow!, testaa sivuston latausnopeutta, vaikka tulokset voivat vaihdella hieman. Alla oleva esimerkki näyttää, kuinka sama sivu ansaitsi vain 82 pistettä sivun nopeudesta.

Web-kehittäjän työkalut

Ilmeisesti nämä ovat työkaluja web-kehittäjille, joilla on useita hyödyllisiä vaihtoehtoja. Seuraavaksi puhumme yhdestä niistä, joista pidimme eniten.

Kuvien katselu

Sattuu niin, että meidän on saatava tietoa kuvasta verkkosivulta. Useimmiten verkon käyttäjät alkavat kaivaa selaimen ominaisuuksiin tai napsauta kuvaa hiiren oikealla painikkeella ja valitse "Näytä kuvan tiedot":

Mutta tätä menetelmää ei voida kutsua tehokkaaksi, jos tätä menettelyä täytyy tehdä useilla kuvilla. Tässä tapauksessa on parempi käyttää "Kuvat" -lisäosavaihtoehtoa. Sitä pääsee helposti käsiksi työkalupalkin Kuva-valikon kautta.

Tämä esimerkki osoittaa, kuinka näytämme kuvan ja tiedoston koon samanaikaisesti:

Sisäänrakennetut Firefox-työkalut

Viime aikoina Firefox-versiot Verkkokehittäjille on tarjolla monia muita sisäänrakennettuja ominaisuuksia, kuten:

Tarkasta elementti

Ensi silmäyksellä saattaa tuntua, että Inspect Element Firefoxista ei eroa "Inspect Element in Firebugissa", mutta näin ei ole.

Emme käsittele Inspect Element -vaihtoehtoja, koska ne ovat identtisiä Firebugin HTML- ja CSS-paneelien kanssa, ja ne eroavat vain asettelun ja suunnittelun osalta. Työkalussa on yksi erottava piirre, joka on ehdottomasti kokeilemisen arvoinen - 3D-katselu. Käyttämällä sitä näet kaikki verkkosivun tiedot. Aktivoi napsauttamalla "Firefox Native Inspect Element" -painiketta, joka sijaitsee sivun oikeassa alakulmassa. 3D-esikatselu näyttää tältä:

Vaikka en käytä tätä Mozillan uutta ominaisuutta niin usein kuin kaikki muut, se voi olla erittäin hyödyllinen joissakin tilanteissa.

Verkkosuunnittelunäkymä

Responsive Web Designin kasvavan suosion vuoksi Firefox on luonut vastaavan kirjanmerkin selaimeensa. Tämän työkalun ansiosta voit arvioida erilaisia ​​parametreja verkkosivustoa muuttamatta selainikkunan kokoa.

Siirry kohtaan Työkalut > Verkkokehittäjä > Verkkosuunnittelunäkymä. Tässä on mitä päädyt näkemään:

Tyylieditori

Lopuksi, jos työskentelet usein CSS:n kanssa, pidät varmasti tästä ominaisuudesta. Firefoxin 11 jälkeisissä versioissa Style Editorista tuli sisäänrakennettu työkalu.

Tämä ominaisuus ei ole yhtä arvokas kuin Web Design View. Sen avulla voit muokata CSS:ää, nähdä tuloksen välittömästi selaimessa ja tallentaa muutokset, jotka siirretään suoraan lähdetiedosto CSS.

Style Editor on käytettävissä seuraavasta valikosta: Työkalut > Verkkokehittäjä > Tyylieditori.

Ja lopuksi

Firefox-lisäosissa on suuri määrä vaihtoehtoja, ja ne, joista tänään puhuimme, ovat vain pieni osa niistä.