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

2024 Kirjoittaja: Abigail Brown | [email protected]. Viimeksi muokattu: 2023-12-17 06:46

Sen lisäksi, että useimmat selainvalmistajat keskittyvät jokapäiväiseen Internetiin surffaaviin käyttäjiin, ne palvelevat myös verkkokehittäjiä, suunnittelijoita ja laadunvarmistuksen ammattilaisia, jotka auttavat rakentamaan sovelluksia ja sivustoja, joita nämä käyttäjät käyttävät integroimalla tehokkaita työkalut suoraan selaimiin.

Ajat ovat menneet, jolloin ainoat selaimen sisältämät ohjelmointi- ja testaustyökalut antoivat sinun tarkastella sivun lähdekoodia eikä mitään muuta. Nykypäivän selaimet antavat sinun sukeltaa paljon syvemmälle suorittamalla ja suorittamalla JavaScript-katkelmia, tarkistamalla ja muokkaamalla DOM-elementtejä, seuraamalla reaaliaikaista verkkoliikennettä sovelluksesi tai sivusi latautuessa pullonkaulojen tunnistamiseksi, analysoimalla CSS-suorituskykyä ja varmistamalla, että koodisi on ei käytä liikaa muistia tai liian monia prosessorijaksoja ja paljon muuta.

Testauksen näkökulmasta responsiivisen suunnittelun ja sisäänrakennettujen simulaattorien avulla voit toistaa, miten sovellus tai verkkosivu hahmonnetaan eri selaimissa sekä eri laitteilla ja alustoilla. Parasta on, että voit tehdä kaiken tämän poistumatta selaimesta!

Alla olevat opetusohjelmat opastavat sinua käyttämään näitä kehittäjätyökaluja useissa suosituissa verkkoselaimissa.

Google Chrome

Chromen kehittäjätyökalujen avulla voit muokata ja korjata koodia, tarkastaa yksittäisiä komponentteja suorituskykyongelmien paljastamiseksi, simuloida eri laitenäyttöjä, mukaan lukien Android- tai iOS-käyttöjärjestelmät, ja suorittaa useita muita hyödyllisiä toimintoja.

1. Valitse Chromen päävalikko, merkitty kolmella vaakaviivalla ja joka sijaitsee selaimen oikeassa yläkulmassa.

2. Kun avattava valikko tulee näkyviin, vie hiiri vaihtoehdon Lisää työkaluja päälle.

   

3. Alivalikon pitäisi nyt ilmestyä. Valitse vaihtoehto Kehittäjätyökalut. Voit myös käyttää seuraavaa pikanäppäintä tämän valikkokohdan sijaan: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +KOMENTO+I)

   

4. Chrome Developer Tools -käyttöliittymän pitäisi nyt tulla näkyviin, kuten tässä esimerkkikuvakaappauksessa näkyy. Chrome-versiostasi riippuen näkemäsi alkuperäinen asettelu saattaa poiketa hieman tässä esitetystä. Kehittäjätyökalujen pääkeskus, joka sijaitsee tyypillisesti joko näytön ala- tai oikealla puolella, sisältää seuraavat välilehdet.

5. Näiden osioiden lisäksi voit käyttää myös seuraavia työkaluja >>-kuvakkeen kautta, joka sijaitsee Performance-kohdan oikealla puolella. välilehti.

   • Muisti: Tarkkaile ja tallenna muistin käyttöä web-sivulla. Näet kuinka raskas JavaScript sivustollasi on.
   • Turvallisuus: Korostaa aktiivisen sivun tai sovelluksen varmenneongelmat ja muut turvallisuuteen liittyvät ongelmat.
   • Sovellus: Tarkista verkkosovelluksen käyttämät resurssit. Saat täydellisen erittelyn käytetystä.
   • Audits: Tarjoaa tapoja optimoida sivun tai sovelluksen latausaika ja yleinen suorituskyky.

   

