Kuidas kasutada veebibrauseri arendaja tööriistu

Integreeritud tööriistakomplektid veebi disaineritele, arendajatele ja testijatele

Lisaks enamikule brauseritootjatele, kes keskenduvad igapäevasele kasutajale, kes soovivad surfata veebis, teenindavad nad ka veebiarendajaid, disainereid ja kvaliteedikindlustust pakkuvad spetsialistid, kes aitavad ehitada rakendusi ja saite, millele need kasutajad pääsevad, integreerides võimsaid tööriistu otse brauseritesse ise.

Möödas on päevad, mil brauseris leitud ainsad programmeerimis- ja testimise tööriistad võimaldasid teil lehe lähtekoodi vaadata ja mitte midagi enamat. Tänased brauserid võimaldavad teil palju sügavamalt sukelduda, tehes selliseid asju nagu JavaScripti lõikude täitmine ja debugging, DOM-elementide kontrollimine ja redigeerimine, reaalajas võrguliikluse jälgimine, kui teie rakendus või leht laadib kindlaks kitsaskohad, CSS-i toimivuse analüüs, koodi tagamine mitte liiga palju mälu või liiga palju protsessoritükke ja palju muud. Katsetamise seisukohast võite taasesitada, kuidas rakendus või veebileht kuvatakse erinevates brauserites, samuti erinevates seadmetes ja platvormides reageeriva disaini maagia ja sisseehitatud simulaatorite abil. Parim osa on see, et saate seda kõike teha ilma brauserist lahkumata!

Järgnevad õpetused annavad teile ülevaate, kuidas pääseda juurde nende arendaja tööriistadele mitmes populaarses veebibrauseris.

Google Chrome

Chrome'i arendaja tööriistad võimaldavad teil koodi redigeerida ja siluda, üksikute komponentide auditeerimist tulemuslikkuse probleemide ilmnemiseks, erinevate seadmeekraanide simuleerimist, sh neid, mis töötavad Androidiga või iOS-is , ja täidavad mitmeid muid kasulikke funktsioone.

1. Klikkige Chrome'i peamenüü nupul, mis on tähistatud kolme horisontaaljoonega ja asub brauseri paremas ülanurgas.
2. Kui ilmub rippmenüü, hõljutage hiirekursorit valikul Rohkem tööriistu .
3. Nüüd peaks ilmuma alammenüü. Valige suvand Arendaja tööriistad . Selle menüüelemendi asemel saab kasutada ka järgmist kiirklahvi: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. Nüüd kuvatakse Chrome'i arendaja tööriistade liides, nagu on näidatud selle näite ekraanipildil. Sõltuvalt teie Chrome'i versioonist võib teie esialgne kujundus veidi erineda siin esitatud kujul. Arendaja tööriistade peamine keskus, mis asub tavaliselt ekraani alumisel või paremal küljel, sisaldab järgmisi vahekaarte.
   Elemendid: võimaldab kontrollida CSS-i ja HTML-koodi, samuti muuta CSS-i-blokeeringut, nähes oma muudatuste mõju reaalajas.
   Konsool: Chrome'i JavaScripti konsool võimaldab otsest käsu sisestamist ja diagnostikaid.
   Allikad: Võimaldab teil Java-koodi silumiseks Java-koodi kasutades võimsa graafilise liidese kaudu.
   Võrk: liigitab ja kuvab aktiivse rakenduse või lehe iga seotud toimingu kohta üksikasjaliku teabe, sealhulgas täieliku päringu ja vastuse päised, samuti täiustatud ajastusmõõdikud.
   Ajavahemik: võimaldab iga brauseris toimuvat tegevust põhjalikult analüüsida niipea, kui käivitatakse lehe või rakenduse laadimistaotlus.
5. Lisaks nendele jaotistele võite kasutada ka järgmisi tööriistu >> ikooni abil, mis paiknevad vahekaardi ajaviidete paremal.
   Profiil: lagundatakse CPU profiiliriba ja mähkimisprofiilide sektsioonidesse, annab aktiivse rakenduse või lehe ulatusliku mälukasutuse ja üldise täitmise aja.
   Turvalisus: tõstab esile sertifikaadiprobleeme ja muid turvaküsimusi aktiivse lehe või rakendusega.
   Ressursid: siin saate kontrollida küpsiseid, kohalikku salvestust, rakenduse vahemälu ja muid kohaliku andmeallikaid, mida praegune veebisait või rakendus kasutab.
   Auditid: pakub võimalusi lehe või rakenduse laadimisaja ja üldise jõudluse optimeerimiseks.
