Kaip naudoti žiniatinklio naršyklės kūrėjo įrankius

2024 Autorius: Abigail Brown | [email protected]. Paskutinį kartą keistas: 2023-12-17 06:55

Nr. įrankius tiesiai į pačias naršykles.

Praėjo laikai, kai vieninteliai naršyklėje rasti programavimo ir testavimo įrankiai leido peržiūrėti puslapio š altinio kodą ir nieko daugiau. Šiuolaikinės naršyklės leidžia pasinerti daug giliau, pavyzdžiui, vykdant ir derinant JavaScript fragmentus, tikrinant ir redaguojant DOM elementus, stebint tinklo srautą realiuoju laiku, kai programa ar puslapis įkeliamas, siekiant nustatyti kliūtis, analizuoti CSS našumą ir užtikrinti, kad kodas nenaudojama per daug atminties ar per daug procesoriaus ciklų ir daug daugiau.

Žvelgiant iš testavimo perspektyvos, galite atkurti, kaip programa ar tinklalapis bus atvaizduojamas skirtingose naršyklėse, taip pat skirtinguose įrenginiuose ir platformose, naudodamiesi interaktyvaus dizaino magija ir įtaisytaisiais simuliatoriais. Geriausia tai, kad visa tai galite padaryti neišeidami iš naršyklės!

Toliau pateiktose mokymo programose paaiškinama, kaip pasiekti šiuos kūrėjo įrankius keliose populiariose žiniatinklio naršyklėse.

Google Chrome

Naudodami „Chrome“kūrėjo įrankius galite redaguoti ir derinti kodą, tikrinti atskirus komponentus, kad atskleistumėte našumo problemas, imituoti įvairių įrenginių ekranus, įskaitant tuos, kuriuose veikia „Android“arba „iOS“, ir atlikti keletą kitų naudingų funkcijų.

1. Pasirinkite „Chrome“ pagrindinį meniu, pažymėtą trimis horizontaliomis linijomis ir esantį viršutiniame dešiniajame naršyklės kampe.

2. Kai pasirodys išskleidžiamasis meniu, užveskite pelės žymeklį virš parinkties Daugiau įrankių.

   

3. Dabar turėtų pasirodyti antrinis meniu. Pasirinkite parinktį, pažymėtą Kūrėjo įrankiai. Vietoj šio meniu elemento taip pat galite naudoti šį spartųjį klavišą: „Chrome“OS / „Windows“(CTRL+SHIFT+I), „Mac OS X“(ALT(OPTION) +COMMAND+I)

   

4. Dabar turėtų būti rodoma „Chrome“kūrėjo įrankių sąsaja, kaip parodyta šiame pavyzdyje ekrano kopijoje. Atsižvelgiant į jūsų „Chrome“versiją, pradinis matomas išdėstymas gali šiek tiek skirtis nuo čia pateikto. Pagrindiniame kūrėjo įrankių centre, paprastai esančiame ekrano apačioje arba dešinėje, yra šie skirtukai.

5. Be šių skilčių, taip pat galite pasiekti šiuos įrankius naudodami >> piktogramą, esančią dešinėje Performance skirtukas.

   • Atmintis: Stebėkite ir registruokite atminties naudojimą tinklalapyje. Matote, koks sunkus yra jūsų svetainės „JavaScript“.
   • Security: pabrėžia sertifikato problemas ir kitas su sauga susijusias problemas, susijusias su aktyviu puslapiu arba programa.
   • Application: patikrinkite žiniatinklio programos naudojamus išteklius. Gaukite visą naudojamo turinio aprašymą.
   • Audits: siūlo būdus optimizuoti puslapio arba programos įkėlimo laiką ir bendrą našumą.

   

6. Įrenginio režimas leidžia peržiūrėti aktyvų puslapį simuliatoriuje, kuris atvaizduoja jį beveik tiksliai taip, kaip atrodytų viename iš daugiau nei tuzino įrenginių, įskaitant kelis gerai žinomus Android ir iOS modeliai, tokie kaip iPad, iPhone ir Samsung Galaxy. Jums taip pat suteikiama galimybė mėgdžioti pasirinktines ekrano skiriamąsias gebas, kad atitiktų jūsų konkrečius kūrimo ar testavimo poreikius.

   Norėdami įjungti ir išjungti Įrenginio režimą, pasirinkite mobiliojo telefono piktogramą, esančią tiesiai kairėje. Elementai skirtukas.

   