6. Laitetila mahdollistaa aktiivisen sivun katselun simulaattorissa, joka tekee sen lähes täsmälleen sellaisena kuin se näyttäisi jollain yli kymmenestä laitteesta, mukaan lukien useat tunnetut Android-laitteet ja iOS-mallit, kuten iPad, iPhone ja Samsung Galaxy. Sinulla on myös mahdollisuus jäljitellä mukautettuja näytön resoluutioita erityisiin kehitys- tai testaustarpeisiisi sopivaksi.

   Ota Device Mode päälle ja pois valitsemalla matkapuhelinkuvake, joka sijaitsee suoraan - kohdan vasemmalla puolella. Elements-välilehti.

   

7. Voit myös muokata kehittäjätyökalujesi ulkoasua ja tuntumaa valitsemalla ensin valikkopainike, jota edustaa kolme pystysuoraan sijoitettua pistettä ja sijaitsee edellä mainittujen välilehtien oikeassa reunassa.

   Tässä avattavassa valikossa voit siirtää telakointiasemaa, näyttää tai piilottaa erilaisia työkaluja sekä käynnistää edistyneempiä kohteita, kuten laitetarkistus. Huomaat, että itse kehittäjätyökalujen käyttöliittymä on hyvin muokattavissa tässä osiossa olevien asetusten avulla.

   

Mozilla Firefox

Firefoxin verkkokehittäjäosiossa on työkaluja suunnittelijoille, kehittäjille ja testaajille, kuten tyylieditori ja pikselikohdistuspipetti.

1. Valitse Firefoxin päävalikko, jota edustaa kolme vaakasuoraa viivaa ja joka sijaitsee selainikkunan oikeassa yläkulmassa.

2. Kun avattava valikko tulee näkyviin, valitse Web Developer.

   

3. Web Developer -valikon pitäisi nyt näkyä, ja se sisältää seuraavat vaihtoehdot. Huomaat, että useimpiin valikkokohtiin on liitetty pikanäppäimiä.

   • Vaihda työkaluja: Näyttää tai piilottaa kehittäjätyökalujen käyttöliittymän, joka sijaitsee tavallisesti selainikkunan alaosassa. Pikanäppäin: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Tarkastaja: Voit tarkastaa ja/tai muokata CSS- ja HTML-koodia aktiivisella sivulla sekä kannettavassa laitteessa etävirheenkorjauksen avulla. Pikanäppäin: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Voit suorittaa JavaScript-lausekkeita aktiivisella sivulla sekä tarkastella erilaisia lokitietoja, kuten suojausvaroituksia, verkkopyyntöjä, CSS-viestejä ja paljon muuta.. Pikanäppäin: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debuggerin avulla voit paikantaa ja korjata viat asettamalla keskeytyspisteitä, tarkastelemalla DOM-solmuja, etsimällä ulkoisia lähteitä ja paljon muuta. Kuten Inspectorin tapauksessa, tämä ominaisuus tukee myös etävirheenkorjausta. Pikanäppäin: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Tyylieditori: Voit luoda uusia tyylisivuja ja liittää ne aktiiviselle verkkosivulle tai muokata olemassa olevia taulukoita ja testata, miten muutokset näkyvät selaimessa yhdellä napsautuksella. Pikanäppäin: Mac OS X, Windows (SHIFT+F7)
   • Performance: Tarjoaa yksityiskohtaisen erittelyn aktiivisen sivun verkkosuorituskyvystä, kuvanopeustiedoista, JavaScriptin suoritusajasta ja tilasta, värin vilkkumisesta ja paljon muuta. Pikanäppäin: Mac OS X, Windows (SHIFT+F5)
   • Verkko: Luetteloi jokaisen selaimen käynnistämän verkkopyynnön sekä vastaavan menetelmän, alkuperäalueen, tyypin, koon ja kuluneen ajan. Pikanäppäin: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Katso verkkosivuston tallentamaa välimuistia ja evästeitä. Pikanäppäin: (SHIFT+F9)
   • Kehittäjän työkalupalkki: Avaa interaktiivisen komentorivitulkin. Kirjoita tulkkiin help nähdäksesi luettelon kaikista käytettävissä olevista komennoista ja niiden oikeasta syntaksista. Pikanäppäin: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Tarjoaa mahdollisuuden luoda ja suorittaa verkkosovelluksia Firefox-käyttöjärjestelmää käyttävän laitteen tai Firefox OS Simulatorin kautta. Pikanäppäin: Mac OS X, Windows (SHIFT+F8)
   • Selainkonsoli: Tarjoaa samat toiminnot kuin verkkokonsoli (katso yllä). Kaikki palautetut tiedot koskevat kuitenkin koko Firefox-sovellusta (mukaan lukien laajennukset ja selaintason toiminnot) eikä vain aktiivista verkkosivua. Pikanäppäin: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsiivisen suunnittelun näkymä: Voit tarkastella verkkosivua välittömästi eri resoluutioilla, asetteluilla ja näyttökooilla jäljitelläksesi useita laitteita, kuten tabletteja ja älypuhelimia. Pikanäppäin: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Pippuri: Näyttää yksittäin valittujen pikselien heksadesimaalivärikoodin.
   • Scratchpad: Scratchpadin avulla voit kirjoittaa, muokata, integroida ja suorittaa JavaScript-koodinpätkiä avautuvassa Firefox-ikkunassa. Avaa interaktiivinen JavaScript-dokumentti, jonka avulla voit kirjoittaa koodia ja testata sitä verkkosivustossa. Pikanäppäin: (SHIFT+F4)
   • Palvelutyöntekijät: Tee virheenkorjaus palvelutyöntekijöille verkkosovelluksestasi. Saat yksityiskohtaista tietoa niiden suorituskyvystä ja virheistä.
   • Sivun lähde: Alkuperäinen selainpohjainen kehittäjätyökalu, tämä vaihtoehto yksinkertaisesti näyttää aktiivisen sivun käytettävissä olevan lähdekoodin. Pikanäppäin: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Hanki lisää työkaluja: Avaa Web Developer's Toolbox -kokoelman Mozillan virallisella lisäosatsivustolla, jossa on noin tusina suosittua laajennusta, kuten kuten Firebug ja Greasemonkey.

   