6. Seadme režiim võimaldab teil simulaatoril aktiivset lehte vaadata, mis muudab selle peaaegu täpselt nii, nagu see ilmub ühel üle kümne seadme, sealhulgas mitu tuntud Android-i ja iOS-i mudelit, nagu iPad, iPhone ja Samsung Galaxy. Teile antakse ka võime eristada kohandatud ekraani resolutsioone, mis sobivad teie konkreetsete arendus- või testimisvajadustega. Seadme režiimi sisse- ja väljalülitamiseks valige mobiilikooni ikoon, mis asetseb vahekaardi Elements vasakul.
7. Võite ka oma arendaja tööriistade välimust ja tundeid kohandada, esmalt klõpsates menüünupul, mis on esindatud kolme vertikaalselt asetseva punktiga ja asub eelmainitud sakkide paremas ülanurgas. Selles rippmenüüs saate docki ümber paigutada, erinevaid tööriistu näidata või peita, samuti käivitada rohkem arenenud elemente, nagu seadmeinspektor. Leiad, et dev tööriistade liides ise on sellel jaotisel leitud seadete abil väga kohandatav.

Mozilla Firefox

Firefoxi Veebiarenduse jaotis sisaldab tööriistu disaineritele, arendajatele ja testijatele, nagu näiteks stiili toimetaja ja piksli-sihtimisega silmapilksur.

Soovitatav lugemine: Top 25 Greasemonkey ja Tampermonkey kasutaja skriptid

1. Klõpsake Firefoxi peamenüü nuppu, mis on kujutatud kolme horisontaaljoonega ja asub brauseriakna paremas ülanurgas.
2. Kui ilmub rippmenüü, valige ikoon arendajaga . Nüüd peaks kuvama Veebiarenda menüü, mis sisaldab järgmisi valikuid. Märkate, et enamikul menüüpunktidel on nendega seotud kiirklahvid.
   Vahetage tööriistad: kuvab või peidab arendaja tööriistade liidese, mis on tavaliselt brauseriakna allservas. Klaviatuuri otsetee: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
   Inspektor: saate kontrollida ja / või muuta nn aktiivsele lehele kui ka kaasaskantavale seadmele CSS-i ja HTML-koodi. Klaviatuuri otsetee: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
   Veebikonsool: saate aktiveeritud lehel käivitada JavaScripti väljendid ja vaadata mitmesuguseid sisselogitud andmeid, sh turvahoiatusi, võrgutaotusi, CSS-kirju ja palju muud. Klaviatuuri otsetee: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
   Debugger: JavaScripti debugger võimaldab teil täpselt määratleda ja parandada defekte, seadistades murdepunktid, kontrollides DOM-sõlmede, musta poksi väliseid allikaid ja palju muud. Nagu inspektori puhul , toetab see funktsioon ka kaugtõrjet. Klaviatuuri otsetee: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   Style Editor: saate luua uusi laaditabeleid ja lisada need aktiivse veebi lehele või muuta olemasolevaid lehti ja testida, kuidas teie muudatused brauseris ainult ühe hiireklõpsuga muudavad. Klaviatuuri otsetee: Mac OS X, Windows ( SHIFT + F7 )
   Performance: esitab üksikasjalikult aktiivse lehe võrgu jõudluse, kaadrisageduse andmete, JavaScripti täitmise aja ja oleku, värvi vilkumise ja palju muud. Klaviatuuri otsetee: Mac OS X, Windows ( SHIFT + F5 )
   Võrk: loetleb iga võrgutaotluse, mille brauser käivitas koos vastava meetodi, päritoluga domeeni, tüübi, suuruse ja ajaga. Klaviatuuri otsetee: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
   Arendaja tööriistariba: avab interaktiivse käsureatüki. Sisestage tõlgi abi kõikide olemasolevate käskude ja nende nõuetekohase süntaksi loendi jaoks. Klaviatuuri otsetee: Mac OS X, Windows ( SHIFT + F2 )
   WebIDE: Võimaldab veebirakendusi luua ja käivitada tegeliku seadme abil, mis töötab Firefoxi OS-is või Firefoxi OS-i simulaatori kaudu. Klaviatuuri otsetee: Mac OS X, Windows ( SHIFT + F8 )
   Brauseri konsool: pakub sama funktsiooni kui veebikonsool (vt eespool). Kuid kõik saadud andmed on kogu Firefoxi rakenduse jaoks (kaasa arvatud laiendused ja brauseri tasandi funktsioonid), mitte just aktiivsele veebisaidile. Klaviatuuri otsetee: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
   Vastupidine kujundusvaade: saate vaadata mitmesugustes seadmetes, sealhulgas tahvelarvutites ja nutitelefonides, erinevatel resolutsioonidel, skeemidel ja ekraanimõõdudel veebilehte koheselt vaadata. Klaviatuuri otsetee: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
   Eyedropper: kuvab üksikute pikslite jaoks kuueteistkümne värvi koodi.
   Scratchpad : saate sisestada, redigeerida, integreerida ja käivitada JavaScript-koodi väljad Firefoxi aknas. Klaviatuuri otsetee: Mac OS X, Windows ( SHIFT + F4 )
   Lehe allikas: algne brauseripõhine arendaja tööriist, näitab seda võimalust lihtsalt aktiivse lehe olemasolevat lähtekoodi. Klaviatuuri otsetee: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   Hankige rohkem tööriistu. Avab veebiarendaja tööriistakomplekti kogu Mozilla ametlikus lisandmoodul , millel on umbes tosin populaarseid laiendusi, nagu Firebug ja Greasemonkey.

