Kuidas kasutada veebibrauseri arendaja tööriistu

2024 Autor: Abigail Brown | [email protected]. Viimati modifitseeritud: 2024-01-07 19:02

Lisaks sellele, et enamik brauseritootjaid keskendub igapäevastele veebis surfata soovivatele kasutajatele, teenindavad nad ka veebiarendajaid, disainereid ja kvaliteedi tagamise spetsialiste, kes aitavad luua rakendusi ja saite, millele need kasutajad juurde pääsevad, integreerides võimsa tööriistad otse brauseritesse.

Ajad on möödas, mil ainsad brauseris leiduvad programmeerimis- ja testimistööriistad võimaldasid teil vaadata lehe lähtekoodi ja mitte midagi enamat. Tänapäeva brauserid võimaldavad teil sukelduda palju sügavamale, tehes selliseid toiminguid nagu JavaScripti juppide käivitamine ja silumine, DOM-i elementide kontrollimine ja redigeerimine, reaalajas võrguliikluse jälgimine rakenduse või lehe laadimisel, et tuvastada kitsaskohad, analüüsida CSS-i toimivust ja tagada, et teie kood on ei kasuta liiga palju mälu ega liiga palju protsessoritsükleid ja palju muud.

Testimise vaatenurgast saate tundliku disaini ja sisseehitatud simulaatorite abil reprodutseerida, kuidas rakendus või veebileht renderdub erinevates brauserites, samuti erinevatel seadmetel ja platvormidel. Parim osa on see, et saate seda kõike teha ilma brauserist lahkumata!

Allpool olevad õpetused aitavad teil mitmes populaarses veebibrauseris neile arendajatööriistadele juurde pääseda.

Google Chrome

Chrome'i arendaja tööriistad võimaldavad teil koodi redigeerida ja siluda, auditeerida üksikuid komponente, et paljastada jõudlusprobleemid, simuleerida erinevaid seadmete ekraane, sealhulgas neid, mis käitavad Androidi või iOS-i, ja täita mitmeid muid kasulikke funktsioone.

1. Valige Chrome'i peamenüü, mis on tähistatud kolme horisontaalse joonega ja asub brauseri paremas ülanurgas.

2. Kui ilmub rippmenüü, hõljutage hiirekursorit valiku Rohkem tööriistu kohal.

   

3. Nüüd peaks ilmuma alammenüü. Valige suvand sildiga Arendaja tööriistad. Selle menüüelemendi asemel saate kasutada ka järgmist klaviatuuri otseteed: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Nüüd tuleks kuvada Chrome'i arendaja tööriistade liides, nagu on näidatud sellel näidisekraanil. Olenev alt teie Chrome'i versioonist võib kuvatav esialgne paigutus siin esitatust veidi erineda. Arendaja tööriistade peamine jaotur, mis asub tavaliselt kas ekraani allosas või paremas servas, sisaldab järgmisi vahekaarte.

5. Lisaks nendele jaotistele pääsete juurde ka järgmistele tööriistadele ikooni >> kaudu, mis asub Performance paremal pool. tab.

   • Mälu: jälgige ja salvestage mälukasutust veebilehel. Näete, kui raske on teie saidil olev JavaScript.
   • Turvalisus: tõstab esile sertifikaadiprobleemid ja muud turbega seotud probleemid aktiivse lehe või rakendusega.
   • Rakendus: kontrollige veebirakenduse kasutatavaid ressursse. Saate täieliku ülevaate sellest, mida kasutatakse.
   • Audits: pakub võimalusi lehe või rakenduse laadimisaja ja üldise toimivuse optimeerimiseks.

   

6. Seadmerežiim võimaldab teil vaadata aktiivset lehte simulaatoris, mis muudab selle peaaegu täpselt selliseks, nagu see kuvatakse ühes enam kui tosinast seadmest, sealhulgas mitmes tuntud Androidis ja iOS-i mudelid, nagu iPad, iPhone ja Samsung Galaxy. Teile antakse ka võimalus jäljendada kohandatud ekraanieraldusvõimet, et need vastaksid teie konkreetsetele arendus- või testimisvajadustele.

   Seadmerežiimi sisse- ja väljalülitamiseks valige mobiiltelefoni ikoon, mis asub otse vasakul pool. Elemendid vahekaart.

   

7. Saate kohandada ka oma arendaja tööriistade välimust, valides esm alt menüünupu, mida tähistab kolm vertikaalselt paigutatud punkti ja asub ülalmainitud vahekaartide kõige paremas servas.

   Selles rippmenüüs saate dokki ümber paigutada, kuvada või peita erinevaid tööriistu ning käivitada keerukamaid üksusi, näiteks seadmeinspektorit. Avastate, et arendaja tööriistade liides ise on selles jaotises leiduvate sätete kaudu väga kohandatav.

   