Microsoft Edge/Internet Explorer

Kutsutaan yleisesti nimellä F12 Developer Tools, kunnianosoitus pikanäppäimelle, joka on käynnistänyt käyttöliittymän Internet Explorerin, IE11:n ja Microsoft Edgen kehitystyökalusarjan aiemmista versioista lähtien. on kulkenut pitkän tien perustamisestaan lähtien tarjoamalla erittäin kätevän joukon näyttöjä, virheenkorjausohjelmia, emulaattoreita ja reaaliaikaisia kääntäjiä.

Microsoft ei enää tue Internet Exploreria ja suosittelee päivittämistä uudempaan Edge-selaimeen. Siirry heidän sivustolleen ladataksesi uusin versio.

1. Valitse Lisää toimintoja, jota edustaa kolme pistettä ja joka sijaitsee selainikkunan oikeassa yläkulmassa.

   

2. Kun avattava valikko tulee näkyviin, valitse vaihtoehto Kehittäjätyökalut.

   

3. Kehitysliittymän pitäisi nyt näkyä, tyypillisesti selainikkunan alaosassa. Saatavilla on seuraavat työkalut, joista jokainen pääsee käsiksi napsauttamalla vastaavaa välilehden otsikkoa tai käyttämällä mukana tulevaa pikanäppäintä.

   

   • DOM Explorer: Voit muokata tyylisivuja ja HTML-koodia aktiivisella sivulla, jolloin muokatut tulokset hahmonnetaan. Käyttää IntelliSense-toimintoa koodin automaattiseen täydennykseen tarvittaessa. Pikanäppäin: (CTRL+1)
   • Console: Tarjoaa mahdollisuuden lähettää virheenkorjaustietoja, kuten laskureita, ajastimia, jälkiä ja mukautettuja viestejä integroidun API:n kautta. Voit myös lisätä koodia aktiiviselle verkkosivulle ja muokata yksittäisille muuttujille määritettyjä arvoja reaaliajassa. Pikanäppäin: (CTRL+2)
   • Debugger: Voit asettaa keskeytyskohtia ja virheenkorjauksen koodin suorittamisen aikana, tarvittaessa rivi riviltä. Pikanäppäin: (CTRL+3)
   • Verkko: Luetteloi jokainen selaimen sivun latauksen ja suorituksen aikana käynnistämä verkkopyyntö, mukaan lukien protokollan tiedot, sisältötyyppi, kaistanleveyden käyttö ja paljon muuta. Pikanäppäin: (CTRL+4)
   • Performance: Yksityiskohtaiset tiedot kuvanopeudesta, suorittimen käyttöasteesta ja muista suorituskykyyn liittyvistä mittareista, jotka auttavat sinua nopeuttamaan sivujen latausaikoja ja muita toimintoja. Pikanäppäin: (CTRL+5)
   • Muisti: Auttaa eristämään ja korjaamaan mahdollisia muistivuotoja nykyisellä verkkosivulla näyttämällä muistin käytön aikajanan sekä tilannekuvia eri aikaväleiltä. Pikanäppäin: (CTRL+6)
   • Emulointi: Näyttää, kuinka aktiivinen sivu hahmonnettaisiin eri resoluutioilla ja näyttökokoilla, emuloimalla älypuhelimia, tabletteja ja muita laitteita. Se tarjoaa myös mahdollisuuden muokata käyttäjäagenttia ja sivun suuntaa sekä simuloida erilaisia maantieteellisiä sijainteja syöttämällä leveys- ja pituusasteet. Pikanäppäin: (CTRL+7)