7. Taip pat galite tinkinti kūrėjo įrankių išvaizdą ir pobūdį, pirmiausia pasirinkę meniu mygtuką, pavaizduotą trys vertikaliai išdėstyti taškai ir yra dešinėje pirmiau minėtų skirtukų pusėje.

   Šiame išskleidžiamajame meniu galite pakeisti doko padėtį, rodyti arba paslėpti įvairius įrankius, taip pat paleisti sudėtingesnius elementus, pvz., įrenginio tikrintuvą. Pamatysite, kad pati kūrėjo įrankių sąsaja yra labai tinkinama naudojant šiame skyriuje esančius nustatymus.

   

Mozilla Firefox

Firefox žiniatinklio kūrėjų skiltyje yra dizaineriams, kūrėjams ir bandytojams skirtų įrankių, pvz., stiliaus rengyklė ir pikselių taikymo akių lašintuvas.

1. Pasirinkite Firefox pagrindinį meniu, pažymėtą trimis horizontaliomis linijomis ir esantį viršutiniame dešiniajame naršyklės lango kampe.

2. Kai pasirodys išskleidžiamasis meniu, pasirinkite Web Developer.

   

3. Dabar turėtų būti rodomas Web Developer meniu, kuriame yra šios parinktys. Pastebėsite, kad su daugeliu meniu elementų yra susieti spartieji klavišai.

   • Perjungti įrankius: rodoma arba paslepiama kūrėjo įrankių sąsaja, kuri paprastai yra naršyklės lango apačioje. Spartusis klaviatūros klavišas: „Mac OS X“(ALT(OPTION)+COMMAND+I), „Windows“(CTRL+SHIFT+I)
   • Inspektorius: leidžia patikrinti ir (arba) koreguoti CSS ir HTML kodą aktyviame puslapyje, taip pat nešiojamame įrenginyje nuotoliniu derinimo būdu. Spartusis klavišas: „Mac OS X“(ALT(OPTION)+COMMAND+C), „Windows“(CTRL+SHIFT+C)
   • Web Console: leidžia aktyviame puslapyje vykdyti JavaScript išraiškas ir peržiūrėti įvairius registruojamus duomenis, įskaitant saugos įspėjimus, tinklo užklausas, CSS pranešimus ir kt.. Spartusis klaviatūros klavišas: „Mac OS X“(ALT(OPTION)+COMMAND+K), „Windows“(CTRL+SHIFT+K)
   • Debugger: „JavaScript“derintuvas leidžia tiksliai nustatyti ir ištaisyti defektus nustatant lūžio taškus, tikrinant DOM mazgus, naudojant juodąjį išorinius š altinius ir dar daugiau. Kaip ir inspektoriaus atveju, ši funkcija taip pat palaiko nuotolinį derinimą. Spartusis klaviatūros klavišas: „Mac OS X“(ALT(OPTION)+COMMAND+S), „Windows“(CTRL+SHIFT+S)
   • Stiliaus rengyklė: leidžia kurti naujus stilių lapus ir įtraukti juos į aktyvų tinklalapį arba redaguoti esamus lapus ir vienu spustelėjimu išbandyti, kaip jūsų pakeitimai pateikiami naršyklėje. Spartusis klavišas: „Mac OS X“, „Windows“(SHIFT+F7)
   • Performance: pateikia išsamų aktyvaus puslapio tinklo našumo, kadrų dažnio duomenų, „JavaScript“vykdymo laiko ir būsenos, dažų mirksėjimo ir daug daugiau informacijos. Spartusis klavišas: „Mac OS X“, „Windows“(SHIFT+F5)
   • Tinklas: pateikia visų naršyklės inicijuotų tinklo užklausų sąrašą kartu su atitinkamu metodu, kilmės domenu, tipu, dydžiu ir praėjusiu laiku. Spartusis klaviatūros klavišas: „Mac OS X“(ALT(OPTION)+COMMAND+Q), „Windows“(CTRL+SHIFT+Q)
   • Saugojimo inspektorius: pažiūrėkite į svetainės talpyklą ir slapukus. Spartusis klaviatūros klavišas: (SHIFT+F9)
   • Kūrėjo įrankių juosta: atidaro interaktyvų komandų eilutės interpretatorių. Į interpretatorių įveskite help, kad pamatytumėte visų galimų komandų sąrašą ir tinkamą jų sintaksę. Spartusis klavišas: „Mac OS X“, „Windows“(SHIFT+F2)
   • WebIDE: suteikia galimybę kurti ir vykdyti žiniatinklio programas naudojant faktinį įrenginį, kuriame veikia „Firefox“OS, arba naudojant „Firefox“OS simuliatorių. Spartusis klavišas: „Mac OS X“, „Windows“(SHIFT+F8)
   • Naršyklės pultas: teikia tas pačias funkcijas kaip žiniatinklio konsolė (žr. aukščiau). Tačiau visi pateikti duomenys yra skirti visai „Firefox“programai (įskaitant plėtinius ir naršyklės lygio funkcijas), o ne tik aktyvų tinklalapį. Spartusis klaviatūros klavišas: „Mac OS X“(SHIFT+COMMAND+J), „Windows“(CTRL+SHIFT+J)
   • Reaktyvaus dizaino rodinys: leidžia akimirksniu peržiūrėti tinklalapį skirtingos raiškos, išdėstymo ir dydžių ekranais, kad būtų galima imituoti kelis įrenginius, įskaitant planšetinius kompiuterius ir išmaniuosius telefonus. Spartusis klavišas: „Mac OS X“(ALT(OPTION)+COMMAND+M), „Windows“(CTRL+SHIFT+M)
   • Scratchpad: bloknotas leidžia rašyti, redaguoti, integruoti ir vykdyti JavaScript kodo fragmentus iššokančiajame Firefox lange. Atidarykite interaktyvų „JavaScript“dokumentą, leidžiantį įrašyti kodą ir išbandyti jį su svetaine. Spartusis klavišas: (SHIFT+F4)
   • Paslaugų darbuotojai: derinkite paslaugų darbuotojus savo žiniatinklio programoje. Gaukite išsamios informacijos apie jų veikimą ir klaidas.
   • Puslapio š altinis: originalus naršyklės kūrėjo įrankis, ši parinktis tiesiog rodo galimą aktyvaus puslapio š altinio kodą. Spartusis klavišas: „Mac OS X“(COMMAND+U), „Windows“(CTRL+U)
   • Gaukite daugiau įrankių: oficialioje „Mozilla“priedų svetainėje atidaroma Web Developer's Toolbox kolekcija, kurioje yra apie tuziną populiarių plėtinių, tokių kaip kaip Firebug ir Greasemonkey.

   

