Si të përdorni mjetet e zhvilluesit të shfletuesit të uebit

2024 Autor: Abigail Brown | [email protected]. E modifikuara e fundit: 2024-01-07 19:06

Përveç që shumica e prodhuesve të shfletuesve fokusohen tek përdoruesi i përditshëm që kërkon të shfletojë në ueb, ata gjithashtu kujdesen për zhvilluesit e uebit, projektuesit dhe profesionistët e sigurimit të cilësisë që ndihmojnë në ndërtimin e aplikacioneve dhe sajteve në të cilat ata përdorues po aksesojnë duke integruar të fuqishëm mjetet direkt në vetë shfletuesit.

Kanë kaluar ditët kur të vetmet mjete programimi dhe testimi të gjetura brenda një shfletuesi ju lejuan të shikoni kodin burimor të një faqeje dhe asgjë më shumë. Shfletuesit e sotëm ju lejojnë të bëni një zhytje shumë më të thellë duke bërë gjëra të tilla si ekzekutimi dhe korrigjimi i fragmenteve të JavaScript, inspektimi dhe redaktimi i elementeve DOM, monitorimi i trafikut të rrjetit në kohë reale ndërsa aplikacioni ose faqja juaj ngarkon për të identifikuar pengesat, duke analizuar performancën e CSS, duke siguruar që kodi juaj është duke mos përdorur shumë memorie ose shumë cikle CPU, dhe shumë më tepër.

Nga një këndvështrim testimi, ju mund të riprodhoni se si një aplikacion ose faqe ueb 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ë integruar. Pjesa më e mirë është se ju mund t'i bëni të gjitha këto pa pasur nevojë të largoheni nga shfletuesi juaj!

Udhëzimet më poshtë ju tregojnë se si të përdorni këto mjete zhvilluesish në disa shfletues të njohur të internetit.

Google Chrome

Mjetet e zhvilluesve të Chrome ju lejojnë të redaktoni dhe korrigjoni kodin, të auditoni komponentë individualë për të ekspozuar problemet e performancës, të simuloni ekrane të ndryshme të pajisjes duke përfshirë ato që funksionojnë Android ose iOS dhe të kryeni disa funksione të tjera të dobishme.

1. Zgjidhni menynë kryesore të Chrome, të shënuar me tre vija horizontale dhe të vendosura në këndin e sipërm djathtas të shfletuesit.

2. Kur të shfaqet menyja rënëse, vendoseni kursorin e miut mbi opsionin Më shumë vegla.

   

3. Tani duhet të shfaqet një nënmenu. Zgjidhni opsionin e emërtuar Vegla zhvilluesish. Mund të përdorni gjithashtu shkurtoren e mëposhtme të tastierës në vend të këtij artikulli të menysë: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Ndërfaqja e Chrome Developer Tools tani duhet të shfaqet, siç tregohet në këtë shembull të pamjes së ekranit. Në varësi të versionit tuaj të Chrome, faqosja fillestare që shihni mund të jetë paksa e ndryshme nga ajo e paraqitur këtu. Qendra kryesore e veglave të zhvilluesit, e vendosur zakonisht në anën e poshtme ose në anën e djathtë të ekranit, përmban skedat e mëposhtme.

5. Përveç këtyre seksioneve, mund të përdorni edhe mjetet e mëposhtme nëpërmjet ikonës >>, e vendosur në të djathtë të Performance tab.

   • Memory: Monitoroni dhe regjistroni përdorimin e kujtesës në një faqe interneti. Ju mund të shihni se sa i rëndë është JavaScript në faqen tuaj.
   • Siguria: Thekson problemet e certifikatës dhe çështje të tjera të lidhura me sigurinë me faqen ose aplikacionin aktiv.
   • Application: Inspektoni burimet që përdoren nga një aplikacion ueb. Merrni një përmbledhje të plotë të asaj që po përdoret.
   • Audits: Ofron mënyra për të optimizuar kohën e ngarkimit të një faqe ose aplikacioni dhe performancën e përgjithshme.

   

