Web-selaimen kehittäjätyökalujen käyttäminen

Sen lisäksi, että useimmat selaimen tekijät keskittyvät arkielämään, jotka haluavat surffata verkossa, he palvelevat myös web-kehittäjiä, suunnittelijoita ja laadunvarmistusalan ammattilaisia, jotka auttavat luomaan sovelluksia ja sivustoja, joita nämä käyttäjät käyttävät integroimalla tehokkaita työkaluja suoraan selaimiin itse.

Poissa ovat päivät, jolloin vain selaimessa olevat ohjelmointi- ja testaustyökalut löysivät sivun lähdekoodin ja mitään muuta. Tämän päivän selaimilla voit ottaa paljon syvempää sukellusta tekemällä sellaisia ​​asioita kuin JavaScript-katkelmien suorittaminen ja virheenkorjaus, DOM-elementtien tarkastaminen ja muokkaaminen, reaaliaikaisen verkkoliikenteen seuranta sovelluksen tai sivun lataamisessa tunnistamaan pullonkaulat, analysoimaan CSS-suorituskykyä ja varmistamaan, että koodisi on ei liikaa muistia tai liian monta prosessorin sykliä ja paljon muuta. Testauksen näkökulmasta voit kopioida sovelluksen tai verkkosivun tekemisen eri selaimissa sekä erilaisissa laitteissa ja käyttöympäristöissä reagoivan suunnittelun ja sisäänrakennettujen simulaattoreiden avulla. Parasta on se, että voit tehdä kaiken tämän ilman jättää selaimesi!

Alla olevat opetusohjelmat ohjaavat sinut läpi näiden kehittäjätyökalujen käytön useissa suosituissa selaimissa.

Google Chrome

Chromein kehittäjätyökaluilla voit muokata ja korjata koodin, tarkistaa yksittäisiä komponentteja, jotta he voivat ilmaista suorituskykyongelmia, simuloida erilaisia ​​laitteiden näyttöjä, mukaan lukien Android- tai iOS-versiot, ja suorittaa useita muita hyödyllisiä toimintoja.

