Nga Safari në iOS 6 dhe më lart versionet e mëvonshme Mund të korrigjoni përmbajtjen e uebit celular nga Mac-i juaj. Ju mund të shikoni Gabimet në JavaScript, redakto atributet HTML, ndryshim Karakteristikat e CSS, ashtu si kur zhvillohet për Safari në OS X. Ky seksion përshkruan se si të përdoret Web Inspector për të korrigjuar përmbajtjen e uebit në iOS.
Ju duhet të testoni përmbajtjen tuaj të internetit në të dy sistemet desktop dhe pajisje të ndryshme iOS. Nëse nuk keni pajisje iOS për testim, mund të përdorni iOS Simulator nga iOS SDK. Meqenëse ka një ndryshim midis faqeve të internetit në iOS dhe OS X, duhet të testoni në mënyrë specifike përmbajtjen tuaj në iPhone dhe iPad ose të imitoni pajisje harduerike në simulator. Kur testoni në Safari në çdo platformë, mund të përdorni Web Inspector për të korrigjuar përmbajtjen e uebit.
Aktivizo Web Inspector në iOS
Inspektori i uebit përmban informacione të vlefshme për atë që mund të shkojë keq në përmbajtjen tuaj të internetit. Edhe pse Web Inspector është i disponueshëm përmes Safari në OS X, mund ta përdorni për të inspektuar përmbajtjen që ngarkohet në Safari ose në çdo UIWebView në iOS.
Aktivizimi i inspektorit të uebit në iOS
- Hapni Cilësimet
- Zgjidhni Safari
- Në fund, zgjidhni Shtesat
- Aktivizo Web Inspector
Inspektoni nga Mac-i juaj
Kur është aktivizuar Web Inspector në iOS, lidhni pajisjen tuaj me Mac-in tuaj duke përdorur kabllo USB. Një artikull i menysë shfaqet në meny Zhvillimi i Safarit në OS X, siç tregohet në imazhin më poshtë. Nëse emri i pajisjes nuk shfaqet menjëherë në menynë "Zhvilloni", provoni të rinisni Safari dhe/ose të rilidhni kabllon.
Emri i artikullit të menysë do të jetë ose emri i secilës pajisje të lidhur dhe/ose emri i simulatorit. Nënmenyja me faqe të disponueshme në iOS Safari. Aplikacioni duhet të funksionojë plan të parë për t'u shfaqur në menynë Zhvillimi. Zgjidhni faqen që ju intereson dhe Web Inspector do të hapet në një dritare të re.
Të gjitha veçoritë e Web Inspector në OS X, si p.sh. koha Kërkesat HTTP, profilizimi JavaScript ose manipulimi i pemës DOM janë gjithashtu të disponueshme në iOS. Dallimi i vetëm është se duke zgjedhur faqen tuaj të internetit përmes menysë "Zhvilloni", ju po testoni në mënyrë aktive përmbajtjen e uebit në pajisjen tuaj dhe jo në Mac tuaj. Nëse lundroni në një URL tjetër në pajisjen tuaj me inspektorin e dritares ende të hapur, do të vini re se të dhënat e inspektuara do të rifreskohen për të pasqyruar faqen në të cilën keni lundruar.
NË Shfletuesi Safari Përfshihen disa mjete zhvilluesish për të thjeshtuar krijimin dhe korrigjimin e faqes. Për shembull, përmes Safari mund të shikoni se si do të duket një sajt në një iPhone dhe iPad. Për ta bërë këtë, ju vetëm duhet të specifikoni agjentin e duhur të përdoruesit përmes menysë Development (Fig. 7.51).
Oriz. 7.51. Zgjedhja e një agjenti përdoruesi
Safari ka gjithashtu një mjet të shkëlqyer për korrigjimin e kodit HTML dhe CSS të quajtur Web Inspector. Për ta thirrur, zgjidhni menunë Zhvillimi > Shfaq Inspektorin e Uebit ose përdorni kombinimin e tastit Ctrl + Alt + I. Nëse nuk e keni këtë artikull të menysë, shkoni te cilësimet e shfletuesit tuaj, zgjidhni panelin e Shtesave dhe kontrolloni kutinë e zgjedhjes "Trego menunë e zhvillimit në shiritin e menusë".
Inspektori i Uebit shfaq një listë të burimeve që gjenden në një faqe interneti - dokumente, fletë stilesh, imazhe dhe skripta. Ju lejon të shihni dhe gjeni kodin e faqes së internetit dhe vetitë e stilit të elementeve. Ndërfaqja e inspektorit të internetit është paraqitur në Fig. 7.52. Nga gjithë pasuria e aftësive të programit të paraqitjes, ne jemi të interesuar vetëm për menynë Elemente.
Oriz. 7.52. Inspektori i internetit
Inspektori i uebit ngjan me Firebug në ndërfaqen e tij - paneli i majtë tregon kodin HTML dokument aktual, V paneli i djathtë- stili i elementit të zgjedhur. Çdo element në faqe mund të zgjidhet jo vetëm përmes kodit, por edhe me ndihmën e një mjeti ju lejon të zgjidhni një element thjesht duke klikuar mbi të.
Grupi i stileve në inspektor paraqitet si një listë rënëse, kjo ju lejon të përfshini në mënyrë kompakte vëllim i madh informacion. Artikulli i parë, "Stili i llogaritur" (Figura 7.53), përmban stilin e elementit që cakton shfletuesi bazuar në stilin e vet, kontabiliteti për trashëgiminë dhe pronat e shtuara.
Oriz. 7.53. Stili i llogaritur
Këto stile janë vetëm për qëllime informative; ju nuk mund të ndryshoni asgjë në këtë pikë. Një ngjyrë, nëse është e pranishme, mund të klikohet dhe të ndryshohet formati i saj i prezantimit në heksadecimal, RGB ose HSL.
Artikulli tjetër, "Atributi i stilit", tregon stilin e integruar, domethënë atë që specifikohet përmes atributit të stilit. Artikulli do të jetë bosh nëse nuk ka një stil të tillë.
Grupi themelor i artikujve tregon stilin e elementit aktual dhe elementët e ndërlidhur me të (Fig. 7.54).
Oriz. 7.54. Stili i elementit
Çdo pronë në këtë listë mund të modifikohet duke klikuar mbi të. Vetitë universale si mbushja ose diferenca shfaqen në formën e një liste rënëse që liston vetitë individuale, si p.sh. padding-left , padding-top, etj. Pranë çdo vetie ka një kuti zgjedhjeje që ju lejon të çaktivizoni shpejt pronën. Mund të shtoni një rregull të ri duke përdorur menynë e fshehur pas ingranazhit në të djathtë këndi i sipërm panele (Fig. 7.55).
Oriz. 7.55. Menuja për shtimin e rregullave të reja
Artikulli "Dimensionet" demonstron model blloku element - gjerësia dhe lartësia e elementeve, si dhe vlerat e indenteve, kufijve, kufijve dhe pozicionimit (Fig. 7.56).
Oriz. 7.56. Dimensionet e elementit
Vetëm mbani në mend se këtu ato quhen indents vetitë e mbushjes, dhe sipas fushave margjinale, d.m.th. përkundrazi, dhe jo në kuptimin e zakonshëm.
Ky artikull mund të përdoret jo vetëm për të përcaktuar vlerat e kërkuara, por edhe për t'i vendosur ato. Thjesht klikoni dy herë vlerën e dëshiruar dhe shkruani numrin. Nuk ka nevojë të specifikohen njësitë e matjes; pikselët përdoren si parazgjedhje.
E di se në shfletues standard Safari i pranishëm menyja e fshehur « Zhvillimi" Në këtë material do të flasim për aftësitë e këtij seksioni.
Në kontakt me
Cila është menyja e Zhvillimit në Safari në Mac?
Para së gjithash, kjo meny do të jetë e dobishme për zhvilluesit e uebit që kanë nevojë për qasje në kod, opsione të ndryshme për shfaqjen e faqeve, çaktivizimin e përmbajtjes, etj. Ekzistojnë gjithashtu disa veçori të dobishme për përdoruesit e zakonshëm.
Nga kjo meny mund të nisni shpejt Faqja aktuale në çdo shfletues tjetër të instaluar në Mac. Shumë i përshtatshëm nëse Safari nuk mund të luajë ndonjë përmbajtje multimediale. Për shembull, nëse doni të shikoni një video VR (për syze realitet virtual), atëherë Google Chrome është shumë më i përshtatshëm për këtë qëllim.
Jo më pak funksion interesant do të bëhet modaliteti i shfaqjes kodi i programit faqet. Pse mund të jetë e nevojshme kjo? Ka një skedë " Burimet“, falë të cilit nuk do të jetë e vështirë të shkarkosh një imazh që nuk u përgjigjet klikimeve çelësi i djathtë minjtë.
Funksioni i pastrimit ose çaktivizimit të cache-it është gjithashtu i dobishëm. Dhe ndonjëherë ekziston nevoja për të fikur shfaqjen e imazheve ose skripteve.
Dizajnerët e uebit do të kuptojnë vetë mjetet e menusë " Zhvillimi", por unë do të doja të shënoja veçmas mundësinë e nisjes së modalitetit Dizajn të përgjegjshëm. Shfaq cilësinë e optimizimit të faqes në internet në varësi të pajisjes në të cilën do të funksionojë dhe me çfarë rezolucioni.
Si të aktivizoni menunë "Zhvilloni" në Safari në Mac?
1 . Nis Safari. Zgjidhni një seksion nga shiriti i menusë Safari → Preferencat ose shtypni shkurtoren e tastierës Komanda (⌘) + , (presje).
2 . Shkoni në " Shtesa».
3 . Në fund, kontrolloni kutinë pranë " Shfaq menunë e Zhvilluesit në shiritin e menusë».
Të gjitha! Pas këtyre hapave, do të shfaqet shiriti i menusë seksion i ri « Zhvillimi».
U tregua se si të zgjerohej Karakteristikat e Safarit duke përdorur shtojca dhe shërbime të palëve të treta. Megjithatë, opsionet tuaja nuk mbarojnë këtu. Mund të përdorni opsionet e Safari që zakonisht rezervohen për zhvilluesit. Për ta bërë këtë, thjesht nisni programin Terminal, hyni nga linja e komandës vetëm një komandë, pas së cilës do të keni akses në një botë të tërë me mundësi të reja - të pabesueshme dhe të paçmueshme.
Kryerja e konfigurimit Produktet e Apple sipas nevojave personale, mund të vëreni se shumë nga recetat e sugjeruara kanë dhe ana e kundërt, pra shpenzimet. Për shembull, mund ta ndezësh telefonin, por më pas të gjesh përditësimet e mëvonshme software nuk punon. Ju mund të mbani tuajat dosje në shtëpi në iPod-in tuaj, por do t'ju duhet të lidhni iPod-in tuaj sa herë që duhet të përdorni kompjuterin tuaj. Janë vetëm dy shembuj specifikë, Por rregull i përgjithshëm duket diçka si kjo: se më shumë punë kërkon ndonjë modifikim, aq më i lartë është kthimi. Le ta ilustrojmë këtë me një shembull tjetër: duke përdorur Terminalin mund të krijoni mrekulli të vërteta, por për ta bërë këtë do t'ju duhet të mësoni një numër mbresëlënës komandash dhe opsionet e tyre.
Ndoshta i vetmi përjashtim nga ky rregull është menyja Debug në shfletuesin Safari. Aktivizimi i menusë Debug në Safari është jashtëzakonisht i thjeshtë, përfitimet nga kjo janë të panumërta dhe nuk vërehen efekte anësore negative. Kjo do të thotë, nga këndvështrimi i një hakeri, kjo recetë ofron vetëm përfitime. Duke pasur parasysh thjeshtësinë e tij, le ta zbatojmë atë në praktikë. Siç u përmend më herët, për ta bërë këtë, thjesht hapni aplikacionin Terminal dhe futni komandën e mëposhtme nga rreshti i komandës:
1defaults shkruani com.apple.Safari IncludeDebugMenu 1Në aplikacionin Terminal, asgjë nuk do të ndodhë pas ekzekutimit të kësaj komande. Nëse në të njëjtën kohë u hap shfletuesi juaj Safari, atëherë, në shikim të parë, mund t'ju duket se komanda nuk kishte asnjë efekt. Megjithatë, nuk është kështu. Për të parë ndryshimet e bëra si rezultat i ekzekutimit të komandës, mbyllni Safari dhe më pas rinisni përsëri - dhe do të shihni që shiriti i menusë ka ekip i ri- Debug (Fig. 2.14).
Pasi të aktivizoni menynë Debug, do të zbuloni se kjo meny hapet shumë më parë opsionet e padisponueshme Safari. Shumica e opsioneve janë me interes vetëm për zhvilluesit. Megjithatë, disa prej tyre mund t'ju japin vërtet kënaqësi. Për shembull, do të dëshironit të dini se sa burime harxhon shfletimi në ueb duke përdorur Safari? Mënyra më e lehtë për t'iu përgjigjur kësaj pyetjeje është të përdorni opsionin Start Stress Test nga menyja Debug. Pasi të zgjidhni këtë komandë, Safari do të shkojë në http://del.icio.us dhe do të fillojë të ngarkojë faqe për faqe duke gjurmuar sasinë e punës së bërë (Figura 2.15).
Kjo ju lejon të bëni më shumë sesa thjesht të vlerësoni sasinë e trafikut Safari. Për ata përdorues që janë shumë dembelë për të kërkuar vetë faqe interneti interesante, testi i stresit i Safari do të gjejë gjithmonë disa faqe që mund të jenë me interes. Për të përfunduar testin e stresit, zgjeroni përsëri menunë Debug dhe zgjidhni komandën Stop Stress Test prej saj. Jo aq interesante, por jo më pak e dobishme në krahasim me testin e stresit Safari, është aftësia për të zgjedhur një agjent përdoruesi përmes menysë Debug. Kjo do t'ju lejojë të përdorni Safari, duke ia kaluar atë serverëve si një shfletues tjetër. Në pamje të parë, kjo veçori duket të jetë një veçori problematike e dobisë së dyshimtë. Pse të shqetësoheni të prezantoni veten në serverë si një shfletues tjetër?
Në fund të fundit, ju jeni krenarë që jeni... përdorues Mac! Por nuk duhet të nxitojmë në përfundime. Herët a vonë do të hasni në një faqe që kërkon që të gjithë vizitorët ta përdorin Internet Explorer. Nëse i tregoni hapur një serveri të tillë që përdorni Safari, mund ta konsideroni veten të pafat - ata do të refuzojnë t'ju shërbejnë. Nëse Safari imiton Windows MSIE 6.0, atëherë do t'ju lejohet të regjistroheni dhe të merrni shërbimin e dëshiruar, pasi faqja që ofron shërbimin do të mashtrohet dhe "beson" se ju jeni një nga Klientët e Windows(Fig. 2.16).
Vërtetë, kjo nuk do të thotë domosdoshmërisht që faqja do të fillojë mrekullisht të funksionojë siç duhet me Safari. Nëse një sajt përdor ActiveX, atëherë Safari nuk do të jetë në gjendje të punojë me atë faqe, pavarësisht se sa mirë aplikacioni maskon informacionin e tij të identitetit. Megjithatë, ka shumë sajte që mbështesin vetëm Internet Explorer (IE) për shkak të dembelizmit ose pakujdesisë së zhvilluesve të kodit. Theksojmë se kjo nuk ndodh sepse Safari nuk mund të vizualizojë siç duhet informacionin dhe të ndërveprojë me serverët, por sepse Webmaster shkoi vetë mënyra e lehtë dhe vendosi që do të ishte më e lehtë për të të mbështeste vetëm Internet Explorer. Në raste të tilla, zëvendësimi i agjentit të përdoruesit përmes menysë Debug do t'ju ndihmojë, gjë që do t'ju lejojë të hyni në faqet që më parë ishin të paarritshme për ju.
Ka shumë më tepër që mund të bëni me një agjent përdoruesi. Për shembull, nëse doni të arrini më shumë Vështrim i shpejtë, ju mund t'u tregoni serverëve se po përdorni Mobile Safari 1.0 - duke imituar kështu përdorues i iPhone. Disa faqe janë të aksesueshme vetëm për Përdoruesit e celularëve Safari (një shembull klasik është http://reader.mac.com/), dhe shumë sajte të tjera lëvizin automatikisht përdoruesit e Mobile Safari në faqet me gjerësi bande më të ulët. Për shembull, Amazon ridrejton përdoruesit e Mobile Safari në një faqe më pak intensive të brezit dhe me pamje më të thjeshtë (Figura 2.17).
Nëse asnjë truk i agjentëve të përdoruesve nuk ju ndihmon të arrini rezultatin e dëshiruar, atëherë menyja "Debug" do t'ju shpëtojë të paktën nga nevoja për të kërkuar një shfletues të përshtatshëm në dosjen "Aplikacione". Nëse e gjeni veten në një faqe problematike që nuk mund të hapet duke përdorur Safari, zgjidhni nga menyja Komandat e korrigjimit→ Hapni faqen me… dhe më pas zgjidhni nga lista shfletues i përshtatshëm(Fig. 2.18).
Megjithatë, aftësitë e ofruara nga menyja Debug nuk përfundojnë me truket e agjentëve të përdoruesit. Kur aktivizoni menunë Debug, do të keni në dispozicionin tuaj një mjet jashtëzakonisht të gjithanshëm dhe shumëdisiplinor për inspektimin e faqes në internet. Me të, ju mund të eksploroni çdo element të faqes që ju intereson, dhe shfaqja e kodit do të pasqyrojë plotësisht nivelin e foleve dhe gjithashtu do të përdorë theksimin me ngjyra të elementeve sintaksore për lehtësi shtesë. Për të hapur Web Inspector për të gjithë faqen, do t'ju duhet të shkoni në shiritin e menysë (Debug → Show Web Inspector), por nëse nuk jeni të interesuar për të gjithë faqen, por vetëm disa nga elementët e saj, atëherë thjesht rri pezull mbi elementi i kërkuar, kliko klikoni me të djathtën miun dhe zgjidhni nga menyja e kontekstit Inspektoni komandën e elementit. Do të shihni saktësisht pjesën e faqes që ju është dashur të ekzaminoni (Fig. 2.19).
Së fundi, menyja Debug ofron shumë opsione të tjera. Për shembull, mund të çaktivizoni mbështetjen RSS nëse përdorni një lexues të furnizimit RSS Aplikimi me postë ose një mjet i pavarur lexues RSS, të tilla si NetNewsWire. Përveç kësaj, duke përdorur menunë Debug ju mund të arrini interesa efektet vizuale- për shembull, bëjeni dritaren Safari transparente (Fig. 2.20).
Ka shumë opsione më interesante, të cilat, megjithatë, do të jenë me interes më të madh për zhvilluesit - për shembull, rrjedhjet e kujtesës (rrjedhjet e botës), profilizimi, etj. Megjithatë, një nga më opsione të dobishme të cilat mund të gjenden në menynë Debug janë listë e madhe Shkurtoret e tastierës Safari. Këto shkurtore të tastierës janë të listuara në një skedar që pak përdorues e dinë. Për më tepër, nëse përdoren si duhet, shkurtoret e tastierës mund t'ju kursejnë shumë kohë kur punoni intensivisht me shfletuesin (Fig. 2.21).
Nëse nuk keni ndërmend të aktivizoni menynë e korrigjimit, por ende dëshironi qasje në të gjitha ato shkurtore të dobishme të tastierës, futni rrugën e mëposhtme të skedarit në shiritin e adresave të shfletuesit tuaj: file:///Applications/Safari.app/Contents/Resources/ Shortcuts .html dhe shënojeni atë. Skedari me shkurtore të tastierës është skedar lokal, i ruajtur në paketën Safari, por është shumë më e lehtë për t'u aksesuar përmes shfletuesit sesa të shpenzoni kohë duke klikuar nëpër dosje dhe paketa për të gjetur informacionin që ju nevojitet.
Pasi të keni aktivizuar menunë Debug në Safari, do të ishte logjike të pyesni nëse kjo mundësi e fshehur dhe në të tjerat Aplikacionet e Apple. Pajtohem, do të ishte mirë nëse do të mund të trajtonit çdo aplikacion ashtu siç bëjnë zhvilluesit. Fatkeqësisht, jo të gjitha aplikacionet kanë një menu të fshehtë të korrigjimit, megjithëse disa e kanë. Për shembull, provoni diçka të ngjashme me këtë recetë në iCal dhe do të gjeni gjithashtu një menu Debug, ndonëse më pak e pasur me veçori sesa ajo e Safari. Së fundi, si përfundim, nëse dëshironi të fshihni përsëri menunë Debug, gjithçka që duhet të bëni është të hapni aplikacionin Terminal dhe të lëshoni komandën e mëposhtme:
1 parazgjedhjet shkruani com.apple.Safari IncludeDebugMenu 0