Microsoft Edge / Internet Explorer

Tavaliselt viidatakse kui F12 arendaja tööriistadele , mis on interaktsiooni käivitanud kiirklahvi pärast Internet Exploreri varasemate versioonide, IE11 ja Microsoft Edge'i tööriistade komplektist alates selle loomisest alates, pakkudes väga mugavat gruppi monitorid, debugerid, emulaatorid ja otse kompileerijad.

1. Klõpsake menüüs Veel toiminguid , mida esindavad kolm punkti ja asub brauseriakna paremas ülanurgas. Kui ilmub rippmenüü, valige valik F12 Developer Tools . Nagu ma juba mainisin, võite tööriistadele juurde pääseda ka F12- kiirklahviga.
2. Kuvatakse arendusliides, tavaliselt brauseriakna allosas. Saadaval on järgmised tööriistad, kumbki neist on kättesaadavad, klõpsates vastava vahekaardi peal või kasutades kaasasolevat kiirklahvi.
   DOM-i Explorer: saate muuta aktiivsele lehele stiilseid tabeleid ja HTML-i, muutes muudetud tulemused nii edasi kui saate. Kasutab IntelliSensei funktsiooni koodi automaatseks täitmiseks, kui see on asjakohane. Klaviatuuri otsetee: (CTRL + 1)
   Konsool: pakub integreeritud API abil sujuva teabe, sealhulgas loendurite, taimerite, jälgede ja kohandatud sõnumite esitamist. Samuti saate süstida koodi aktiivsele veebisaidile ja muuta üksikutele muutujatele reaalajas määratud väärtusi. Klaviatuuri otsetee: (CTRL + 2)
   Debugger: Võimaldab määrata seiskamispunkte ja korrata koodi selle käivitamisel, kui vajalik. Klaviatuuri otsetee: (CTRL + 3)
   Võrk: loetleb iga brauseri algatatud võrgutaotluse lehe laadimise ja täitmise ajal, sh protokolli üksikasjad, sisutüüp, ribalaiuse kasutamine ja palju muud. Klaviatuuri otsetee: (CTRL + 4)
   Performance: üksikasjad raami määrad, CPU-de kasutamine ja muud jõudluspõhised mõõdikud, mis aitavad kiirendada lehe laadimise aegu ja muid tegevusi. Klaviatuuri otsetee: (CTRL + 5)
   Mälu: aitab teil isoleerida ja parandada praeguse veebisaidi potentsiaalseid mälu leke, näidates mälukasutuse ajaskaala koos erinevatest ajaintervallidest tehtud piltidega. Klaviatuuri otsetee: (CTRL + 6)
   Emulatsioon: näitab, kuidas aktiivne leht muudab erinevates resolutsioonides ja ekraani suurustes, emuleerides nutitelefoni, tahvelarvutit ja teisi seadmeid. Samuti pakub võimalust muuta kasutajaagent ja lehe suund, samuti simuleerida erinevaid geograafilisi asukohti, sisestades laius- ja pikkuskraadi. Klaviatuuri otsetee: (CTRL + 7)
3. Kui konsool kuvatakse mõne muu tööriista sees, klõpsake ruudu nuppu, mille sees on parempoolne sulg, mis asub arendusvahendite liidese paremas ülanurgas.
4. Rakenduse arendaja tööriistade liidese lahtihaakimiseks, et see muutuks eraldi aknaks, klõpsake nuppu, mis on esindatud kahe kaskaadriga, või kasutage järgmist kiirklahvi: CTRL + P. Tööriista saate paigutada oma algsesse asukohta, teist korda CTRL + P-ga .

Apple Safari (ainult OS X)

Safari mitmekesine dev tööriistakomplekt peegeldab suurt arendajate kogukonda, mis kasutab Maci oma disaini- ja programmeerimisvajaduste jaoks. Lisaks võimas konsoolile ja traditsioonilistele logimis- ja silumisfunktsioonidele on saadaval ka hõlpsasti kasutatav reageeriv disainirežiim ja tööriist oma brauseri laienduste loomiseks.