Microsoft Edge/Internet Explorer

Dažniausiai vadinama F12 kūrėjo įrankiais, pagarba sparčiajam klavišui, kuris paleido sąsają nuo ankstesnių Internet Explorer versijų, IE11 ir Microsoft Edge kūrimo įrankių rinkinio. Nuo pat įkūrimo nuėjo ilgą kelią, siūlydama labai patogią monitorių, derinimo priemonių, emuliatorių ir tiesioginių kompiliatorių grupę.

„Microsoft“nebepalaiko „Internet Explorer“ir rekomenduoja atnaujinti į naujesnę „Edge“naršyklę. Eikite į jų svetainę ir atsisiųskite naujausią versiją.

1. Pasirinkite Daugiau veiksmų, pavaizduotas trys taškai ir yra viršutiniame dešiniajame naršyklės lango kampe.

   

2. Kai pasirodys išskleidžiamasis meniu, pasirinkite parinktį, pažymėtą Kūrėjo įrankiai.

   

3. Kūrimo sąsaja dabar turėtų būti rodoma, paprastai naršyklės lango apačioje. Galimi šie įrankiai, kuriuos galima pasiekti spustelėjus atitinkamo skirtuko antraštę arba naudojant pridedamą sparčiąjį klavišą.

   

   • DOM Explorer: leidžia redaguoti stilių lenteles ir HTML aktyviame puslapyje, einant pateikiant pakeistus rezultatus. Naudoja „IntelliSense“funkciją, kad automatiškai užbaigtų kodą, kai taikoma. Spartusis klavišas: (CTRL+1)
   • Console: suteikia galimybę pateikti derinimo informaciją, įskaitant skaitiklius, laikmačius, sekimus ir pritaikytus pranešimus per integruotą API. Be to, leidžia įvesti kodą į aktyvų tinklalapį ir realiuoju laiku modifikuoti atskiriems kintamiesiems priskirtas reikšmes. Spartusis klavišas: (CTRL+2)
   • Debugger: leidžia nustatyti lūžio taškus ir derinti kodą, kol jis vykdomas, jei reikia, eilutę po eilutės. Spartusis klavišas: (CTRL+3)
   • Tinklas: pateikiamos visos tinklo užklausos, kurias naršyklė inicijuoja įkeliant ir vykdant puslapį, įskaitant išsamią protokolo informaciją, turinio tipą, pralaidumo naudojimą ir daug daugiau. Spartusis klavišas: (CTRL+4)
   • Performance: išsami informacija apie kadrų dažnį, procesoriaus naudojimą ir kitą su našumu susijusią metriką, kuri padės pagreitinti puslapio įkėlimo laiką ir kitą veiklą. Spartusis klavišas: (CTRL+5)
   • Atmintis: padeda atskirti ir ištaisyti galimus atminties nutekėjimus dabartiniame tinklalapyje, rodant atminties naudojimo laiko juostą kartu su momentinėmis nuotraukomis iš skirtingų laiko intervalų. Spartusis klavišas: (CTRL+6)
   • Emuliacija: rodoma, kaip būtų rodomas aktyvus puslapis esant įvairiai skyrai ir ekrano dydžiui, imituojant išmaniuosius telefonus, planšetinius kompiuterius ir kitus įrenginius. Ji taip pat suteikia galimybę keisti vartotojo agentą ir puslapio orientaciją, taip pat imituoti skirtingas geografines vietas įvedant platumą ir ilgumą. Spartusis klavišas: (CTRL+7)