4. Näytä Console samalla kun missä tahansa muussa työkalussa paina neliöpainiketta, jonka sisällä on oikea hakasulke, joka sijaitsee kehitystyökalujen käyttöliittymän oikeasta yläkulmasta.

   

5. Jos haluat irrottaa kehittäjätyökalujen käyttöliittymän, jotta siitä tulee erillinen ikkuna, valitse kaksi peräkkäistä suorakulmiota tai käytä seuraavaa pikanäppäintä: CTRL+P. Voit asettaa työkalut takaisin alkuperäisille paikoilleen painamalla CTRL+P toisen kerran.

   

Apple Safari (vain Mac)

Safarin monipuolinen kehitystyökalusarja kuvastaa suurta kehittäjäyhteisöä, joka käyttää Macia suunnittelu- ja ohjelmointitarpeisiinsa. Tehokkaan konsolin ja perinteisten loki- ja virheenkorjausominaisuuksien lisäksi tarjolla on myös helppokäyttöinen responsiivinen suunnittelutila ja työkalu omien selainlaajennusten luomiseen.

1. Valitse Safari näytön yläreunassa olevasta selainvalikosta. Kun avattava valikko tulee näkyviin, valitse Preferences. Voit myös käyttää seuraavaa pikanäppäintä tämän valikkokohdan sijasta: COMMAND+COMMA(,)

   

2. Safarin Preferences käyttöliittymän pitäisi nyt näkyä selainikkunan päällä. Valitse Lisäasetukset-kuvake, joka sijaitsee otsikon oikeassa reunassa.

   

3. Lisäasetukset-asetusten pitäisi nyt olla näkyvissä. Tämän näytön alareunassa on vaihtoehto Näytä Kehitysvalikko valikkorivillä sekä valintaruutu. Jos ruudussa ei ole valintamerkkiä, napsauta sitä kerran lisätäksesi sen.

   

4. Sulje Preferences-käyttöliittymä.

