Mjete të integruara për hartuesit e uebit, zhvilluesit dhe testuesit
Përveç shumicës së krijuesve të shfletuesve që përqendrohen tek përdoruesit e përditshëm që kërkojnë të shfletojnë Uebin, ata gjithashtu i kushtojnë vëmendje zhvilluesve të uebit, projektuesve dhe profesionistëve të sigurimit të cilësisë të cilët ndihmojnë në ndërtimin e aplikacioneve dhe faqeve që ata përdoruesit po qasen duke integruar mjete të fuqishme në shfletues vetë.
Gone janë ditët kur mjetet e vetme të programimit dhe testimit të gjetura brenda një shfletuesi ju lejojnë të shihni kodin burimor të faqes dhe asgjë më shumë. Shfletuesit e sotëm ju lejojnë të merrni një zhytje shumë më të thellë duke bërë gjëra të tilla si ekzekutimi dhe debugimi i fragmenteve JavaScript, inspektimi dhe redaktimi i elementeve të DOM-it, monitorimi i trafikut të rrjetit në kohë reale si aplikacioni ose faqja juaj për të identifikuar bllokimin, analizimin e performancës CSS, duke mos përdorur shumë memorie ose shumë cikle CPU , dhe shumë më tepër. Nga perspektiva e testimit, mund të riprodhoni se si një aplikacion ose faqe Web do të shfaqet në shfletues të ndryshëm, si dhe në pajisje dhe platforma të ndryshme, përmes magjisë së dizajnit të përgjegjshëm dhe simulatorëve të ndërtuar. Pjesa më e mirë është që ju mund të bëni të gjitha këto pa pasur nevojë të largoni shfletuesin tuaj!
Udhëzimet më poshtë ecin nëpër atë se si t'i qaseni këto mjete zhvilluesi në disa shfletues të popullarizuar të uebit.
Google Chrome
Mjetet e zhvillimit të Chrome mundësojnë të modifikosh dhe korigjosh kodin, të kontrollosh elementë individualë për të ekspozuar çështje të performancës, të simulosh ekranet e pajisjeve të ndryshme duke përfshirë ato që përdorin Android ose iOS dhe të kryejnë disa funksione të tjera të dobishme.
- Klikoni në butonin kryesor të Chrome, të shënuar me tre rreshta horizontale dhe të vendosura në cepin e sipërm të djathtë të shfletuesit.
- Kur shfaqet menyja zbritëse, rri pezull kursorin e miut mbi opsionin Më shumë mjete .
- Tani duhet të shfaqet një nën-meny. Zgjidh opsionin e etiketuar mjete zhvilluesi . Në vend të kësaj pjese të menusë mund të përdorni edhe shkurtorin e mëposhtëm të tastierës: OS / Windows Chrome ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + KOMANDA + I )
- Ndërfaqja e Mjeteve të Zhvilluesve të Chrome duhet të shfaqet, siç tregohet në këtë screenshot të shembullit. Në varësi të versionit tuaj të Chrome, faqosja fillestare që shihni mund të jetë paksa e ndryshme nga ajo e paraqitur këtu. Fokusi kryesor i veglave të zhvilluesit, zakonisht i vendosur në anën e poshtme ose të djathtë të ekranit, përmban skedat e mëposhtme.
Elementet: Ofron mundësinë për të inspektuar kodin CSS dhe HTML, si dhe për të redaktuar CSS në fluturim, duke parë efektet e ndryshimeve tuaja në kohë reale.
Konsol: Kromi i JavaScript i Chrome lejon hyrjen e komandës direkte, si dhe debugimin diagnostik.
Burimet: Ju lejon të ndreqni kodin JavaScript përmes një ndërfaqe grafike të fuqishme.
Rrjeti: Kategorizon dhe tregon informacion të detajuar për çdo veprimtari të lidhur në aplikacionin ose në faqen aktive, duke përfshirë edhe kërkesa të plota dhe kërkesa, si dhe metrics të avancuara kohore.
Afati kohor: Lejon për analizë të thellë të çdo aktiviteti që ndodh brenda shfletuesit sapo të fillohet një kërkesë për ngarkim të faqes ose aplikacionit. - Përveç këtyre seksioneve, gjithashtu mund të hyni në mjetet e mëposhtme nëpërmjet ikonës >> , që ndodhet në të djathtë të skedës Timeline .
Profili: E prishur në profiluesin e CPU dhe në seksionet e profileve Heap , ofron përdorim të plotë të memories dhe kohëzgjatjen e përgjithshme të aplikimit ose faqes aktive.
Siguria: nxjerr në pah problemet e certifikatës dhe çështje të tjera të lidhura me sigurinë me faqen ose aplikacionin aktiv.
Burimet: Këtu mund të inspektoheni cookies, ruajtjen lokale, cache app dhe burime të tjera lokale të të dhënave të përdorura nga faqja aktuale ose aplikacioni.
Auditimet: Ofron mënyra për të optimizuar kohën dhe kohën e ngarkimit të faqes ose aplikacionit dhe performancën e përgjithshme. - Modeli i pajisjes ju lejon të shikoni faqen aktive në një simulator që e bën pothuajse pikërisht ashtu siç do të shfaqet në njërën nga pajisjet duzinë, duke përfshirë disa nga modelet e njohura të Android dhe iOS si iPad, iPhone dhe Samsung Galaxy. Juve u jepet gjithashtu aftësia për të matur rezolutat e personalizuara të ekranit për t'iu përshtatur nevojave tuaja të zhvillimit ose testimit. Për të aktivizuar dhe çaktivizuar Modalitetin e Pajisjes , zgjidhni ikonën e telefonit celular që ndodhet drejtpërsëdrejti në të majtë të skedës së Elementeve .
- Ju gjithashtu mund të rregulloje pamjen dhe ndjenjën e mjeteve zhvilluese duke klikuar së pari në butonin e menysë të përfaqësuar nga tre pikat e vendosura vertikalisht dhe të vendosura në anën e djathtë të djathtë të skedave të lartpërmendura. Nga brenda këtij drop-down menu, ju mund të ripoziciononi bankën e të akuzuarve, të shfaqni ose fshehni mjete të ndryshme, si dhe të nisni objekte më të avancuara, siç është një inspektor i pajisjes. Ju do të gjeni se ndërfaqet e mjeteve të dev janë shumë të personalizueshme nëpërmjet cilësimeve të gjetura në këtë seksion.
Mozilla Firefox
Seksioni i Zhvilluesit të Uebit të Firefox-it përfshin mjete për projektues, zhvillues dhe testues njësoj sikur një redaktor stilesh dhe syzeqelë me synim pikseli.
Leximi i rekomanduar: Skenarët kryesorë të 25 Greasemonkey dhe Tampermonkey
- Klikoni mbi butonin kryesor të Firefox-it, të përfaqësuar nga tre linja horizontale dhe të vendosura në cepin e sipërm të djathtë të dritares së shfletuesit.
- Kur shfaqet menyja e drop-down, zgjidhni ikonën e emërtuar Developer . Tani duhet të shfaqet menuja Web Developer , që përmban opsionet e mëposhtme. Do të vëreni se shumica e artikujve të menysë kanë shkurtesat e tastierës që lidhen me to.
Mjetet e Toggle: Shfaq ose fshin ndërfaqen e mjeteve të zhvilluesit, zakonisht të pozicionuar në fund të dritares së shfletuesit. Shkurtore e tastierës: Mac OS X ( ALT (OPTION) + KOMANDA + I ), Windows ( CTRL + SHIFT + I )
Inspektori: Ju lejon të inspektojë dhe / ose tweak CSS dhe kodin HTML në faqen aktive, si dhe në një pajisje portative nëpërmjet debugging largët. Shkurtorja e tastierës: Mac OS X ( ALT (OPTION) + KOMANDA + C ), Windows ( CTRL + SHIFT + C )
Web Console: Ju lejon të ekzekutoni shprehjet e JavaScript brenda faqes aktive, si dhe të rishikoni një sërë të dhënash të ndryshuara duke përfshirë paralajmërimet e sigurisë, kërkesat e rrjetit, mesazhet CSS dhe më shumë. Shkurtorja e tastierës: Mac OS X ( ALT (OPTION) + KOMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: Debugger JavaScript ju lejon të identifikoni dhe të rregulloni defektet duke përcaktuar pikat e thyera, duke inspektuar nyjet DOM, burimet e jashtme të boksit të zi dhe shumë më tepër. Siç është rasti me Inspektorin , kjo veçori gjithashtu mbështet debugging në distancë. Shkurtore e tastierës: Mac OS X ( ALT (OPTION) + KOMANDA + S ), Windows ( CTRL + SHIFT + S)
Redaktuesi i stilit: Ju lejon të krijoni fletushka të reja stilesh dhe t'i përfshini ato në faqen aktive Web, ose të redaktoni fletët ekzistuese dhe të provoni se si ndryshimet tuaja bëhen në një shfletues me vetëm një klikim. Shkurtore e tastierës: Mac OS X, Windows ( SHIFT + F7 )
Performanca: Ofron një ndarje të detajuar të performancës së rrjetit të faqes aktive, të të dhënave të kuadrove, kohës së ekzekutimit të JavaScript dhe gjendjes, bojës së ndezjes dhe shumë më tepër. Shkurtore e tastierës: Mac OS X, Windows ( SHIFT + F5 )
Rrjeti: Liston çdo kërkesë rrjeti të iniciuar nga shfletuesi së bashku me metodën përkatëse, domenin e origjinës, llojin, madhësinë dhe kohën e kaluar. Shkurtore e tastierës: Mac OS X ( ALT (OPTION) + KOMANDA + Q ), Windows ( CTRL + SHIFT + Q )
Developer Toolbar: Hap një interaktive interaktive të linjës së komandës. Futni ndihmë në përkthyesin për një listë të të gjitha komandave në dispozicion dhe sintaksën e duhur. Shkurtore e tastierës: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Ofron aftësinë për të krijuar dhe ekzekutuar aplikacionet Web përmes një pajisjeje aktuale që funksionon në Firefox OS ose nëpërmjet Firefox OS Simulator. Shkurtore e tastierës: Mac OS X, Windows ( SHIFT + F8 )
Console Browser: Ofron funksionalitete të njëjta si Web Console (shih më lart). Megjithatë, të gjitha të dhënat e kthyera janë për tërë aplikacionin e Firefox-it (duke përfshirë zgjerimet dhe funksionet e nivelit të shfletuesit) në krahasim me vetëm faqen aktive të Internetit. Shkurtesa e tastierës: Mac OS X ( SHIFT + KOMANDA + J ), Windows ( CTRL + SHIFT + J )
Pamja e përgjegjshme e dizajnit: Ju lejon të shikoni në çast një faqe Web në rezolucione, skema dhe madhësi të ndryshme të imazheve për të imituar pajisje të shumta duke përfshirë tableta dhe smartphones. Shkurtorja e tastierës: Mac OS X ( ALT (OPTION) + KOMANDIMI + M ), Windows ( CTRL + SHIFT + M )
Kapëse me sy: Shfaq kodin e ngjyrave të ngjyrave për piksele të përzgjedhura individualisht.
Scratchpad : Ju lejon të shkruani, modifikoni, integroni dhe ekzekutoni fragmente të kodit JavaScript nga një dritare pop-out Firefox. Shkurtore e tastierës: Mac OS X, Windows ( SHIFT + F4 )
Faqja Burimi: Vegla origjinale e zhvilluesit të shfletuesit, ky opsion thjesht tregon kodin burimor në dispozicion për faqen aktive. Shkurtore e tastierës: Mac OS X ( KOMANDA + U ), Windows ( CTRL + U )
Merrni mjete të tjera: Hap koleksionin e veglave të zhvilluesit të uebit në faqen zyrtare të Mozilla-s, duke përfshirë rreth një duzinë zgjerime të njohura si Firebug dhe Greasemonkey.
Microsoft Edge / Internet Explorer
Zakonisht i referohemi si F12 Developer Tools , një homazh ndaj shkurtesave të tastierës që ka nisur ndërfaqen që nga versionet e mëparshme të Internet Explorer, vegla dev në IE11 dhe Microsoft Edge ka bërë një rrugë të gjatë që nga fillimi i saj duke ofruar një grup shumë të dobishëm monitoruesit, debuggers, emulators, dhe hartuesit në-fluturojnë.
- Klikoni në menunë Më shumë veprime , të përfaqësuara nga tre pika dhe të vendosura në cepin e sipërm të djathtë të dritares së shfletuesit. Kur shfaqet menyja e drop-down, zgjidhni opsionin e emërtuar F12 Developer Tools . Siç e përmenda edhe më sipër, mund të përdorni mjetet përmes shkurtesave të tastierës F12 .
- Tani duhet të shfaqet ndërfaqja e zhvillimit, zakonisht në fund të dritares së shfletuesit. Mjetet e mëposhtme janë në dispozicion, secila e arritshme duke klikuar në titullin e tabelave përkatëse ose duke përdorur shkurtesën shoqëruese të tastierës.
DOM Explorer: Ju lejon të redaktoni fletët e stilet dhe HTML në faqen aktive, duke i bërë rezultatet e modifikuara ndërsa shkoni. Shfrytëzon funksionalitetin IntelliSense për të plotësuar kodin e autocompletimit aty ku është e aplikueshme. Shkurtore e tastierës: (CTRL + 1)
Konsol: Ofron mundësinë për të dërguar informacionin e debugging duke përfshirë kundërvihet, kohëmatësit, gjurmët dhe mesazhet e personalizuara nëpërmjet një API të integruar. Gjithashtu, ju lejon të futni kodin në një faqe Web aktive dhe të modifikoni vlerat e dhëna në variablave individualë në kohë reale. Shkurtore e tastierës: (CTRL + 2)
Debugger: Ju lejon të vendosni pikat e thyera dhe debugoni kodin tuaj derisa ekzekutoni, rresht sipas rreshtit nëse është e nevojshme. Shkurtore e tastierës: (CTRL + 3)
Rrjeti: Liston çdo kërkesë të rrjetit të iniciuar nga shfletuesi gjatë ngarkimit dhe ekzekutimit të faqes duke përfshirë detajet e protokollit, llojin e përmbajtjes, përdorimin e bandwidthit dhe shumë më tepër. Shkurtore e tastierës: (CTRL + 4)
Performanca: Normat e kuadrove të detajuara, shfrytëzimi i CPU-së dhe metrika të tjera të lidhura me performancën, për t'ju ndihmuar të shpejtoni kohën e ngarkimit të faqes dhe aktivitetet e tjera. Shkurtore e tastierës: (CTRL + 5)
Kujtesa: Ju ndihmon të izoloni dhe të korrni rrjedhjet potenciale të kujtesës në faqen e tanishme Web duke shfaqur një afat kohor të përdorimit të kujtesës së bashku me fotografitë nga intervale të ndryshme kohore. Shkurtore e tastierës: (CTRL + 6)
Emulim: Tregon se si do të shfaqet faqja aktive në rezolucione të ndryshme dhe në madhësi të ekranit, duke emuluar smartfonë, tableta dhe pajisje të tjera. Gjithashtu ofron mundësinë për të modifikuar agjentin e përdoruesit dhe orientimin e faqes, si dhe për të simuluar gjeolokacione të ndryshme duke hyrë në një gjerësi dhe gjerësi. Shkurtore e tastierës: (CTRL + 7) - Për të shfaqur Konzollin në një nga mjetet e tjera klikoni në butonin katror me një kllapa të drejtë brenda saj, që ndodhet në këndin e sipërm të djathtë të ndërfaqes së mjeteve zhvillimore.
- Për të çarmatosur, mjetet e zhvilluesit ndërfaqen në mënyrë që të bëhet një dritare e veçantë, klikoni mbi butonin e përfaqësuar nga dy drejtkëndëshe Cascading ose përdorni shkurtoren e mëposhtme të tastierës: CTRL + P. Ju mund t'i vendosni mjetet në vendin e tyre origjinal duke shtypur CTRL + P një herë të dytë.
Apple Safari (vetëm OS X)
Veglat e ndryshme të pajisjeve të Safariut pasqyrojnë komunitetin e madh zhvillues që përdor një Mac për nevojat e tyre të dizajnit dhe programimit. Përveç një tastiere të fuqishme dhe karakteristikave tradicionale të prerjes dhe debugging, gjithashtu sigurohen një modalitet i përgjegjshëm i dizajnit të lehtë për t'u përdorur dhe një mjet për të krijuar extensions tuaj të shfletuesit.
- Klikoni në Safari në menunë e shfletuesit, e vendosur në krye të ekranit tuaj. Kur shfaqet menyja zbritëse, zgjidhni Preferencat . Ju mund të përdorni shkurtoren e mëposhtme të tastierës në vend të kësaj pike të menusë: COMMAND + COMMA (,)
- Ndërfaqja e preferencave të Safari-t tani duhet të shfaqet, duke mbuluar dritaren e shfletuesit tuaj. Kliko në ikonën e avancuar , e vendosur në anën e djathtë të djathtë të kokës.
- Preferencat e Avancuara tani duhet të jenë të dukshme. Në pjesën e poshtme të ekranit është një opsion i emërtuar Shfaq menu Zhvillimi në shiritin e menysë , i shoqëruar nga një kuti kontrolli. Nëse nuk ka shenjë kontrolli të treguar në kutinë, kliko mbi të një herë për të vendosur një atje.
- Mbyllni interface Preferences duke klikuar mbi 'x' kuqe gjetur në këndin e sipërm të majtë.
- Tani duhet të vëreni një opsion të ri në menunë e shfletuesit të quajtur Develop , që gjendet midis Faqeshënuesve dhe Dritares . Klikoni në këtë artikull menu. Tani duhet të shfaqet një menu drop-down që përmban opsionet e mëposhtme.
Hapni faqe me: Mundëson hapjen e faqes aktive në një nga shfletuesit e tjerë të instaluar aktualisht në Mac.
Agjenti i Përdoruesit: Ju lejon të zgjidhni nga mbi një duzinë vlera të paracaktuara të agjentit të përdoruesit duke përfshirë disa versione të Chrome, Firefox dhe Internet Explorer, si dhe të përcaktoni vargun tuaj të personalizuar.
Futni Modalitetin e Përgjegjshëm të Projektimit : Rendizon faqen aktuale ashtu siç do të shfaqet në pajisje të ndryshme dhe në rezolucione të ndryshme të ekranit.
Trego Inspektorin e Uebit: Paraqet ndërfaqen kryesore për mjetet e dev-it të Safarit, zakonisht të vendosura në pjesën e poshtme të ekranit të shfletuesit tuaj dhe që përmbajnë seksionet e mëposhtme: Elementet , Rrjetat , Resurset , Kohëzgjatja , Debugger , Storage , Konsol .
Shfaq Error Console: Gjithashtu nis ndërfaqen e mjeteve të dev, drejtpërdrejt në skedën Console, e cila tregon gabime, paralajmërime dhe të dhëna të tjera të të dhënave të kërkueshme.
Trego Faqe Burimi: Hap skedën Resources , e cila tregon kodin burimor për faqen aktiv të kategorizuar sipas dokumentit.
Trego resurset e faqes: Kryen të njëjtin funksion si opsioni i Shfaqjes së Burimit të Tregut.
Show Editor Snippet: Hap një dritare të re ku mund të futni kodin CSS dhe HTML, duke parashikuar prodhimin e tij në fluturim.
Trego Ndërtuesin e Zgjerimit: Ofron mundësinë për të krijuar ose redaktuar zgjerimet Safari me CSS, HTML dhe JavaScript.
Trego Regjistrimin Afati: Hapni skedën Timelines dhe fillon të shfaqë kërkesat e rrjetit, paraqitjen dhe paraqitjen e informacionit si dhe ekzekutimin e JavaScript në kohë reale.
Cache bosh: Fshi gjithë cache aktualisht duke u ruajtur në hard drive tuaj.
Çaktivizo arkivat: ndalon Safariun nga caching në mënyrë që të gjitha përmbajtjet të tërhiqen nga serveri pas çdo ngarkese faqeje.
Çaktivizo imazhet: Ndalon imazhet nga paraqitja në të gjitha faqet e internetit.
Çaktivizo stilet: Ignoron vetitë CSS kur një faqe është ngarkuar.
Çaktivizo JavaScript: Kufizon ekzekutimin e JavaScript në të gjitha faqet.
Çaktivizo shtesat: Ndalon të gjitha zgjerimet e instaluara nga futja brenda shfletuesit.
Çaktivizo hackat specifike për sajtet: Nëse Safari është modifikuar për të trajtuar në mënyrë eksplicite çështje (et) specifike në faqen aktive të Internetit, ky opsion do të bllokojë ato ndryshime në mënyrë që faqja të ngarkojë siç do të duhej para se këto modifikime të futeshin.
Çaktivizo kufizimet e dosjeve lokale: Lejon që shfletuesi të ketë qasje në skedarët në disqet e tua lokale, një veprim i cili është i kufizuar nga default për arsye sigurie.
Çaktivizimi i kufizimeve të kryqëzuara: Këto kufizime vendosen në parazgjedhje për të parandaluar rrezikun XSS dhe rreziqet e tjera potenciale. Megjithatë, ata shpesh duhet të jenë të paaftë përkohësisht për qëllime zhvillimi.
Lejo JavaScript nga fusha e kërkimit të zgjuar: Kur aktivizohet, siguron mundësinë për të futur URL me javascript: inkorporuar direkt në shiritin e adresave.
Trajtoj certifikatat SHA-1 si të pasigurta: certifikatat SSL që përdorin algoritmin SHA-1 konsiderohen gjerësisht si të vjetruara dhe të pambrojtura.