4. Norėdami rodyti Console, o naudodami bet kurį kitą įrankį paspauskite kvadratinį mygtuką su dešiniuoju skliaustu, esančiu jo viduje. viršutiniame dešiniajame kūrimo įrankių sąsajos kampe.

   

5. Jei norite atjungti kūrėjo įrankių sąsają, kad ji taptų atskiru langu, pasirinkite du pakopinius stačiakampius arba naudokite šį spartųjį klavišą: CTRL+P. Įrankius galite grąžinti į pradinę vietą, antrą kartą paspausdami CTRL+P.

   

Apple Safari (tik „Mac“)

Įvairus „Safari“kūrimo įrankių rinkinys atspindi didelę kūrėjų bendruomenę, kuri savo projektavimo ir programavimo reikmėms naudoja „Mac“. Be galingos konsolės ir tradicinių registravimo ir derinimo funkcijų, taip pat pateikiamas lengvai naudojamas interaktyvaus dizaino režimas ir įrankis, leidžiantis kurti savo naršyklės plėtinius.

1. Ekrano viršuje esančiame naršyklės meniu pasirinkite Safari. Kai pasirodys išskleidžiamasis meniu, pasirinkite Preferences. Vietoj šio meniu elemento taip pat galite naudoti šį spartųjį klavišą: COMMAND+COMMA(,)

   

2. Dabar turėtų būti rodoma „Safari“sąsaja Preferences, perdengianti naršyklės langą. Pasirinkite Išplėstinės piktogramos, esančią dešinėje antraštės pusėje.

   

3. Dabar turėtų būti matomos Išplėstinės nuostatos. Šio ekrano apačioje yra parinktis, pažymėta Show Develop menu meniu juostoje, kartu su žymimuoju laukeliu. Jei langelyje nerodoma varnelė, spustelėkite ją vieną kartą, kad ją įdėtumėte.

   

4. Uždarykite Preferences sąsają.

