Integruoti žiniatinklio dizainerių, kūrėjų ir testuotojų įrankių rinkiniai
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į ant parinkties Daugiau įrankių .
- Dabar turėtų būti rodomas antrinis meniu. Pasirinkite parinktį, pavadintą " Kūrėjo įrankiai" . 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ą", matydami pakeitimų poveikį realiuoju laiku.
Konsolė: " Chrome" "JavaScript" konsolė leidžia atlikti tiesioginį komandų įrašą, taip pat diagnozės derinimą.
Šaltiniai: leidžia atkurti JavaScript kodą naudodami galingą grafinę sąsają.
Tinklas: kategorizuoja 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 analizuoti kiekvieną naršyklėje vykdomą veiklą, kai tik pradedama įkelti puslapio arba programos apkrovos užklausą. - Be šių skirsnių, taip pat galite pasiekti šias priemones per >> piktogramą, esančią dešinėje nuo skirtuko Laiko juostos .
Profilis: suskaidytas į CPU profilerių ir " Heap profileer" skiltis, pateikiamas išsamus atminties naudojimas ir aktyviojo programos ar puslapio vykdymo laikas.
Saugumas: akcentuoja sertifikatų ir kitas su saugumu susijusias problemas, susijusias 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.
Auditai: 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į simuliatoriaus puslapį, kuris pateikia jį beveik tiksliai, kaip jis pasirodo viename iš daugiau nei dešimties į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. Jei norite įjungti arba išjungti įrenginio režimą , pasirinkite mobiliojo telefono piktogramą, esančią tiesiai kairėje elementų skirtuko lape.
- 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.
Rekomenduojama skaityti: Top 25 Greasemonkey ir Tampermonkey vartotojo scenarijus
- 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ą, pavadintą " Kūrėjas" . Dabar turėtų būti rodomas meniu " Web Developer" , kuriame yra šios parinktys. Jūs pastebėsite, kad dauguma meniu elementų turi su jais susietus sparčiuosius klavišus.
Įjunkite įrankius: rodomi arba slėpti kūrėjo įrankių sąsaja, kuri paprastai yra naršyklės lango apačioje. Klaviatūros spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + I ), "Windows" ( CTRL + SHIFT + I )
Inspektorius: leidžia patikrinti ir / arba keisti CSS ir HTML kodą aktyviajame puslapyje, taip pat nešiojamajame įrenginyje per nuotolinę derinimą. Klaviatūros spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + C ), "Windows" ( CTRL + SHIFT + C )
"Web Console": leidžia aktyvuojamame puslapyje atlikti "JavaScript" išraiškas, taip pat peržiūrėti įvairius įrašytus duomenis, įskaitant saugos įspėjimus, tinklo užklausas, CSS pranešimus ir dar daugiau. Klaviatūros spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + K ), "Windows" ( CTRL + SHIFT + K )
Debugger: " JavaScript" debugeris leidžia jums tiksliai nustatyti ir ištaisyti defektus, nustatydamas pertraukties taškus, tikrinant DOM mazgus, juodus bokso išorinius šaltinius ir dar daugiau. Kaip ir Inspektoriaus atveju , ši funkcija taip pat palaiko nuotolinę derinimą. Klaviatūros spyruoklė: "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 spyruoklė: "Mac OS X", "Windows" ( SHIFT + F7 )
Veikimas: 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 spartusis klavišas: "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. Klaviatūros spartusis klavišas: "Mac OS X" ( ALT (OPTION) + COMMAND + Q ), "Windows" ( CTRL + SHIFT + Q )
Kūrėjo įrankių juosta: atidaromas interaktyvus komandų eilutės vertėjas. Įveskite pagalbą į vertėją už visų galimų komandų sąrašą ir jų tinkamą sintaksę. Klaviatūros spartusis klavišas: "Mac OS X", "Windows" ( SHIFT + F2 )
Webide: suteikia galimybę kurti ir vykdyti žiniatinklio programas per tikrąjį įrenginį, kuriame veikia "Firefox OS" arba "Firefox OS Simulator". Klaviatūros spartusis klavišas: "Mac OS X", "Windows" ( SHIFT + F8 )
Naršyklės konsolė: suteikia tokią pačią funkciją kaip ir žiniatinklio konsolėje (žr. 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. Klaviatūros spartusis klavišas: "Mac OS X" ( SHIFT + COMMAND + J ), "Windows" ( CTRL + SHIFT + J )
"Responsive Design View": leidžia greitai peržiūrėti tinklalapį skirtingomis rezoliucijomis, išdėstymais ir ekrano dydžiais, kad imituotų kelis įrenginius, įskaitant planšetinius kompiuterius ir išmaniuosius telefonus. Klaviatūros 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 rašyti, redaguoti, integruoti ir vykdyti "JavaScript" kodo fragmentus iš išplečiamo "Firefox" lango. Klaviatūros spartusis klavišas: "Mac OS X", "Windows" ( SHIFT + F4 )
Puslapio šaltinis: originalus naršyklės kūrėjas įrankis, ši galimybė tiesiog parodo galimą aktyviojo puslapio šaltinio kodą. Klaviatūros spartusis klavišas: "Mac OS X" (" COMMAND + U" ), "Windows" ( CTRL + U )
Gaukite daugiau įrankių: atidaroma " Web Developer" įrankių rinkinio 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ūrimo įrankiais , 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 daugybę būdų, siūlančių labai patogią grupę monitoriai, debugeriai, emuliatoriai ir kompaktiniai diskai.
- Spustelėkite " 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ūrimo įrankiais . Kaip jau minėjau, įrankius galite pasiekti ir per F12 spartųjį klavišą.
- 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 aktyviuoju tinklalapiu, pateikdamas pakeistus rezultatus. Naudojamas "IntelliSense" funkcija, jei reikia, automatiškai užpildyti kodą. Klaviatūros šaukinys: (CTRL + 1)
Konsolė: suteikia galimybę pateikti derinimo informaciją, įskaitant skaitiklius, laikmačius, pėdsakus ir pritaikytus pranešimus integruotoje API. Be to, galite įterpti kodą į aktyvų tinklalapį ir keisti reikšmes, priskirtas atskiriems kintamiesiems realiuoju laiku. Spartieji klavišai: (CTRL + 2)
Debugger: leidžia nustatyti pertraukties taškus ir derinti savo kodą, kai jis vykdomas, eilučių eilučių, jei reikia. Klaviatūros spartusis klavišas: (CTRL + 3)
Tinklas: nurodo kiekvieną tinklo užklausą, inicijuotą naršyklės metu puslapio įkėlimo ir vykdymo metu, įskaitant informaciją apie protokolą, turinio tipą, pralaidumo naudojimą ir daug daugiau. Spartieji klavišai: (CTRL + 4)
Veikimas: išsamūs rastriniai dažniai, procesoriaus naudojimas ir kita našumo metrika, padėsianti pagreitinti puslapio įkėlimo laiką ir kitą veiklą. Klavišų spartusis klavišas: (CTRL + 5)
Atmintis: padeda izoliuoti ir ištaisyti potencialias atminties nutekimus esamame tinklalapyje, rodydamas atminties naudojimo laiko juostą kartu su skirtingų laiko intervalų momentiniais vaizdais. Klaviatūros šaukinys: (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) - Jei norite parodyti konsolę, kai naudojate bet kurį kitą įrankį, spustelėkite kvadratinį mygtuką, dešinėje jo dešinėje esančioje programavimo sąsajos kampe.
- Norėdami atidaryti kūrėjų įrankių sąsają, kad jis taptų atskira langa, spustelėkite mygtuką, kurį vaizduoja du kaskadiniai stačiakampiai arba naudokite šią spartųjį klavišą: CTRL + P. Galite įdėti įrankius į pradinę vietą, dar kartą paspausdami CTRL + P.
"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 Nuostatos . Vietoje šio meniu galite naudoti šią spartųjį klavišą: COMMAND + COMMA (,)
- Dabar turėtų būti rodoma Safari " Preferences" sąsaja, viršijanti naršyklės langą. Spustelėkite piktogramą " Advanced" , esančią dešinėje pusėje esančio antraštės.
- Išplėstinės nuostatos dabar turėtų būti matomos. Šio ekrano apačioje yra parinktis, pažymėtą meniu Rodyti meniu "Parengti meniu" kartu su žymimujuku. Jei laukelyje nerodomas žymeklis, spustelėkite jį vieną kartą, kad jį įdėtumėte ten.
- Uždarykite " Preferences" sąsają spustelėdami raudoną "x", esantį viršutiniame kairiajame kampe.
- Dabar turėtumėte pastebėti naują parinktį naršyklės meniu " Sukurti" , esantį tarp žymių ir lango . 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 agentas: leidžia pasirinkti daugiau nei dvylika iš anksto nustatytų naudotojo agentų verčių, įskaitant kelias "Chrome", "Firefox" ir "Internet Explorer" versijas, taip pat nustatyti savo pasirinktinę eilutę.
Įveskite reaguojančio dizaino režimą : pateikia esamą puslapį, nes jis būtų rodomas įvairiuose įrenginiuose ir skirtingose ekrano rezoliucijose.
Rodyti "Web Inspector": paleidžia pagrindinę "Safari" dev įrankių sąsają, paprastai pateikiamą naršyklės ekrano apačioje ir kurioje yra šie elementai : elementai , tinklas , ištekliai , laiko juostos , atsektuvas , saugykla , konsolė .
Rodyti klaidų konsolę: taip pat paleidžia "dev" įrankių sąsają tiesiai į konsolės skirtuką, kuriame rodomos klaidos, įspėjimai ir kiti paieškoje naudojami žurnalo duomenys.
Rodyti puslapio šaltinį: atidaro skirtuką " ištekliai ", kuriame rodomas aktyviojo puslapio, suskirstyto pagal dokumentą, kodas.
Rodyti puslapio resursus: atlieka tą pačią funkciją, kaip ir parinktis Rodyti šaltinio šaltinį .
Rodyti fragmento redaktorių: atidaro naują langą, kuriame galite įvesti CSS ir HTML kodą, peržiūrėti jo išvestį "skrydžio metu".
Rodyti Extension Builder: suteikia galimybę kurti ar redaguoti "Safari" plėtinius naudodami CSS, HTML ir JavaScript.
Rodyti laiko juostos įrašymą: atidaromas skirtukas " Laiko juostos " ir pradedamas rodyti tinklo užklausas, išdėstymą ir informacijos pateikimą bei "JavaScript" vykdymą realiuoju laiku.
Tuščia talpyklos : ištrina visą talpyklą, kuri šiuo metu yra saugoma kietajame diske.
Išjunkite talpyklą : sustabdoma "Safari" iš talpyklos, kad visas turinys būtų iš serverio gautas po kiekvieno puslapio įkėlimo.
Išjungti vaizdus: neleidžia rodyti vaizdų visuose tinklalapiuose.
Išjungti stilių: ignoruoja CSS savybes, kai yra įkeltas puslapis.
Išjungti "JavaScript": apribojamas "JavaScript" vykdymas visuose puslapiuose.
Išjungti plėtinius: uždrausti visus įdiegtus plėtinius veikti naršyklėje.
Išjungti konkretaus svetainės hackas: jei "Safari" buvo pakeista, kad būtų aiškiai tvarkomi aktyvaus tinklalapio specifiniai klausimai, ši parinktis blokuoja tuos pakeitimus, kad puslapis būtų įkeltas taip, kaip turė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 apribotas saugumo sumetimais.
Išjungti kryžminio ryšio apribojimus: pagal nutylėjimą šie apribojimai įdiegiami, kad būtų išvengta XSS ir kitų galimų pavojų. Tačiau jie dažnai turi būti laikinai neleidžiami vystymosi tikslais.
Leisti "JavaScript" iš "Smart Search Field": kai įjungta, suteikia galimybę įvesti URL su javascript: įtraukta tiesiai į adreso juostą.
"SHA-1" sertifikatus naudokite kaip nesaugius. SSL sertifikatai, naudojant SHA-1 algoritmą, yra laikomi pasenusiomis ir pažeidžiamomis.