Mozilla Firefox

Firefoxi veebiarendajate jaotis sisaldab tööriistu nii disaineritele, arendajatele kui ka testijatele, nagu stiiliredaktor ja pikslite sihtimisega tilguti.

1. Valige Firefoxi peamenüü, mida tähistab kolm horisontaalset joont ja mis asub brauseriakna paremas ülanurgas.

2. Kui ilmub rippmenüü, valige Web Developer.

   

3. Nüüd tuleks kuvada Web Developer menüü, mis sisaldab järgmisi valikuid. Märkate, et enamiku menüüüksustega on seotud kiirklahvid.

   • Tööriistade sisselülitamine: kuvab või peidab arendaja tööriistade liidese, mis asub tavaliselt brauseriakna allosas. Klaviatuuri otsetee: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: võimaldab teil kaugsilumise kaudu kontrollida ja/või muuta CSS- ja HTML-koodi nii aktiivsel lehel kui ka kaasaskantavas seadmes. Klaviatuuri otsetee: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Veebikonsool: Võimaldab käivitada aktiivsel lehel JavaScripti avaldisi ning vaadata üle mitmesuguseid logitud andmeid, sealhulgas turvahoiatused, võrgupäringud, CSS-sõnumid ja palju muud. Klaviatuuri otsetee: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Siluja: JavaScripti silur võimaldab teil defekte täpselt tuvastada ja parandada, määrates katkestuspunkte, kontrollides DOM-i sõlmpunkte, kontrollides väliseid allikaid ja palju muud. Nagu Inspectori puhul, toetab see funktsioon ka kaugsilumist. Klaviatuuri otsetee: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Stiiliredaktor: võimaldab teil luua uusi laaditabeleid ja lisada need aktiivsele veebilehele või redigeerida olemasolevaid lehti ja testida, kuidas teie muudatused brauseris vaid ühe klõpsuga renderdatakse. Klaviatuuri otsetee: Mac OS X, Windows (SHIFT+F7)
   • Performance: annab üksikasjaliku jaotuse aktiivse lehe võrgu jõudluse, kaadrisageduse andmete, JavaScripti käitamisaja ja oleku, värvi vilkumise ja palju muu kohta. Klaviatuuri otsetee: Mac OS X, Windows (SHIFT+F5)
   • Network: loetleb kõik brauseri algatatud võrgupäringud koos vastava meetodi, lähtedomeeni, tüübi, suuruse ja kulunud ajaga. Klaviatuuri otsetee: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: vaadake vahemälu ja küpsiseid, mida veebisait salvestab. Klaviatuuri otsetee: (SHIFT+F9)
   • Arendaja tööriistariba: avab interaktiivse käsureatõlgi. Sisestage tõlkesse help, et näha kõigi saadaolevate käskude ja nende õige süntaksi loendit. Klaviatuuri otsetee: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: annab võimaluse luua ja käivitada veebirakendusi Firefox OS-i kasutava tegeliku seadme või Firefoxi OS-i simulaatori kaudu. Klaviatuuri otsetee: Mac OS X, Windows (SHIFT+F8)
   • Browser Console: pakub samu funktsioone kui veebikonsool (vt ülal). Kuid kõik tagastatud andmed puudutavad kogu Firefoxi rakendust (sh laiendused ja brauseritaseme funktsioonid), mitte ainult aktiivse veebilehe kohta. Klaviatuuri otsetee: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Reageeriva kujunduse vaade: võimaldab teil kohe vaadata veebilehte erinevate eraldusvõimete, paigutuste ja ekraanisuurustega, et jäljendada mitut seadet, sealhulgas tahvelarvuteid ja nutitelefone. Klaviatuuri otsetee: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: kuvab individuaalselt valitud pikslite hex-värvikoodi.
   • Scratchpad: Scratchpad võimaldab teil kirjutada, redigeerida, integreerida ja käivitada JavaScripti koodi katkeid Firefoxi hüpikaknas. Avage interaktiivne JavaScripti dokument, mis võimaldab teil koodi kirjutada ja testida seda veebisaidiga. Klaviatuuri otsetee: (SHIFT+F4)
   • Teenusetöötajad: siluge teenusetöötajad oma veebirakenduses. Hankige üksikasjalikku teavet nende toimivuse ja vigade kohta.
   • Lehe allikas: algne brauseripõhine arendajatööriist, see valik kuvab lihts alt aktiivse lehe saadaoleva lähtekoodi. Klaviatuuri otsetee: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Hangi rohkem tööriistu: avab Mozilla ametlikul lisandmoodulite saidil veebiarendaja tööriistakastikollektsiooni, mis sisaldab kümmekond populaarset laiendust, näiteks kui Firebug ja Greasemonkey.

   