1. Napsauta Chrome-päävalikkopainiketta, jossa on kolme vaakasuoraa viivaa ja joka sijaitsee selaimen oikeassa yläkulmassa.
2. Kun pudotusvalikko tulee näkyviin, siirrä hiiren osoitin hiiren osoittimen päälle Lisää työkaluja vaihtoehto.
3. Alivalikko pitäisi nyt näkyä. Valitse merkitty vaihtoehto Kehitystyökalut . Tämän valikkokohteen sijasta voit käyttää myös seuraavia pikanäppäimiä: Chrome OS / Windows ( CTRL + VAIHTO + I ), Mac-käyttöjärjestelmän kymmenes versio ( ALT (lisävaruste) + komento + I )
4. Nyt Chrome Developer Tools -rajapinta tulee näkyviin, kuten tässä esimerkkikuvauksessa näytetään. Chromen versiosta riippuen alkuperäinen asettelu voi olla hieman erilainen kuin tässä esitetyt. Kehitystyökalujen pääkeskus, joka sijaitsee tyypillisesti joko näytön alareunassa tai oikealla puolella, sisältää seuraavat välilehdet.elementit: Tarjoaa kykyä tarkastaa CSS- ja HTML-koodit sekä muokata CSS-lennossa ja nähdä muutosten vaikutukset reaaliajassa.Konsoli: Chromen JavaScript-konsoli mahdollistaa suoran komentojen syöttämisen sekä vianmäärityksen virheenkorjauksen.Lähteet: Voit korjata JavaScript-koodin tehokkaalla graafisella käyttöliittymällä.verkko: Luokittelee ja näyttää yksityiskohtaiset tiedot jokaisesta aktiivisesta sovelluksesta tai -sivusta, mukaan lukien täydelliset pyyntö- ja vastausotsikot sekä kehittyneet ajoitusmittarit.Aikajana: Sallii syvällisen analyysin jokaisesta selaimessa tapahtuvasta toiminnasta heti, kun sivu tai sovelluksen latauspyyntö aloitetaan.
5. Näiden osien lisäksi voit käyttää myös seuraavia työkaluja >> kuvake, joka sijaitsee oikealla puolella Aikajana välilehti.Profiili: Hajoaa CPU-profiloija ja Heap profiloija osia, tarjoaa kattavan muistin käytön ja aktiivisen sovelluksen tai sivun yleisen toteutusaikaa.turvallisuus: Korostaa sertifikaattiongelmia ja muita turvallisuuteen liittyviä ongelmia aktiivisen sivun tai sovelluksen kanssa.resurssit: Tässä voit tarkastaa evästeiden, paikallisen tallennuksen, sovelluskeskuksen ja muiden paikallisten tietolähteiden, joita nykyinen Web-sivu tai sovellus käyttää.tarkastuksia: Tarjoaa tapoja optimoida sivun tai sovelluksen latausaika ja yleinen suorituskyky.
6. Laitemoodi voit tarkastella aktiivista sivua simulaattorissa, joka tekee siitä lähes täsmälleen sellaisen kuin se näkyy jollakin yli kymmenestä laitteesta, mukaan lukien useat tunnetut Android- ja iOS-mallit, kuten iPad, iPhone ja Samsung Galaxy. Sinulla on myös mahdollisuus jäljitellä mukautettuja näyttösuosituksia sopivaksi tiettyyn kehittämis- tai testaustarpeisiisi. Voit vaihtaa Laitemoodi päälle ja pois päältä, valitse matkapuhelimen kuvake, joka sijaitsee suoraan näytön vasemmalla puolella elementit välilehti.
7. Voit myös muokata kehittäjätyökalujen ulkoasua klikkaamalla ensin valikkopainiketta, jota edustaa kolme pystysuoraan sijoitettua pistettä ja jotka sijaitsevat edellä mainittujen välilehtien oikealla puolella. Tässä pudotusvalikosta voit sijoittaa telakointiaseman uudelleen, näyttää tai piilottaa eri työkaluja sekä käynnistää entistä kehittyneitä kohteita, kuten laitteen tarkastajaa. Löydät, että dev-työkalujen käyttöliittymä on hyvin mukautettavissa tässä osiossa olevien asetusten avulla.

Mozilla Firefox

Firefoxin Web Developer -osiossa on työkaluja suunnittelijoille, kehittäjille ja testaajille, kuten tyyliohjelmalle ja pikseleihin kohdistuvalle pipetille.

Lifewire suositeltava lukeminen:Top 25 Greasemonkey- ja Tampermonkey-käyttäjäkriptit