1. Klõpsake brauseri menüüs Safari brauseri menüüs, mis asub ekraani ülaosas. Kui ilmub rippmenüü, valige Eelistused . Selle menüüüksuse asemel saab kasutada ka järgmist kiirklahvi: COMMAND + COMMA (,)
2. Safari eelistuste kasutajaliides peaks nüüd olema kuvatud, mis on teie brauseri akna ülekate. Klõpsake ikooni Advanced (Täpsemalt) , mis asub päise paremas servas.
3. Täpsemad eelistused peaksid nüüd olema nähtavad. Selle ekraani allosas on menüüriba menüükäsk Show Show (Arendamine) , millele on lisatud märkeruut. Kui lahtris pole märgitud märki, klikkige sellel üks kord kohale, kus see asetseb.
4. Sulge Preferences interface, klõpsates vasakus nurgas oleval punasel "x".
5. Nüüd peaksite märkama uue valiku Brauseri menüüs " Develop" , mis asub järjehoidjate ja akna vahel . Klõpsake seda menüükirje. Nüüd peaks kuvama rippmenüü, mis sisaldab järgmisi valikuid.
   Ava lehekülg koos: võimaldab avada aktiivse veebilehe mõnes teises Macis installitud brauseris.
   Kasutajaagent: saate valida üle kümne eelnevalt määratletud kasutajaagendi väärtuste, sealhulgas mitme Chrome'i, Firefoxi ja Internet Exploreri versiooni, samuti määrata oma kohandatud stringi.
   Sisestage reageeriv disainirežiim : esitab praeguse lehe, nagu see ilmub erinevates seadmetes ja erinevates ekraani resolutsioonides.
   Veebiinspektori näitamine: käivitab Safari tööriistade tööriistade peamise liidese, mis asuvad tavaliselt brauseri ekraani allosas ja sisaldavad järgmisi jaotisi: elemendid , võrk , ressursid , ajakava , silur , salvestusruum , konsool .
   Show Error Console: käivitab ka dev tööriistade liidese, otse vahekaardile Console, kus kuvatakse vead, hoiatused ja muud otsitavad log andmete andmed.
   Kuva lehe allikas: avab vahekaardi Resources ( Ressursid ), mis näitab dokumendi jaoks liigitatud aktiivse lehe lähtekoodi.
   Näita lehe ressursse: toimib sama funktsiooniga nagu Näita lehe allika valik.
   Kuva fragment toimetaja: avab uue akna, kus saab sisestada CSS-i ja HTML-koodi, eelvaates oma väljundit otsevalikul.
   Show Extension Builder: pakub võimalust luua või muuta Safari laiendeid CSS-i, HTML-i ja JavaScripti abil.
   Kuva ajalõpude salvestamine: avab vahekaardi Timelines ja hakkab kuvama võrgupäringuid, paigutama ja esitama teavet ning JavaScripti täitmist reaalajas.
   Tühjenda vahemälu: kustutab kogu vahemälu, mis on praegu teie kõvakettale salvestatud.
   Keelake vahemälu: peatab Safari vahemällu nii, et kogu sisu leitakse serverist igale lehe laadimisele.
   Disable Images: keelab kujutise visandamise kõigil veebilehtedel.
   Disable Styles: ignoreerib CSS-i omadusi lehe laadimisel.
   JavaScripti keelamine: piirab JavaScripti täitmist kõikidel lehtedel.
   Keela laiendused: keelab kõik installitud laiendused brauseris töötamise ajal.
   Keela saidipõhised hacks: kui Safari on muudetud aktiivse veebilehe spetsiifiliste probleemide otseselt käitlemiseks, siis blokeerib see valik nende muudatuste tegemiseks, nii et leht laaditakse sellisena, nagu oleks see enne nende muudatuste sisseviimist.
   Keela kohaliku faili piirangud: lubab brauseril juurdepääsu teie kohalikele kettadele asuvate failide puhul, mis turvakaalutlustel vaikimisi on piiratud.
   Disable Cross-Origin piirangud: need piirangud on kehtestatud vaikimisi, et vältida XSSi ja muid võimalikke ohte. Siiski peavad nad arendamise eesmärgil sageli olema ajutiselt keelatud.
   Lubage JavaScripti Smart Search Fieldist: kui see on lubatud, pakub see võimalust sisestada URL-id javascriptiga: see on otse aadressiribale lisatud.
   SHA-1 sertifikaatide käsitlemine ebaturvaliseks: SSA-sertifikaadid, mis kasutavad SHA-1 algoritmi, loetakse laialdaselt olevat aegunud ja haavatavad.