Microsoft Edge/Internet Explorer

Tavaliselt nimetatud F12 arendajatööriistadeks, austusavaldus klaviatuuri otseteele, mis on käivitanud liidese alates Internet Exploreri varasematest versioonidest, IE11 ja Microsoft Edge'i arendustööriistade komplektist. on selle loomisest saadik teinud pika tee, pakkudes väga mugavat rühma monitore, silureid, emulaatoreid ja käigupealseid kompilaatoreid.

Microsoft ei toeta enam Internet Explorerit ja soovitab värskendada uuemale Edge'i brauserile. Uusima versiooni allalaadimiseks minge nende saidile.

1. Valige Rohkem toiminguid, mida tähistab kolm punkti ja asub brauseriakna paremas ülanurgas.

   

2. Kui ilmub rippmenüü, valige suvand Arendaja tööriistad.

   

3. Nüüd tuleks kuvada arendusliides, tavaliselt brauseriakna allosas. Saadaval on järgmised tööriistad, millest igaühele pääsete juurde, klõpsates vastava vahekaardi pealkirja või kasutades kaasasolevat klaviatuuri otseteed.

   

   • DOM Explorer: võimaldab redigeerida aktiivsel lehel laaditabeleid ja HTML-i, renderdades muudetud tulemusi töö käigus. Kasutab vajaduse korral koodi automaatseks täitmiseks funktsiooni IntelliSense. Klaviatuuri otsetee: (CTRL+1)
   • Console: võimaldab integreeritud API kaudu esitada silumisinfot, sealhulgas loendureid, taimereid, jälgi ja kohandatud sõnumeid. Samuti võimaldab see sisestada koodi aktiivsele veebilehele ja muuta reaalajas üksikutele muutujatele määratud väärtusi. Klaviatuuri otsetee: (CTRL+2)
   • Siluja: võimaldab määrata katkestuspunkte ja siluda koodi täitmise ajal, vajadusel ridahaaval. Klaviatuuri otsetee: (CTRL+3)
   • Network: loetleb kõik brauseri poolt lehe laadimise ja täitmise ajal algatatud võrgupäringud, sealhulgas protokolli üksikasjad, sisu tüüp, ribalaiuse kasutus ja palju muud. Klaviatuuri otsetee: (CTRL+4)
   • Performance: üksikasjad kaadrisageduste, protsessori kasutuse ja muude jõudlusega seotud mõõdikute kohta, mis aitavad teil kiirendada lehe laadimisaega ja muid toiminguid. Klaviatuuri otsetee: (CTRL+5)
   • Mälu: aitab teil isoleerida ja parandada praegusel veebilehel võimalikke mälulekkeid, kuvades mälukasutuse ajaskaala koos erinevate ajavahemike hetktõmmistega. Klaviatuuri otsetee: (CTRL+6)
   • Emulatsioon: näitab, kuidas aktiivne leht renderdaks erinevate eraldusvõimete ja ekraanisuurustega, emuleerides nutitelefone, tahvelarvuteid ja muid seadmeid. See annab ka võimaluse muuta kasutajaagenti ja lehe orientatsiooni ning simuleerida erinevaid geograafilisi asukohti, sisestades laius- ja pikkuskraadi. Klaviatuuri otsetee: (CTRL+7)

4. Konsooli Konsooli kuvamiseks vajutage mõne muu tööriista sees nuppu ruutnuppu, mille sees on parem sulg, mis asub arendustööriistade liidese paremas ülanurgas.

   

5. Arendaja tööriistade liidese lahtiühendamiseks, et sellest saaks eraldi aken, valige kaks kaskaadristkülikut või kasutage järgmist klaviatuuri otseteed: CTRL+P. Saate asetada tööriistad tagasi nende algsesse asukohta, vajutades teist korda klahvikombinatsiooni CTRL+P.

   

Apple Safari (ainult Mac)

Safari mitmekesine arendustööriistade komplekt peegeldab suurt arendajate kogukonda, kes kasutab oma disaini- ja programmeerimisvajaduste jaoks Maci. Lisaks võimsale konsoolile ning traditsioonilistele logimis- ja silumisfunktsioonidele on saadaval ka hõlpsasti kasutatav tundlik kujundusrežiim ja tööriist oma brauserilaiendite loomiseks.