1. Napsauta Firefoxin päävalikkopainiketta, jota edustaa kolme vaakasuoraa viivaa ja jotka sijaitsevat selainikkunan oikeassa yläkulmassa.
2. Kun avattava valikko tulee näkyviin, valitse kuvake Kehittäjä . Web-kehittäjä valikko tulee nyt näyttää ja sisältää seuraavat vaihtoehdot.Huomaat, että useimmissa valikkokohteissa on niihin liittyviä pikanäppäimiä.Työkalujen vaihto: Näyttää tai piilottaa kehittäjien työkalurivin, joka sijaitsee tyypillisesti selainikkunan alaosassa. Näppäinoikopolku: Mac OS X ( ALT (lisävaruste) + komento + I ), Windows ( CTRL + VAIHTO + I )Tarkastaja: Voit tarkastella ja / tai hienosäätää CSS- ja HTML-koodia aktiivisella sivulla sekä kannettavaan laitteeseen etähuollon avulla. Näppäinoikopolku: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + VAIHTO + C )Web-konsoli: Voit suorittaa JavaScript-lausekkeiden aktiivisen sivun sekä tarkastella erilaista kirjattua tietoa sisältäen tietoturvavaroitukset, verkkopyynnöt, CSS-viestit ja paljon muuta. Näppäinoikopolku: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + VAIHTO + K )Debugger: JavaScript-virheenkorjaus voit tarkistaa ja korjata virheet asettamalla raja-arvot, tarkistamalla DOM-solmut, mustat nyrkkeilyn ulkoiset lähteet ja paljon muuta. Kuten on kyse Tarkastaja , tämä ominaisuus tukee myös etähallintaongelmia. Näppäinoikopolku: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + VAIHTO + S) Style Editor: Voit luoda uusia tyylejä ja sisällyttää ne aktiiviseen Web-sivulle tai muokata olemassa olevia arkkeja ja testata muutosten tekemistä selaimessa yhdellä napsautuksella. Pikanäppäimet: Mac OS X, Windows ( VAIHTO + F7 )Esitys: Sisältää yksityiskohtaisen erittelyn aktiivisen sivun verkon suorituskyvystä, kehysnopeusdataa, JavaScript-suoritusaikaa ja tilaa, maaleja vilkkuvaa ja paljon muuta. Pikanäppäimet: Mac OS X, Windows ( VAIHTO + F5 )verkko: Luettelee kunkin selaimen käynnistämän verkkopyynnön vastaavan menetelmän, alkuperän aluetunnuksen, tyypin, koon ja kuluneen ajan mukaan. Näppäinoikopolku: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + VAIHTO + Q )Kehittäjien työkalupalkki: Avaa interaktiivisen komentorivien tulkki. Tulla sisään auta tulkkiin kaikkien saatavilla olevien komentoiden ja niiden oikean syntaksin luettelo. Pikanäppäimet: Mac OS X, Windows ( VAIHTO + F2 )WebIDE: Tarjoaa mahdollisuuden luoda ja suorittaa Web-sovelluksia todellisen laitteen kautta, jossa on Firefox-käyttöjärjestelmä tai Firefox-käyttöjärjestelmän simulaattori. Pikanäppäimet: Mac OS X, Windows ( VAIHTO + F8 )Selainkonsoli: Sisältää samat toiminnot kuin Web-konsoli (Katso edellä). Kaikki palautetut tiedot ovat kuitenkin koko Firefox-sovellus (mukaan lukien laajennukset ja selaintoiminnot) kuin pelkästään aktiivinen Web-sivu. Näppäinoikopolku: Mac OS X ( VAIHTO + komento + J ), Windows ( CTRL + VAIHTO + J )Responsive Design View: Voit tarkastella verkkosivua välittömästi eri resoluutioissa, asetteluissa ja näytön kooissa, jotka jäljittelevät useita laitteita, kuten tabletteja ja älypuhelimia. Näppäinoikopolku: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + VAIHTO + M )eyedropper: Näyttää yksittäisen valittujen pikseleiden heksadesimaalivärikoodin.Scratchpad: Voit kirjoittaa, muokata, integroida ja suorittaa JavaScript-koodinpätkiä ponnahdusikkunan Firefox-ikkunasta. Pikanäppäimet: Mac OS X, Windows ( VAIHTO + F4 )Sivu Lähde: Alkuperäinen selainpohjainen kehittäjätyökalu, tämä vaihtoehto näyttää vain aktiivisen sivun käytettävissä olevan lähdekoodin. Näppäinoikopolku: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )Hanki lisää työkaluja: Avaa Web-kehittäjän työkalupakki kokoelma Mozillan virallisella lisäosalla, jossa on noin kymmentä suosittua laajennusta, kuten Firebug ja Greasemonkey.

Microsoft Edge / Internet Explorer

Yleisesti viitataan nimellä F12-kehitystyökalut , kunnianosoitus pikanäppäimelle, joka on käynnistänyt käyttöliittymän Internet Explorerin aikaisemmista versioista, IE11: n ja Microsoft Edge: n dev-työkalupaketti on mennyt pitkälle alusta alkaen tarjoamalla erittäin kätevän näyttömonitorin, debuggereiden, emulaattoreiden ja -the-fly-kääntäjät.

