Integroitu työkalupakki web-suunnittelijoille, kehittäjille ja testaajille
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.
- Napsauta Chrome-päävalikkopainiketta, jossa on kolme vaakasuoraa viivaa ja joka sijaitsee selaimen oikeassa yläkulmassa.
- Kun pudotusvalikko tulee näkyviin, siirrä hiiren osoitin Lisää työkalut -vaihtoehtoon.
- Alivalikko pitäisi nyt näkyä. Valitse vaihtoehto Kehitystyökalut . Tämän valikkokohteen sijasta voit käyttää myös seuraavia pikanäppäimiä: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- 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.
Elements: Antaa kyvyn tarkastaa CSS- ja HTML-koodit sekä muokata CSS-lennossa, kun näet muutosten vaikutukset reaaliajassa.
Konsoli: Chromen JavaScript-konsoli mahdollistaa suoran komennon 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. - Näiden osien lisäksi voit käyttää seuraavia työkaluja Aikajana- välilehden oikealla puolella olevasta >> -kuvasta .
Profiili: Erottu CPU: n profiiliin ja Heap-profiililohkoihin tarjoaa kattavan muistin käytön ja aktiivisen sovelluksen tai sivun yleisen toteutusaika.
Suojaus: korostaa varmenneongelmia ja muita turvallisuuteen liittyviä ongelmia aktiivisella sivulla tai sovelluksessa.
Resurssit: Tässä voit tarkastaa evästeiden, paikallisen tallennuksen, sovelluskeskuksen ja muiden paikallisten tietolähteiden, joita nykyinen Web-sivu tai sovellus käyttää.
Tarkastukset: Tarjoaa tapoja optimoida sivun tai sovelluksen latausaika ja yleinen suorituskyky. - Device Mode -toiminnolla 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 Laitteen tilan päälle ja pois valitsemalla matkapuhelimen kuvakkeen, joka sijaitsee suoraan Elements- välilehden vasemmalla puolella.
- 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.
Suositeltava lukeminen: Top 25 Greasemonkey- ja Tampermonkey-käyttäjän komentosarjat
- Napsauta Firefoxin päävalikkopainiketta, jota edustaa kolme vaakasuoraa viivaa ja jotka sijaitsevat selainikkunan oikeassa yläkulmassa.
- Kun avattava valikko tulee näkyviin, valitse kehittäjältä merkitty kuvake. Web Developer -valikko pitäisi 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. Pikanäppäimet: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Tarkastaja: Voit tarkastella ja / tai hienosäätää CSS- ja HTML-koodia aktiivisella sivulla sekä kannettavaan laitteeseen etähuollon avulla. Pikanäppäimet: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web-konsoli: Voit suorittaa JavaScript-lausekkeiden aktiivisen sivun ja tarkastella monipuolista kirjautuneita tietoja sisältäen tietoturva-varoitukset, verkkopyynnöt, CSS-viestit ja paljon muuta. Pikanäppäimet: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: JavaScript Debugger -ohjelmalla voit tarkistaa ja korjata virheet asettamalla raja-arvot, tarkistamalla DOM-solmut, mustat nyrkkeilyn ulkoiset lähteet ja paljon muuta. Kuten tarkastajan tapauksessa, tämä ominaisuus tukee myös etähautohäiriöitä. Pikanäppäimet: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Style Editor: Voit luoda uusia tyylejä ja sisällyttää ne aktiiviseen Web-sivulle tai muokata olemassa olevia arkkia ja testata muutosten tekemistä selaimessa yhdellä napsautuksella. Pikanäppäimet: Mac OS X, Windows ( SHIFT + F7 )
Suorituskyky: Sisältää yksityiskohtaisen erittelyn aktiivisen sivun verkon suorituskyvystä, kehysnopeusdataa, JavaScript-suoritusaikaa ja tilaa, maali vilkkuu ja paljon muuta. Pikanäppäimet: Mac OS X, Windows ( SHIFT + F5 )
Verkko: luetellaan kaikki selaimen käynnistämä verkkopyyntö sekä vastaava menetelmä, alkuperänimialue, tyyppi, koko ja kulunut aika. Pikanäppäimet: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Kehittäjien työkalupalkki: avaa interaktiivisen komentorivin tulkki. Anna apua tulkkiin, jossa on luettelo kaikista käytettävissä olevista komennoista ja niiden oikeasta syntaksista. Pikanäppäimet: Mac OS X, Windows ( SHIFT + 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 ( SHIFT + F8 )
Selauskonsoli: Sisältää samat toiminnot kuin Web Console (katso edellä). Kaikki palautetut tiedot ovat kuitenkin koko Firefox-sovellus (mukaan lukien laajennukset ja selaintoiminnot) kuin pelkästään aktiivinen Web-sivu. Pikanäppäimet: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Responsive Design View: Voit tarkastella Web-sivua eri resoluution, ulkoasun ja näytön koon jäljittelemällä useita laitteita, kuten tabletteja ja älypuhelimia. Pikanäppäimet: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Pipetti: Näyttää heksadesimaalivärikoodin yksilöllisesti valituille pikseleille.
Scratchpad : Voit kirjoittaa, muokata, integroida ja suorittaa JavaScript-koodinpätkiä ponnahdusikkunan Firefox-ikkunasta. Pikanäppäimet: Mac OS X, Windows ( SHIFT + F4 )
Page Source: Alkuperäinen selainpohjainen kehittäjätyökalu, tämä vaihtoehto näyttää vain aktiivisen sivun käytettävissä olevan lähdekoodin. Pikanäppäimet: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Hanki lisää työkaluja: avaa Web-kehittäjän Toolbox- kokoelman Mozillan virallisilla lisäosoitteilla , jossa on noin kymmenen suosittua laajennusta, kuten Firebug ja Greasemonkey.
Microsoft Edge / Internet Explorer
Yleisesti kutsuttu F12-kehittäjätyökalu , joka on tunnustettu pikanäppäimelle, joka on käynnistänyt käyttöliittymän Internet Explorerin aiempien versioiden jälkeen, IE11: n ja Microsoft Edge: n dev-työkalupaketti on mennyt pitkälle alusta alkaen tarjoamalla erittäin kätevän ryhmän monitorit, debuggers, emulators ja on-the-fly-kääntäjät.
- Napsauta Lisää toimintoja -valikkoa, jota edustaa kolme pistettä ja joka sijaitsee selainikkunan oikeassa yläkulmassa. Kun avattava valikko tulee näkyviin, valitse F12-kehittäjän työkalu . Kuten jo mainitsin, voit myös käyttää työkaluja F12- näppäimistön pikakuvakkeella.
- 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 tulet menemään. Käyttää IntelliSense-toimintoja tarvittaessa automaattisen täydennyskoodin käyttöön. Näppäinoikopolku: (CTRL + 1)
Console: Antaa mahdollisuuden lähettää virheenkorjaustiedot, kuten laskurit, ajastimet, jäljet ja mukautetut viestit integroidun sovellusliittymän avulla. 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: luetellaan kunkin selaimen käynnistyneen verkkopyynnön, kun sivu on ladattu ja toteutettu, mukaan lukien protokollatiedot, sisältötyyppi, kaistanleveyden käyttö ja paljon muuta. Pikanäppäimet: (CTRL + 4)
Suorituskyky: Tarkastele kehysnopeuksia, CPU: n käyttöä ja muita suorituskykyä koskevia tietoja, joiden avulla voit nopeuttaa sivujen latausaikoja ja muita toimintoja. Pikanäppäimet: (CTRL + 5)
Muisti: Auttaa erottamaan ja korjaamaan nykyisen verkkosivun mahdolliset muistiinpanot näyttämällä muistin käyttöaikaleiman sekä eri aikaväleistä otetut valokuvat. Pikanäppäimet: (CTRL + 6)
Emulointi: näyttää, miten aktiivinen sivu näyttäisi erilaisissa resoluutioissa ja näytön kooissa, emuloimalla ä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) - Jos haluat näyttää konsolin missä tahansa muussa työkalussa, napsauta neliöpainiketta, jossa on oikea kannatin, joka sijaitsee kehitystyökalun käyttöliittymän oikeassa yläkulmassa.
- 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 toista kertaa.
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.
- Napsauta Safaria selaimen valikossa, joka sijaitsee näytön yläosassa. Kun avattava valikko tulee näkyviin, valitse Asetukset . Voit myös käyttää seuraavia pikanäppäimiä tämän valikkokohteen sijasta: COMMAND + COMMA (,)
- Nyt Safarin Asetukset- rajapinta tulee näkyä ja selaa selainikkunasi. Napsauta Lisäasetukset- kuvaketta, joka sijaitsee otsikon oikealla puolella.
- Lisäasetukset pitäisi nyt näkyä. Tämän ruudun alareunassa on valintaruutu, joka on merkitty Näytä kehitys -valikko -valikkoon . Jos ruutuun ei ole merkitty valintaruutua, napsauta sitä kerran.
- Sulje Asetukset- rajapinta napsauttamalla vasemmassa yläkulmassa olevaa punaista "x".
- Sinun pitäisi nyt huomata uusi vaihtoehto selaimen valikossa Kehitä , joka sijaitsee kirjanmerkkien ja ikkunan välillä . 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 useita Chrome-, Firefox- ja Internet Explorer -versioita sekä määrittää oman mukautetun merkkijonon.
Anna Responsive Design Mode : Palauttaa nykyisen sivun, koska se näkyy useilla laitteilla ja eri näytön tarkkuuksilla.
Näytä Web-tarkastaja: Käynnistää Safarin dev-työkalujen pääliittymän, joka on tyypillisesti selaimen näytön alareunassa ja joka sisältää seuraavat osat: Elements , Network , Resources , Timelines , Debugger , Storage , Console .
Näytä virhekonsoli: käynnistää myös dev-työkalujen käyttöliittymän suoraan konsoli- välilehdelle, joka näyttää virheet, varoitukset ja muut haettavissa olevat lokitiedot.
Näytä sivun lähde: Avaa Resurssit- välilehden, joka näyttää aktiivisen sivun lähdekoodin, joka on luokiteltu asiakirjan mukaan.
Näytä sivuryhmät: Toimii samaa toimintoa kuin Näytä sivun lähde -vaihtoehto.
Show Snippet Editor: Avaa uuden ikkunan, jossa voit syöttää CSS- ja HTML-koodin, esikatselemalla sen tuottoa lennossa.
Näytä laajennuksen rakentaja: tarjoaa mahdollisuuden luoda tai muokata Safari-laajennuksia CSS: n, HTML: n ja JavaScriptin avulla.
Näytä Aikajana-tallennus: Avaa Aikajana- välilehden 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älimuistissa, jotta kaikki sisältö haetaan palvelimelta kunkin sivun lataamisen yhteydessä.
Poista kuvat: estää kuvien tekemisen kaikissa Web-sivuissa.
Poista tyylejä: sivuuttaa CSS-ominaisuudet, kun sivu on ladattu.
Poista JavaScript käytöstä: Rajoittaa JavaScript-suorituksen kaikilla sivuilla.
Poista laajennukset käytöstä: estää kaikkien asennettujen laajennusten käytön selaimessa.
Poista sivustokohtaiset hakkerit käytöstä: jos Safari on muokattu, jotta se käsittelee aktiivisesti aktiivisen Web-sivun nimenomaisia 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 paikallisiin levyihin tallennetuille tiedostoille, jotka ovat turvallisuussyistä oletuksena rajoitettuja.
Poista alkuperän rajoitusten poistaminen käytöstä: Nämä rajoitukset otetaan 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 JavaScriptiä Smart Search -kentästä: Kun tämä asetus on käytössä, se antaa mahdollisuuden syöttää URL-osoitteita javascriptilla: sisällytetty suoraan osoiteriville.
Käsittele SHA-1-sertifikaatteja epävarmoina: SHA-1-algoritmia käyttävät SSL-sertifikaatit pidetään yleisesti vanhentuneina ja haavoittuvina.