1. Valige ekraani ülaosas asuvast brauseri menüüst Safari. Kui ilmub rippmenüü, valige Preferences. Selle menüüelemendi asemel saate kasutada ka järgmist kiirklahvi: COMMAND+COMMA(,)

   

2. Safari Preferences liides peaks nüüd olema kuvatud, mis katab teie brauseriakna. Valige ikoon Advanced, mis asub päise kõige paremas servas.

   

3. Eelistused Advanced peaksid nüüd nähtaval olema. Selle ekraani allservas on menüüribal valik Näita arendusmenüüd, millele on lisatud märkeruut. Kui kastis pole linnukest, klõpsake sellel üks kord, et see sinna asetada.

   

4. Sulgege Preferences liides.

5. Nüüd peaksite märkama brauseri menüüs uut valikut nimega Arenda, mis asub Järjehoidjate ja Akna vahel. Klõpsake sellel menüüelemendil. Nüüd tuleks kuvada rippmenüü, mis sisaldab järgmisi valikuid.

   • Ava leht koos: võimaldab teil avada aktiivse veebilehe mõnes muus teie Maci praegu installitud brauseris.
   • Kasutajaagent: võimaldab teil valida enam kui tosina eelmääratletud kasutajaagendi väärtuse hulgast, sealhulgas mitmed Chrome'i, Firefoxi ja Internet Exploreri versioonid, ning määrata oma kohandatud väärtused string.
   • Sisenege tundliku kujunduse režiimi.
   • Show Web Inspector: käivitab Safari arendustööriistade peamise liidese, mis asub tavaliselt brauseri ekraani allservas ja sisaldab järgmisi jaotisi: elemendid, võrk, ressursid, ajaskaala, Siluja, Salvestusruum, Konsool.
   • Näita veakonsooli: käivitab ka arendustööriistade liidese otse konsooli vahekaardile, mis kuvab vead, hoiatused ja muud otsitavad logi andmed.
   • Kuva lehe allikas: avab vahekaardi Ressursid, mis kuvab dokumendi poolt kategoriseeritud aktiivse lehe lähtekoodi.
   • Näita lehe ressursse: täidab sama funktsiooni kui suvand Kuva lehe allikas.
   • Show Snippet Editor: avab uue akna, kuhu saate sisestada CSS- ja HTML-koodi, kuvades selle väljundi käigu pe alt eelvaate.
   • Show Extension Builder: võimaldab luua või redigeerida Safari laiendusi CSS-i, HTML-i ja JavaScriptiga.
   • Näita ajaskaala salvestust: avab vahekaardi Ajaskaalad ja hakkab kuvama võrgupäringuid, paigutust ja renderdamisteavet ning JavaScripti täitmist reaalajas.
   • Tühjenda vahemälud: kustutab kogu teie kõvakettale praegu salvestatud vahemälu.
   • Keela vahemälud: peatab Safari vahemällu salvestamise, nii et kogu sisu tuuakse serverist iga lehe laadimise korral.
   • Kujutiste keelamine: takistab piltide renderdamist kõigil veebilehtedel.
   • Keela stiilid: ignoreerib lehe laadimisel CSS-i atribuute.
   • Keela JavaScript: piirab JavaScripti täitmist kõigil lehtedel.
   • Keela laiendused: keelab kõigil installitud laiendustel brauseris käitamise.
   • Keela saidispetsiifilised häkkimised: kui Safarit on muudetud nii, et see käsitleks konkreetselt aktiivse veebilehe spetsiifilisi probleeme, blokeerib see suvand need muudatused, nii et leht laadib nagu enne nende muudatuste kasutuselevõttu.
   • Keela kohalikud failipiirangud: võimaldab brauseril juurdepääsu teie kohalikel ketastel olevatele failidele – toiming on vaikimisi turvakaalutlustel piiratud.
   • Keela ristpäritolu piirangud: need piirangud kehtestatakse vaikimisi XSS-i ja muude võimalike ohtude vältimiseks. Kuid arendamise eesmärgil tuleb need sageli ajutiselt keelata.
   • Luba JavaScript nutika otsinguvälj alt: kui see on lubatud, annab see võimaluse sisestada URL-e javascriptiga: otse aadressiribale.
   • SHA-1 sertifikaatide käsitlemine ebaturvalistena: SHA-1 algoritmi kasutavaid SSL-sertifikaate peetakse laialdaselt aegunud ja haavatavateks.