1. Klikkaa Lisää toimintaa valikko, jota edustaa kolme pistettä ja joka sijaitsee selainikkunan oikeassa yläkulmassa. Kun avattava valikko tulee näkyviin, valitse merkitty vaihtoehto F12-kehitystyökalut . Kuten jo mainitsin, voit käyttää työkaluja myös F12 näppäinoikote.
2. Kehitysrajapinta tulee nyt näyttää, tyypillisesti selainikkunan alaosassa. Seuraavat työkalut ovat käytettävissä, joista molemmat avautuvat napsauttamalla niiden vastaavaa välilehteä tai käyttämällä oheista pikanäppäintä.DOM Explorer: Voit muokata tyylisivuja ja HTML-koodia aktiivisella sivulla, jolloin muokatut tulokset tulevat tuloksena. Käyttää IntelliSense-toimintoja tarvittaessa automaattisen täydennyskoodin käyttöön. Pikanäppäimet: (CTRL + 1) Konsoli: Antaa mahdollisuuden lähettää virheenkorjaustiedot, kuten laskurit, ajastimet, jäljet ​​ja räätälöityjä viestejä integroidun sovellusliittymän kautta. Voit myös pistää koodin aktiiviseen Web-sivulle ja muokata yksittäisille muuttujille annettuja arvoja reaaliajassa. Pikanäppäimet: (CTRL + 2) Debugger: Voit asettaa raja-arvot ja korjata koodin, kun se suoritetaan, tarvittaessa rivillä. Pikanäppäimet: (CTRL + 3) verkko: Luettelee kaikki selaimen käynnistämät verkkopyynnöt sivun lataamisen ja suorituksen aikana, mukaan lukien protokollan tiedot, sisällön tyyppi, kaistanleveyden käyttö ja paljon muuta. Pikanäppäimet: (CTRL + 4) Esitys: Yksityiskohdat kehysnopeudet, CPU: n käyttö ja muut suorituskykyyn liittyvät tiedot, joiden avulla voit nopeuttaa sivujen latausaikoja ja muita toimintoja. Pikanäppäimet: (CTRL + 5) Muisti: Auttaa erottamaan ja korjaamaan nykyisen verkkosivun potentiaaliset muistivuodot näyttämällä muistin käyttö aikajanalle sekä eri aikavälejä sisältävien tilannekuvien avulla. Pikanäppäimet: (CTRL + 6) emulointi: Näyttää, kuinka aktiivinen sivu näyttäisi erilaisissa resoluutioissa ja näytön kooissa, emuloivat älypuhelimia, tabletteja ja muita laitteita. Lisäksi se tarjoaa mahdollisuuden muokata käyttäjäagenttiä ja sivun suuntaamista sekä simuloida eri maantieteellisiä sijainteja syöttämällä leveysaste ja pituus. Pikanäppäimet: (CTRL + 7)
3. Näyttääksesi Konsoli kun taas missä tahansa muussa työkalussa, napsauta neliöpainiketta oikealla kannakkeella sen sisällä, joka sijaitsee kehitystyökalun käyttöliittymän oikeassa yläkulmassa.
4. Tyhjennä kehitystyökalujen käyttöliittymä niin, että se tulee erilliseksi ikkunaksi, napsauta painiketta kahdella CSS-suorakulmiolla tai käytä seuraavaa pikanäppäintä: CTRL + P . Voit asettaa työkalut takaisin alkuperäiseen paikkaansa painamalla CTRL + P toinen kerta.

Apple Safari (vain OS X)

Safarin monipuoliset työkalupaketit heijastavat suurta kehittäjäyhteisöä, joka hyödyntää Macia niiden suunnittelu- ja ohjelmointitarpeisiin. Tehokkaan konsolin ja perinteisten kirjautumis- ja vianmääritystoimintojen lisäksi on myös helppokäyttöinen reagoiva muotoilu ja työkalu omien selainlaajennusten luomiseen.