6. Modaliteti i pajisjes ju lejon të shikoni faqen aktive në një simulator që e bën atë pothuajse saktësisht siç do të shfaqej në një nga më shumë se një duzinë pajisje, duke përfshirë disa Android të mirënjohur dhe modele iOS si iPad, iPhone dhe Samsung Galaxy. Ju jepet gjithashtu aftësia për të imituar rezolucionet e personalizuara të ekranit për t'iu përshtatur nevojave tuaja të veçanta të zhvillimit ose testimit.

   Për të aktivizuar dhe çaktivizuar Modaliteti i pajisjes, zgjidhni ikonën të telefonit celular që ndodhet direkt në të majtë të Skeda e elementeve.

   

7. Ju gjithashtu mund të personalizoni pamjen dhe ndjesinë e mjeteve tuaja të zhvilluesit duke zgjedhur fillimisht butonin menu të përfaqësuar nga tre pika të vendosura vertikalisht dhe ndodhet në anën e djathtë të skedave të lartpërmendura.

   Nga kjo meny rënëse, mund të ripozicionosh dokun, të shfaqësh ose fshehësh mjete të ndryshme si dhe të lëshosh artikuj më të avancuar, si p.sh. një inspektor pajisjeje. Do të zbuloni se ndërfaqja e veglave të devijimit është shumë e personalizueshme nëpërmjet cilësimeve të gjetura në këtë seksion.

   

Mozilla Firefox

Seksioni i zhvilluesve të uebit të Firefox-it përfshin vegla për projektues, zhvillues dhe testues si një redaktues stili dhe pikatore që synon pixel.

1. Zgjidhni menunë kryesore të Firefox, e përfaqësuar nga tre vija horizontale dhe e vendosur në këndin e sipërm të djathtë të dritares së shfletuesit..

2. Kur të shfaqet menyja rënëse, zgjidhni Zhvilluesi i Uebit.

   

3. Tani duhet të shfaqet menyja Ueb Developer, që përmban opsionet e mëposhtme. Do të vini re se shumica e artikujve të menysë kanë shkurtore të tastierës të lidhura me to.

   • Toggle Tools: Shfaq ose fsheh ndërfaqen e veglave të zhvilluesit, e pozicionuar zakonisht në fund të dritares së shfletuesit. Shkurtorja e tastierës: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspektori: Ju lejon të inspektoni dhe/ose të ndryshoni kodin CSS dhe HTML në faqen aktive, si dhe në një pajisje portative nëpërmjet korrigjimit në distancë. Shkurtorja e tastierës: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Ueb Console: Ju lejon të ekzekutoni shprehje JavaScript brenda faqes aktive si dhe të rishikoni një grup të ndryshëm të dhënash të regjistruara 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)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Korrigjuesi JavaScript ju lejon të identifikoni dhe rregulloni defektet duke vendosur pika ndërprerjeje, 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 korrigjimin në distancë. Shkurtorja e tastierës: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Redaktori i stilit: Ju lejon të krijoni fletë stilesh të reja dhe t'i inkorporoni ato me faqen aktive të internetit, ose të modifikoni fletët ekzistuese dhe të provoni se si shfaqen ndryshimet tuaja në një shfletues me vetëm një klik. Shkurtorja e tastierës: Mac OS X, Windows (SHIFT+F7)
   • Performanca: Ofron një përmbledhje të detajuar të performancës së rrjetit të faqes aktive, të dhënat e shpejtësisë së kornizës, kohën dhe gjendjen e ekzekutimit të JavaScript, ndezjen e bojës dhe shumë më tepër. Shkurtorja e tastierës: Mac OS X, Windows (SHIFT+F5)
   • Rrjeti: Liston çdo kërkesë rrjeti të inicuar nga shfletuesi së bashku me metodën përkatëse, domenin e origjinës, llojin, madhësinë dhe kohën e kaluar. Shkurtorja e tastierës: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Inspektori i ruajtjes: Hidhini një sy cache-it dhe kukit që ruhen nga një faqe interneti. Shkurtorja e tastierës: (SHIFT+F9)
   • Shirti i veglave për zhvillues: Hap një interpretues interaktiv të linjës së komandës. Futni help në interpretues për një listë të të gjitha komandave të disponueshme dhe sintaksën e tyre të duhur. Shkurtorja e tastierës: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Ofron mundësinë për të krijuar dhe ekzekutuar aplikacione në ueb nëpërmjet një pajisjeje aktuale që funksionon Firefox OS ose nëpërmjet Simulatorit të Firefox OS. Shkurtorja e tastierës: Mac OS X, Windows (SHIFT+F8)
   • Konzola e shfletuesit: Ofron të njëjtin funksionalitet si paneli i uebit (shih më lart). Megjithatë, të gjitha të dhënat e kthyera janë për të gjithë aplikacionin Firefox (duke përfshirë shtesat dhe funksionet e nivelit të shfletuesit) në krahasim me vetëm faqen aktive të internetit. Shkurtorja e tastierës: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Pamje e dizajnit të përgjegjshëm: Ju lejon të shikoni në çast një faqe interneti në rezolucione, paraqitje dhe madhësi të ndryshme ekrani për të imituar pajisje të shumta, duke përfshirë tabletët dhe telefonat inteligjentë. Shkurtorja e tastierës: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Shfaq kodin gjashtëkëndor të ngjyrave për pikselët e zgjedhur individualisht.
   • Scratchpad: Scratchpad ju lejon të shkruani, modifikoni, integroni dhe ekzekutoni fragmente të kodit JavaScript nga një dritare që hapet Firefox-i. Hapni një dokument interaktiv JavaScript që ju lejon të shkruani në kod dhe ta provoni atë në një faqe interneti. Shkurtorja e tastierës: (SHIFT+F4)
   • Punonjësit e Shërbimit: Korrigjoni punonjësit e shërbimit aplikacionin tuaj të internetit. Merrni informacion të detajuar mbi performancën dhe gabimet e tyre.
   • Burimi i faqes: Mjeti origjinal i zhvilluesit i bazuar në shfletues, ky opsion thjesht shfaq kodin burimor të disponueshëm për faqen aktive. Shkurtorja e tastierës: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Merr Më shumë Mjete: Hap koleksionin Kutia e Veglave të Zhvilluesve të Uebit në faqen zyrtare të shtesave të Mozilla-s, që përmban rreth një duzinë shtesash të njohura si p.sh. si Firebug dhe Greasemonkey.

   

