Be to, dauguma naršyklių kūrėjų, daugiausia dėmesio skirdami kasdieniniam naudotojui, norinčiam naršyti internete, taip pat patenkina interneto kūrėjų, dizainerių ir kokybės užtikrinimo specialistų, kurie padeda kurti programas ir svetaines, prie kurių prisijungia tie naudotojai, integruojant galingus įrankius tiesiai į naršykles. patys.
Baigėsi dienos, kai tik naršyklėje rastos programavimo ir testavimo priemonės leido jums peržiūrėti puslapio šaltinio kodą ir nieko daugiau. Šiandienos naršyklės leidžia jums nuversti kur kas giliau, atliekant veiksmus, pvz., Vykdant ir derinant "JavaScript" fragmentus, tikrinant ir redaguojant DOM elementus, stebint realaus laiko tinklo srautą, kai jūsų programa arba puslapis apkrovos, siekiant nustatyti kliūtis, analizuoti CSS našumą, užtikrinti, kad jūsų kodas būtų nenaudoja per daug atminties ar per daug procesoriaus ciklų ir daug daugiau. Tyrimų požiūriu galite atsinaujinti, kaip programa ar tinklalapis bus rodomos skirtingose naršyklėse, taip pat skirtinguose įrenginiuose ir platformose, pasitelkiant jautrų dizainą ir įmontuotus treniruoklius. Geriausia yra tai, kad galite tai padaryti, nepalikdamas savo naršyklės!
Toliau pateikiamose mokymo programose rasite kelias populiarias interneto naršykles, kaip pasiekti šiuos kūrėjų įrankius.
"Google Chrome"
"Chrome" kūrėjų įrankiai leidžia redaguoti ir derinti kodą, tikrinti atskirus komponentus, kad būtų atskleisti našumo problemos, imituotų skirtingus įrenginio ekranus, įskaitant tuos, kurie veikia "Android" ar "iOS", ir atlikti keletą kitų naudingų funkcijų.
- Spustelėkite "Chrome" pagrindinio meniu mygtuką, pažymėtą trimis horizontaliomis eilutėmis ir esantį viršutiniame dešiniajame naršyklės kampe.
- Kai pasirodys išskleidžiamasis meniu, užveskite pelės žymeklį virš Daugiau įrankių pasirinkimas.
- Dabar turėtų būti rodomas antrinis meniu. Pasirinkite parinktį, pažymėtą Kurejo irankiai . Vietoje šio meniu galite naudoti šią spartųjį klavišą: "Chrome" OS / "Windows" ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Dabar turėtų būti rodoma "Chrome" kūrėjų įrankių sąsaja, kaip parodyta šio pavyzdžio ekrano kopijoje. Priklausomai nuo jūsų "Chrome" versijos, pradinis išdėstymas, kurį matote, gali šiek tiek skirtis nuo čia pateikto. Pagrindinis kūrėjų įrankių mazgas, paprastai esantis ekrano apačioje arba dešinėje, turi šiuos skirtukus.Elementai: Suteikia galimybę patikrinti CSS ir HTML kodą, taip pat redaguoti CSS "skrydį į orą", matydamas pakeitimų poveikį realiuoju laiku.Konsolė: "Chrome" "JavaScript" konsolė leidžia atlikti tiesioginę komandą, taip pat diagnozės derinimą.Šaltiniai: Leidžia jums derinti JavaScript kodą per galingą grafinę sąsają.Tinklas: Suskirsto ir pateikia išsamią informaciją apie kiekvieną susijusią aktyviosios programos ar puslapio operaciją, įskaitant visas užklausų ir atsakymų antraštes, taip pat pažangias laiko matavimo priemones.Laiko juosta: Leidžia nuodugniai išnagrinėti kiekvieną veiklą, kuri vyksta naršyklėje, kai tik pradedama vykdyti puslapio ar programos apkrovimo užklausą.
- Be šių skirsnių, taip pat galite naudotis šiomis priemonėmis per >> piktograma, esanti dešinėje pusėje Laiko eilutė skirtukas.Profilis: Suskaidytas į CPU profiler ir Kuro profiliuotojas skirsniuose, pateikia išsamią aktyvios programos arba puslapio atminties naudojimą ir bendrą vykdymo laiką.Apsauga: Pažymi problemas, susijusias su sertifikatu, ir kitus su saugumu susijusius klausimus su aktyviuoju puslapiu ar programa.Ištekliai: Čia galite patikrinti slapukus, vietinę saugyklą, programos talpyklą ir kitus vietinius duomenų šaltinius, naudojamus dabartiniame tinklalapyje ar programoje.Auditas: Pateikiami būdai, kaip optimizuoti puslapio arba programos įkėlimo laiką ir bendrą našumą.
- Įrenginio režimas leidžia peržiūrėti aktyvųjį puslapį simuliatoriuje, kuris pateikia jį beveik tiksliai taip, kaip atrodytų viename iš daugiau nei keliolika įrenginių, įskaitant keletą gerai žinomų "Android" ir "iOS" modelių, tokių kaip "iPad", "iPhone" ir "Samsung Galaxy". Jums taip pat suteikiama galimybė atkartoti pasirinktines ekrano rezoliucijas, kad atitiktų jūsų konkrečius kūrimo ar testavimo poreikius. Norėdami perjungti Įrenginio režimas įjunkite ir išjunkite mobiliojo telefono piktogramą, esančią tiesiai kairėje Elementai skirtukas.
- Taip pat galite tinkinti kūrėjų įrankių išvaizdą ir jausmą, pirmiausia spustelėdami meniu mygtuką, kurį sudaro trys vertikaliai išdėstyti taškai, esančios dešiniajame pirmiau minėtų skirtukų lape. Šiame išskleidžiamajame meniu galite perkelti doką, rodyti ar slėpti įvairius įrankius, taip pat paleisti daugiau pažangių elementų, pvz., Įrenginio tikrintojo. Jūs pastebėsite, kad dev įrankių sąsaja pati yra labai pritaikoma per šiame skirsnyje nustatytus nustatymus.
Mozilla Firefox
"Firefox" žiniatinklio kūrėjų skyriuje pateikiami dizainerių, kūrėjų ir testuotojų įrankiai, tokie kaip stiliaus redaktorius ir pikselių nukreipimo eyedropper.
"LifeWire" rekomenduojama skaityti:Top 25 Greasemonkey ir Tampermonkey vartotojo scenarijai
- Spustelėkite "Firefox" pagrindinio meniu mygtuką, kurį sudaro trys horizontalios linijos ir viršutiniame dešiniajame naršyklės lango kampe.
- Kai pasirodys išskleidžiamasis meniu, pasirinkite piktogramą, pažymėtą etikete Programuotojas . The Žiniatinklio kūrėjas Dabar turėtų būti rodomas meniu, kuriame yra šios parinktys.Jūs pastebėsite, kad dauguma meniu elementų turi su jais susietus sparčiuosius klavišus.Perjungti įrankius: Rodo arba slepia kūrėjo įrankių sąsają, paprastai pateikiamą naršyklės lango apačioje. Klavišų spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )Inspektorius: Leidžia jums patikrinti ir / arba keisti CSS ir HTML kodą aktyviajame puslapyje, taip pat nešiojamajame įrenginyje per nuotolinę derinimą. Klavišų spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )Žiniatinklio konsolė: Leidžia paleisti "JavaScript" išraiškas aktyvioje svetainėje, taip pat peržiūrėti įvairius įrašytus duomenis, įskaitant saugos įspėjimus, tinklo užklausas, CSS pranešimus ir dar daugiau. Klavišų spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )Derintojas: The "JavaScript" debugeris leidžia nustatyti ir ištaisyti defektus, nustatant sustojimų taškus, tikrinant DOM mazgus, juodus bokso išorinius šaltinius ir dar daugiau. Kaip ir byloje Inspektorius , ši funkcija taip pat palaiko nuotolinę derinimą. Klavišų spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S) Stilius redaktorius: Leidžia kurti naujas stilių lenteles ir įtraukti juos į aktyvų tinklalapį, redaguoti esamus lapus ir išbandyti, kaip jūsų pakeitimai pateikiami naršyklėje tik vienu paspaudimu. Klaviatūros šaukinys: "Mac OS X", "Windows" ( SHIFT + F7 )Spektaklis: Pateikiamas išsamus aktyviojo puslapio tinklo našumo, rėmo normos duomenų, "JavaScript" vykdymo laiko ir būsenos, dažų mirksėjimo ir daug daugiau. Klaviatūros šaukinys: "Mac OS X", "Windows" ( SHIFT + F5 )Tinklas: Nurodo kiekvieną naršyklės inicijuotą tinklo užklausą kartu su atitinkamu metodu, kilmės domenu, tipu, dydžiu ir laiku. Klavišų spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )Kūrėjo įrankių juosta: Atidaro interaktyvų komandų eilutės vertintoją. Įveskite pagalba į vertėją už visų galimų komandų sąrašą ir jų tinkamą sintaksę. Klaviatūros šaukinys: "Mac OS X", "Windows" ( SHIFT + F2 )Webide: Teikia galimybę kurti ir vykdyti žiniatinklio programas per tikrąjį įrenginį, kuriame veikia "Firefox OS" arba "Firefox OS Simulator". Klaviatūros šaukinys: "Mac OS X", "Windows" ( SHIFT + F8 )Naršyklės konsolė: Suteikia tokią pat funkciją kaip ir Interneto konsolė (pažiūrėkite aukščiau). Tačiau visi duomenys grąžinami visai "Firefox" programai (įskaitant plėtinius ir naršyklės lygio funkcijas), o ne tik aktyviam tinklalapiui. Klavišų spartusis klavišas: "Mac OS X" ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )Atsakomasis dizaino vaizdas: Leidžia akimirksniu peržiūrėti tinklalapį skirtingomis rezoliucijomis, maketais ir ekrano dydžiais, kad imituotų kelis įrenginius, įskaitant planšetinius ir išmaniuosius telefonus. Klavišų spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )Eyedropper: Rodo šešioliktainį spalvų kodą atskirai pasirinktiems vaizdo elementams."Scratchpad": Leidžia jums parašyti, redaguoti, integruoti ir vykdyti JavaScript kodo fragmentus iš išplečiamo "Firefox" lango. Klaviatūros šaukinys: "Mac OS X", "Windows" ( SHIFT + F4 )Puslapio šaltinis: Originalus naršyklės kūrėjas įrankis, ši galimybė tiesiog parodo galimą aktyviojo puslapio šaltinį. Klavišų spartusis klavišas: "Mac OS X" ( COMMAND + U ), Windows ( CTRL + U )Gauti daugiau įrankių: Atidaro "Web Developer" įrankių rinkinys kolekcija oficialioje "Mozilla" svetainių papildomoje svetainėje, kurioje yra apie dešimt populiarių plėtinių, tokių kaip "Firebug" ir "Greasemonkey".
Microsoft Edge / Internet Explorer
Paprastai vadinama F12 Kūrėjo įrankiai , pagarba spartieji klavišai, kurie paleidžia sąsają nuo ankstesnių "Internet Explorer" versijų, "dev" įrankių rinkinys IE11 ir "Microsoft Edge" nuo pat jo įkūrimo praėjo ilgą kelią, siūlant labai patogią grupę monitorių, debugerių, emulatorių ir -kompiliatoriai-skristi
- Spustelėkite ant Daugiau veiksmų meniu, kurį sudaro trys taškai ir kuris yra viršutiniame dešiniajame naršyklės lango kampe. Kai pasirodys išskleidžiamasis meniu, pasirinkite parinktį, pažymėtą F12 Kūrėjo įrankiai . Kaip jau minėjau, įrankius galite pasiekti ir per F12 spartusis klavišas.
- Dabar turėtų būti rodoma kūrimo sąsaja, paprastai naršyklės lango apačioje. Galimi tokie įrankiai, prie kurių kiekvienas pasiekiamas spustelėję jų atitinkamą skirtuko antraštę arba naudodami pridedamą sparčiojo klaviatūros klavišą.DOM Explorer: Leidžia redaguoti stiliaus puslapius ir HTML aktyviame puslapyje, pateikdamas pakeistus rezultatus, kaip jūs einate. Naudojamas "IntelliSense" funkcija, jei reikia, automatiškai užpildyti kodą. Spartieji klavišai: (CTRL + 1) Konsolė: Teikia galimybę pateikti derinimo informaciją, įskaitant skaitiklius, laikmačius, pėdsakus ir pritaikytus pranešimus integruotu API. Be to, galite įterpti kodą į aktyvų tinklalapį ir keisti reikšmes, priskirtas atskiriems kintamiesiems realiuoju laiku. Spartieji klavišai: (CTRL + 2) Derintojas: Leidžia nustatyti pertraukties taškus ir derinti savo kodą, kai jis vykdomas, eilučių eilučių, jei reikia. Spartieji klavišai: (CTRL + 3) Tinklas: Nurodo kiekvieną naršyklės inicijuotą tinklo užklausą puslapio įkėlimo ir vykdymo metu, įskaitant informaciją apie protokolą, turinio tipą, pralaidumo naudojimą ir daug daugiau. Spartieji klavišai: (CTRL + 4) Spektaklis: Išsamios rėmo normos, procesoriaus naudojimas ir kita našumo metrika, padėsianti pagreitinti puslapio įkėlimo laiką ir kitą veiklą. Spartieji klavišai: (CTRL + 5) Atmintis: Padeda izoliuoti ir ištaisyti galimus atminties nutekimus dabartiniame tinklalapyje, rodydami atminties naudojimo laiko juostą kartu su skirtingų laiko intervalų momentiniais vaizdais. Spartieji klavišai: (CTRL + 6) Emuliacija: Parodo, kaip aktyvus puslapis būtų pateikiamas skirtingomis rezoliucijomis ir ekrano dydžiais, emuliuojant išmaniuosius telefonus, planšetinius kompiuterius ir kitus įrenginius. Taip pat suteikia galimybę modifikuoti vartotojo agentą ir puslapio orientaciją, taip pat imituoti skirtingus geografinius rodiklius įvesdami platumą ir ilgumą. Spartieji klavišai: (CTRL + 7)
- Norėdami parodyti Konsolė o bet kokiose kitose priemonėse spustelėkite kvadratinį mygtuką, esantį dešinėje, esančio viršutiniame dešiniajame kūrimo priemonių sąsajos kampe.
- Norėdami atidaryti kūrėjų įrankių sąsają, kad jis taptų atskira langa, spustelėkite mygtuką, kurį sudaro du kaskadiniai stačiakampiai arba naudokite šią spartųjį klavišą: CTRL + P . Galite grąžinti įrankius į pradinę vietą, paspausdami CTRL + P antrą kartą.
"Apple Safari" (tik "OS X")
"Safari" įvairios dev įrankių rinkinys atspindi didelę kūrėjų bendruomenę, kuri naudoja "Mac" už savo dizaino ir programavimo poreikius. Be galingo konsolės ir tradicinių prisijungimo ir derinimo funkcijų, taip pat pateikiamas lengvai naudojamas jautrus dizaino režimas ir įrankis, skirtas kurti savo naršyklės plėtinius.
- Spustelėkite Safari naršyklės meniu, esantį jūsų ekrano viršuje. Kai pasirodys išskleidžiamasis meniu, pasirinkite Nustatymai . Vietoje šio meniu galite naudoti šią spartųjį klavišą: COMMAND + COMMA (,)
- "Safari" Nustatymai Sąsaja turėtų būti rodoma, viršijant naršyklės langą. Spustelėkite ant Išplėstinė piktograma, esanti tolimoje dešinėje pusėje.
- The Išplėstinė Prezentacijos dabar turėtų būti matomos. Šio ekrano apačioje pažymėta parinktis Meniu juostoje spustelėkite "Parengti meniu" , kartu su dėžute. Jei laukelyje nerodomas žymeklis, spustelėkite jį vieną kartą, kad jį įdėtumėte ten.
- Uždaryk Nustatymai sąsaja spustelėję raudoną "x", esantį viršutiniame kairiajame kampe.
- Dabar turėtumėte pastebėti naują parinktį, pavadintą naršyklės meniu Kurti , esantis tarp Žymes ir Langas . Spustelėkite šį meniu elementą. Dabar turi būti rodomas išskleidžiamasis meniu, kuriame yra šios parinktys.Atidaryti puslapį su: Leidžia atidaryti aktyvų tinklalapį vienoje iš kitų "Mac" šiuo metu įdiegtų naršyklių.Vartotojo atstovas: Leidžia pasirinkti daugiau nei dvylika iš anksto nustatytų naudotojo agentų verčių, įskaitant keletą "Chrome", "Firefox" ir "Internet Explorer" versijų, taip pat nustatyti savo pasirinktinę eilutę.Įveskite reaguojančio dizaino režimą: Pateikia dabartinį puslapį, nes jis būtų rodomas įvairiuose įrenginiuose ir skirtingose ekrano rezoliucijose.Rodyti žiniatinklio inspektorių: Įjungia pagrindinę "Safari" dev įrankių sąsają, paprastai pateikiamą naršyklės ekrano apačioje ir kurioje yra šie skyriai: Elementai , Tinklas , Ištekliai , Laiko juostos , Derintojas , Sandėliavimas , Konsolė .Rodyti klaidos konsolę: Taip pat paleidžia dev įrankių sąsają tiesiai į Konsolė skirtukas, kuriame rodomos klaidos, įspėjimai ir kiti paieškos duomenys, susiję su žurnalu.Rodyti puslapio šaltinį: Atidaro Ištekliai skirtukas, kuriame rodomas aktyviojo puslapio, suskirstyto pagal dokumentą, kodas.Rodyti puslapio resursus: Atlieka tokią pačią funkciją kaip ir Rodyti puslapio šaltinį pasirinkimas.Rodyti fragmento redaktorių: Atidaromas naujas langas, kuriame galite įvesti CSS ir HTML kodą, peržiūrint jo išvedimą "skrydžio metu".Rodyti "Extension Builder": Suteikia galimybę kurti ar redaguoti "Safari" plėtinius su CSS, HTML ir JavaScript.Rodyti laiko juostos įrašymą: Atidaro Laiko juostos skirtukas ir pradedamas rodyti tinklo užklausas, išdėstymą ir pateikimą, taip pat "JavaScript" vykdymą realiuoju laiku.Tuščia talpyklos: Ištrina visą talpyklą, kuri šiuo metu yra saugoma kietajame diske.Išjungti talpyklą: Sulaiko Safari iš talpyklos, kad visas turinys būtų ištrintas iš serverio po kiekvieno puslapio apkrovos.Išjungti vaizdus: Neleidžia vaizdų perdaryti visuose tinklalapiuose.Išjungti stilių: Ignoruojamas CSS savybės, kai yra įkeltas puslapis.Išjungti JavaScript: Apriboja "JavaScript" vykdymą visuose puslapiuose.Išjungti plėtinius: Uždrausti visus įdiegtus plėtinius paleisti naršyklėje.Išjungti konkrečios svetainės hacks: Jei "Safari" buvo pakeista siekiant aiškiai tvarkyti aktyviam tinklalapiui būdingą (-us) klausimą (-us), ši parinktis blokuoja tuos pakeitimus, kad puslapis būtų įkeltas taip, kaip būtų, prieš pradedant šiuos pakeitimus.Išjungti vietinių failų apribojimus: Leidžia naršyklei susipažinti su vietiniuose diskuose esančiais failais - veiksmu, kuris pagal nutylėjimą yra apribota saugumo sumetimais.Išjungti tarpvalstybinius apribojimus: Šie apribojimai pagal numatytuosius nustatymus yra užkertantys kelią XSS ir kitiems galimai pavojams. Tačiau jie dažnai turi būti laikinai neleidžiami vystymosi tikslais.Leisti "JavaScript" iš "Smart Search" lauko: Kai įjungta, suteikia galimybę įvesti URL su javascript: tiesiogiai įtrauktas į adreso juostą.Traktuokite SHA-1 sertifikatus kaip nesaugius: SSL sertifikatai, naudojant SHA-1 algoritmą, yra laikomi pasenusiomis ir pažeidžiamomis.