1. Klikkaa Safari selaimen valikossa, joka sijaitsee näytön yläreunassa. Kun avattava valikko tulee näkyviin, valitse Asetukset . Tämän valikkokohteen sijasta voit myös käyttää seuraavia pikanäppäimiä: COMMAND + PILKKU (,)
2. Safarin Asetukset käyttöliittymä on nyt näytettävä ja päällekkäinen selainikkunasi. Klikkaa Pitkälle kehittynyt kuvake, joka sijaitsee otsikon oikealla puolella.
3. Pitkälle kehittynyt mieltymykset pitäisi nyt näkyä. Tämän ruutuun on merkitty vaihtoehto Näytä valikkorivin Kehitä-valikko , mukana valintaruutu. Jos ruutuun ei ole merkitty valintaruutua, napsauta sitä kerran.
4. Sulje Asetukset napsauttamalla vasemmassa yläkulmassa olevaa punaista "x".
5. Sinun tulisi nyt nähdä uusi vaihtoehto nimetyssä selainvalikossa Kehittää , joka sijaitsee välillä kirjanmerkit ja Ikkuna . Napsauta tätä valikkokohtaa. Nyt tulee näkyviin pudotusvalikko, joka sisältää seuraavat vaihtoehdot.Avaa sivu: Voit avata aktiivisen Web-sivun jollakin Mac-tietokoneeseen asennetuista selaimista.Käyttäjä agentti: Voit valita yli kymmenestä ennalta määritetystä käyttäjäagenttiarvosta, mukaan lukien useat Chrome-, Firefox- ja Internet Explorer -versiot, sekä määrittää oman mukautetun merkkijonon.Anna Responsive Design Mode: Antaa nykyisen sivun, koska se näkyy useilla laitteilla ja eri näytön tarkkuuksilla.Näytä Web-tarkastaja: Käynnistää Safariin dev-työkalujen tärkeimmän käyttöliittymän, joka on tyypillisesti selaimen näytön alareunassa ja sisältää seuraavat osiot: elementit , verkko , voimavarat , aikatauluja , Debugger , varastointi , Konsoli .Näytä virhekonsoli: Käynnistää myös dev-työkalun käyttöliittymän suoraan Konsoli välilehti, joka näyttää virheet, varoitukset ja muut hakukelpoiset lokitiedot.Näytä sivu Lähde: Avaa voimavarat -välilehti, joka näyttää aktiivisen sivun lähdekoodin, joka on luokiteltu asiakirjan mukaan.Näytä sivun resurssit: Tee sama toiminto kuin Näytä sivun lähde vaihtoehto.Näytä leikkauseditori: Avaa uuden ikkunan, johon voit syöttää CSS- ja HTML-koodin, esikatselemalla sen tuottoa lennossa.Näytä laajennuksen rakentaja: Tarjoaa mahdollisuuden luoda tai muokata Safari-laajennuksia CSS: llä, HTML: llä ja JavaScript-ohjelmalla.Näytä ajoituksen tallennus: Avaa aikatauluja välilehti ja alkaa näyttää verkkopyynnöt, ulkoasun ja renderoinnin tiedot sekä JavaScript-suorituksen reaaliajassa.Tyhjät välimuistit: Poistaa koko kiintolevylle tallennetun välimuistin.Poista välimuistit käytöstä: Pysäyttää Safarin välimuistista, jotta kaikki sisältö haetaan palvelimelta jokaisen sivun lataamisen yhteydessä.Poista kuvia: Estää kuvien tekemisen kaikissa Web-sivuissa.Poista tyylejä: Ohittaa CSS-ominaisuudet, kun sivu ladataan.Poista käytöstä JavaScript: Rajoittaa JavaScript-suorituksen kaikilla sivuilla.Poista laajennukset käytöstä: Estää kaikkien asennettujen laajennusten käytön selaimessa.Poista sivustokohtaiset hacks käytöstä: Jos Safaria on muokattu käsittelemään aktiivisesti aktiivisen Web-sivun erityisiä ongelmia, tämä asetus estää muutokset siten, että sivu latautuu sellaisena kuin se olisi ennen näiden muutosten käyttöönottoa.Poista paikallisten tiedostojen rajoitukset käytöstä: Sallii selaimella pääsyn paikallisissa levyissäsi oleviin tiedostoihin, joka on turvallisuussyistä oletuksena rajoitettu.Poista alkuperän rajoitusten poistaminen käytöstä: Nämä rajoitukset on otettu käyttöön oletuksena estääkseen XSS: n ja muut mahdolliset vaarat. Niiden on kuitenkin usein oltava väliaikaisesti pois käytöstä kehitystarkoituksiin.Salli JavaScript Smart Search -kentästä: Kun se on käytössä, se antaa mahdollisuuden syöttää URL-osoitteita javascript: sisällytetty suoraan osoiteriville.Käsittele SHA-1-sertifikaatit epävarmoina: SHA-1-algoritmia käyttävät SSL-sertifikaatit pidetään yleisesti vanhentuneina ja haavoittuvina.