Microsoft Edge/Internet Explorer

Zakonisht i referuar si F12 Developer Tools, një homazh për shkurtoren e tastierës që ka nisur ndërfaqen që nga versionet e mëparshme të Internet Explorer, grupi i mjeteve të devijimit në IE11 dhe Microsoft Edge ka bërë një rrugë të gjatë që nga fillimi i tij duke ofruar një grup shumë të dobishëm monitorësh, korrigjuesish, emulatorësh dhe përpiluesish në lëvizje.

Microsoft nuk e mbështet më Internet Explorer dhe rekomandon që të përditësosh në shfletuesin më të ri Edge. Shkoni në faqen e tyre për të shkarkuar versionin më të ri.

1. Zgjidh Më shumë veprime, të përfaqësuar nga tre pika dhe të vendosura në këndin e sipërm djathtas të dritares së shfletuesit.

   

2. Kur të shfaqet menyja rënëse, zgjidhni opsionin e emërtuar Vegla Zhvilluesish.

   

3. Ndërfaqja e zhvillimit tani duhet të shfaqet, zakonisht në fund të dritares së shfletuesit. Mjetet e mëposhtme janë të disponueshme, secili i aksesueshëm duke klikuar në titullin e skedës përkatëse ose duke përdorur shkurtoren shoqëruese të tastierës.

   

   • DOM Explorer: Ju lejon të redaktoni fletët e stilit dhe HTML në faqen aktive, duke i dhënë rezultatet e modifikuara ndërsa shkoni. Përdor funksionalitetin IntelliSense për të plotësuar automatikisht kodin aty ku është e mundur. Shkurtorja e tastierës: (CTRL+1)
   • Konsola: Ofron mundësinë për të paraqitur informacione korrigjimi, duke përfshirë numëruesit, kohëmatësit, gjurmët dhe mesazhet e personalizuara nëpërmjet një API të integruar. Gjithashtu, ju lejon të injektoni kodin në një faqe interneti aktive dhe të modifikoni vlerat e caktuara për variabla individuale në kohë reale. Shkurtorja e tastierës: (CTRL+2)
   • Debugger: Ju lejon të vendosni pikat e ndërprerjes dhe të korrigjoni kodin tuaj ndërsa ai ekzekutohet, rresht pas rreshti nëse është e nevojshme. Shkurtorja e tastierës: (CTRL+3)
   • Rrjeti: Liston çdo kërkesë rrjeti të inicuar nga shfletuesi gjatë ngarkimit dhe ekzekutimit të faqes duke përfshirë detajet e protokollit, llojin e përmbajtjes, përdorimin e gjerësisë së brezit dhe shumë më tepër. Shkurtorja e tastierës: (CTRL+4)
   • Performanca: Detajon shpejtësinë e kuadrove, përdorimin e CPU-së dhe metrika të tjera të lidhura me performancën për t'ju ndihmuar të përshpejtoni kohën e ngarkimit të faqes dhe aktivitetet e tjera. Shkurtorja e tastierës: (CTRL+5)
   • Memory: Ju ndihmon të izoloni dhe korrigjoni rrjedhjet e mundshme të kujtesës në faqen aktuale të internetit duke shfaqur një afat kohor të përdorimit të memories së bashku me fotografi nga intervale të ndryshme kohore. Shkurtorja e tastierës: (CTRL+6)
   • Emulation: Ju tregon se si do të paraqitet faqja aktive në rezolucione dhe madhësi të ndryshme ekrani, duke emuluar smartfonët, tabletët dhe pajisjet e tjera. Ai gjithashtu ofron mundësinë për të modifikuar agjentin e përdoruesit dhe orientimin e faqes, si dhe të simulojë vendndodhje të ndryshme gjeografike duke futur një gjerësi dhe gjatësi. Shkurtorja e tastierës: (CTRL+7)