5. Dabar turėtumėte pastebėti naują naršyklės meniu parinktį pavadinimu Develop, esančią tarp žymių ir lango. Spustelėkite šį meniu elementą. Dabar turėtų būti rodomas išskleidžiamasis meniu, kuriame yra šios parinktys.

   • Atidaryti puslapį su: leidžia atidaryti aktyvų tinklalapį vienoje iš kitų naršyklių, šiuo metu įdiegtų jūsų Mac kompiuteryje.
   • User Agent: leidžia pasirinkti iš daugiau nei tuzino iš anksto nustatytų vartotojo agento verčių, įskaitant kelias "Chrome", "Firefox" ir "Internet Explorer" versijas, taip pat nustatyti savo pasirinktines string.
   • Įjunkite reaguojantį dizaino režimą: dabartinis puslapis pateikiamas taip, kaip jis atrodytų įvairiuose įrenginiuose ir esant skirtingoms ekrano skyroms.
   • Rodyti žiniatinklio inspektorių: paleidžiama pagrindinė Safari kūrėjo įrankių sąsaja, kuri paprastai yra naršyklės ekrano apačioje ir kurią sudaro šios skiltys: Elementai, Tinklas, Ištekliai, Laiko juostos, Derinimo priemonė, Saugykla, Konsolė.
   • Rodyti klaidų pultą: taip pat paleidžiama kūrėjo įrankių sąsaja tiesiai į konsolės skirtuką, kuriame rodomos klaidos, įspėjimai ir kita paieška. žurnalo duomenys.
   • Rodyti puslapio š altinį: atidaromas išteklių skirtukas, kuriame rodomas aktyvaus puslapio, suskirstyto į dokumentą, š altinio kodas.
   • Rodyti puslapio išteklius: atlieka tą pačią funkciją kaip ir parinktis Rodyti puslapio š altinį.
   • Rodyti fragmentų rengyklę: atidaromas naujas langas, kuriame galite įvesti CSS ir HTML kodą, peržiūrėdami jo išvestį skrydžio metu.
   • Show Extension Builder: suteikia galimybę kurti arba redaguoti Safari plėtinius naudojant CSS, HTML ir JavaScript.
   • Rodyti laiko juostos įrašą: atidaromas skirtukas Laiko juostos ir pradedamos rodyti tinklo užklausos, išdėstymas ir pateikimo informacija bei JavaScript vykdymas realiuoju laiku.
   • Ištuštinti talpyklas: ištrina visą talpyklą, šiuo metu saugomą standžiajame diske.
   • Išjungti talpyklas: Sustabdo „Safari“kaupimą talpykloje, kad visas turinys būtų nuskaitytas iš serverio kiekvieną kartą įkeliant puslapį.
   • Išjungti vaizdus: Neleidžiama pateikti vaizdų visuose tinklalapiuose.
   • Išjungti stilius: Įkeliant puslapį nepaisoma CSS savybių.
   • Išjungti JavaScript: riboja JavaScript vykdymą visuose puslapiuose.
   • Išjungti plėtinius: Draudžiama visiems įdiegtiems plėtiniams paleisti naršyklėje.
   • Išjungti konkrečios svetainės įsilaužimus: jei „Safari“buvo modifikuotas taip, kad būtų aiškiai išspręstos aktyvaus tinklalapio problemos, ši parinktis blokuos tuos pakeitimus, kad puslapis įkeliama taip, kaip buvo prieš įvedant šiuos pakeitimus.
   • Išjungti vietinių failų apribojimus: Leidžia naršyklei pasiekti failų jūsų vietiniuose diskuose. Šis veiksmas pagal numatytuosius nustatymus apribotas saugumo sumetimais.
   • Išjungti kelių š altinių apribojimus: šie apribojimai taikomi pagal numatytuosius nustatymus, kad būtų išvengta XSS ir kitų galimų pavojų. Tačiau kūrimo tikslais juos dažnai reikia laikinai išjungti.
   • Leisti „JavaScript“iš išmaniosios paieškos lauko: kai įjungta, ji suteikia galimybę įvesti URL su javascript: įtraukta tiesiai į adreso juostą.
   • Laikykite SHA-1 sertifikatus nesaugiais: SSL sertifikatai, naudojantys SHA-1 algoritmą, plačiai laikomi pasenusiais ir pažeidžiamais.