5. Sinun pitäisi nyt huomata uusi vaihtoehto selaimen valikossa Kehitä, joka sijaitsee Kirjanmerkkien ja Ikkunan välissä. Napsauta tätä valikkokohtaa. Näyttöön tulee nyt avattava valikko, joka sisältää seuraavat vaihtoehdot.

   • Avaa sivu: Voit avata aktiivisen verkkosivun jossakin muussa Maciin tällä hetkellä asennetussa selaimessa.
   • User Agent: Voit valita yli tusinasta enn alta määritetystä käyttäjäagenttiarvosta, mukaan lukien useat Chromen, Firefoxin ja Internet Explorerin versiot, sekä määrittää omia mukautettuja arvoja merkkijono.
   • Siirry reagoivaan suunnittelutilaan: Muodostaa nykyisen sivun sellaiseksi kuin se näyttäisi eri laitteilla ja eri näytön tarkkuudella.
   • Näytä Web Inspector: Käynnistää Safarin kehitystyökalujen pääliittymän, joka sijoitetaan tavallisesti selainnäytön alaosaan ja sisältää seuraavat osiot: Elements, Network, Resources, Timelines, Vianetsintä, Tallennus, Konsoli.
   • Show Error Console: Käynnistää myös kehittäjätyökalujen käyttöliittymän suoraan Console-välilehdelle, joka näyttää virheet, varoitukset ja muut haettavat tiedot lokitiedot.
   • Näytä sivun lähde: Avaa Resurssit-välilehden, joka näyttää asiakirjan luokitteleman aktiivisen sivun lähdekoodin.
   • Näytä sivun resurssit: Suorittaa saman toiminnon kuin Näytä sivun lähde -vaihtoehto.
   • Näytä Snippet Editor: Avaa uuden ikkunan, johon voit syöttää CSS- ja HTML-koodin ja esikatsella sen tulosta lennossa.
   • Show Extension Builder: Tarjoaa mahdollisuuden luoda tai muokata Safari-laajennuksia CSS:n, HTML:n ja JavaScriptin avulla.
   • Näytä aikajanan tallennus: Avaa Aikajanat-välilehden ja alkaa näyttää verkkopyyntöjä, asettelua ja renderöintitietoja sekä JavaScript-suoritusta reaaliajassa.
   • Tyhjennä välimuistit: Poistaa koko kiintolevylle sillä hetkellä tallennetun välimuistin.
   • Poista välimuistit käytöstä: Estää Safaria tallentamasta välimuistiin niin, että kaikki sisältö haetaan palvelimelta jokaisen sivun latauksen yhteydessä.
   • Poista kuvat käytöstä: Estää kuvia hahmontamasta kaikilla verkkosivuilla.
   • Poista tyylit käytöstä: Ohittaa CSS-ominaisuudet, kun sivu ladataan.
   • Poista JavaScript käytöstä: Rajoittaa JavaScriptin suorittamista kaikilla sivuilla.
   • Poista laajennukset käytöstä: Estää kaikkia asennettuja laajennuksia toimimasta selaimessa.
   • Poista sivustokohtaiset hakkerit: Jos Safaria on muokattu käsittelemään aktiiviselle verkkosivulle ominaisia ongelmia, tämä vaihtoehto estää muutokset, jotta sivu latautuu kuten ennen näiden muutosten käyttöönottoa.
   • Poista paikalliset tiedostorajoitukset käytöstä: Antaa selaimen päästä käsiksi paikallisilla levyillä oleviin tiedostoihin. Tämä toiminto on oletusarvoisesti rajoitettu turvallisuussyistä.
   • Poista ristikkäiset rajoitukset käytöstä: Nämä rajoitukset otetaan oletusarvoisesti käyttöön XSS:n ja muiden mahdollisten vaarojen estämiseksi. Ne on kuitenkin usein poistettava tilapäisesti käytöstä kehitystarkoituksiin.
   • Salli JavaScript älykkäästä hakukentästä: Kun se on käytössä, se mahdollistaa URL-osoitteiden syöttämisen javascriptillä: sisällytetty suoraan osoitepalkkiin.
   • Käsittele SHA-1-varmenteita turvattomina: SHA-1-algoritmia käyttäviä SSL-varmenteita pidetään yleisesti vanhentuneina ja haavoittuvina.