4. Për të shfaqur Konsolën ndërsa brenda ndonjë prej mjeteve të tjera, shtypni butonin katror me një kllapë të djathtë brenda saj, e vendosur në këndi i sipërm i djathtë i ndërfaqes së mjeteve të zhvillimit.

   

5. Për të zhbllokuar ndërfaqen e veglave të zhvilluesit në mënyrë që të bëhet një dritare e veçantë, zgjidhni dy drejtkëndëshat kaskadë ose përdorni shkurtoren e mëposhtme të tastierës: CTRL+P. Mund t'i vendosni veglat përsëri në vendndodhjen e tyre origjinale duke shtypur CTRL+P për herë të dytë.

   

Apple Safari (vetëm Mac)

Grupi i shumëllojshëm i veglave të zhvillimit të Safari pasqyron komunitetin e madh të zhvilluesve që përdor një Mac për nevojat e tyre të projektimit dhe programimit. Përveç një tastierë të fuqishme dhe veçorive tradicionale të regjistrimit dhe korrigjimit të gabimeve, ofrohet gjithashtu një modalitet i përgjegjshëm për t'u përdorur dhe një mjet për të krijuar shtesat tuaja të shfletuesit.

1. Zgjidhni Safari në menynë e shfletuesit, që ndodhet në krye të ekranit tuaj. Kur të shfaqet menyja rënëse, zgjidhni Preferences. Mund të përdorni gjithashtu shkurtoren e mëposhtme të tastierës në vend të këtij artikulli të menysë: COMMAND+COMMA(,)

   

2. Ndërfaqja

   Safari Preferences tani duhet të shfaqet, duke mbivendosur dritaren e shfletuesit tuaj. Zgjidhni ikonën Ikonën e avancuar, e vendosur në anën e djathtë të kokës.

   

3. Preferencat Avanced duhet të jenë tani të dukshme. Në fund të këtij ekrani është një opsion i etiketuar Trego menunë e zhvillimit në shiritin e menusë, i shoqëruar nga një kuti zgjedhjeje. Nëse nuk ka asnjë shenjë kontrolli të treguar në kuti, klikoni mbi të një herë për të vendosur një atje.

   

4. Mbyll ndërfaqen Preferences.

5. Tani duhet të vini re një opsion të ri në menynë e shfletuesit të quajtur Zhvilloni, i vendosur midis Faqeshënuesve dhe Dritarja. Klikoni në këtë artikull të menysë. Tani duhet të shfaqet një meny rënëse, që përmban opsionet e mëposhtme.

   • Hap faqen me: Ju lejon të hapni faqen aktive të internetit në një nga shfletuesit e tjerë të instaluar aktualisht në Mac tuaj.
   • Agjenti i përdoruesit: Ju lejon të zgjidhni nga mbi një duzinë vlerash të paracaktuara të agjentit të përdoruesit, duke përfshirë disa versione të Chrome, Firefox dhe Internet Explorer, si dhe të përcaktoni porosinë tuaj varg.
   • Hyni në modalitetin e projektimit të përgjegjshëm: Paraqitet faqen aktuale siç do të shfaqej në pajisje të ndryshme dhe me rezolucione të ndryshme të ekranit.
   • Shfaq Inspektorin e Uebit: Hap ndërfaqen kryesore për veglat e zhvillimit të Safari, zakonisht të vendosura në fund të ekranit të shfletuesit tuaj dhe që përmban seksionet e mëposhtme: Elementet, Rrjeti, Burimet, Afatet kohore, Korrigjues, Hapësirë ruajtëse, Konsolë.
   • Show Error Console: Nis gjithashtu ndërfaqen e veglave të devijimit, drejtpërdrejt në skedën të panelit e cila shfaq gabime, paralajmërime dhe të tjera të kërkueshme të dhënat e regjistrit.
   • Shfaq burimin e faqes: Hap skedën Burimet, e cila shfaq kodin burimor për faqen aktive të kategorizuar sipas dokumentit.
   • Shfaq burimet e faqes: Kryen të njëjtin funksion si opsioni Shfaq burimin e faqes.
   • Shfaq redaktuesin e fragmenteve: Hap një dritare të re ku mund të futësh kodin CSS dhe HTML, duke parë paraprakisht daljen e tij menjëherë.
   • Show Extension Builder: Ofron mundësinë për të krijuar ose modifikuar shtesat Safari me CSS, HTML dhe JavaScript.
   • Shfaq regjistrimin e linjës kohore: Hap skedën "Linjat kohore" dhe fillon të shfaqë kërkesat e rrjetit, paraqitjen dhe paraqitjen e informacionit, si dhe ekzekutimin e JavaScript në kohë reale.
   • Memorie të zbrazët: Fshin të gjithë cache-në që po ruhet aktualisht në hard diskun tuaj.
   • Çaktivizo cache: Ndalon Safari nga cachimi në mënyrë që e gjithë përmbajtja të merret nga serveri pas çdo ngarkimi të faqes.
   • Çaktivizo imazhet: Parandalon paraqitjen e imazheve në të gjitha faqet e internetit.
   • Çaktivizo stilet: Injoron vetitë CSS kur ngarkohet një faqe.
   • Disable JavaScript: Kufizon ekzekutimin e JavaScript në të gjitha faqet.
   • Çaktivizo shtesat: Ndalon të gjitha shtesat e instaluara të ekzekutohen brenda shfletuesit.
   • Çaktivizo hakimet specifike të sajtit: Nëse Safari është modifikuar për të trajtuar në mënyrë eksplicite çështjet specifike për faqen aktive të internetit, ky opsion do t'i bllokojë ato ndryshime në mënyrë që faqja ngarkon siç do të kishte përpara se të futeshin këto modifikime.
   • Çaktivizo kufizimet lokale të skedarëve: Lejon shfletuesin të ketë akses te skedarët në disqet tuaja lokale, një veprim që është i kufizuar si parazgjedhje për arsye sigurie.
   • Çaktivizo kufizimet e origjinës së kryqëzuar: Këto kufizime janë vendosur si parazgjedhje për të parandaluar XSS dhe rreziqe të tjera të mundshme. Megjithatë, ato shpesh duhet të çaktivizohen përkohësisht për qëllime zhvillimi.
   • Lejo JavaScript nga Fusha e Kërkimit inteligjent: Kur aktivizohet, ai ofron mundësinë për të futur URL me javascript: të inkorporuara drejtpërdrejt në shiritin e adresave.
   • Trajtoni certifikatat SHA-1 si të pasigurta: Certifikatat SSL që përdorin algoritmin SHA-1 konsiderohen gjerësisht si të vjetruara dhe të cenueshme.