Šajā norādījumā es vēlos sniegt padziļinātu ieskatu par Safari Developer Tools izmantošanu. Lai gan attīstītāja rīki Safari pārlūkā atšķiras no tādiem Chrome un Firefox, pamatprincips paliek nemainīgs. Tu apgūsi, kā aktivizēt attīstītāja rīkus, izmantot dažādas sadaļas un funkcijas, kā arī veikt būtiskus debugging procesus. Sāksim ar galvenajiem secinājumiem.
Svarīgākie secinājumi
- Safari attīstītāja rīki nav tik viegli pieejami kā citos pārlūkos, jo tos ir jāaktivizē iestatījumos.
- Attīstītāja rīku saskarne un funkcijas atbilst citu pārlūku risinājumiem, bet konkrētās implementācijas var atšķirties.
- Ar Safari ir iespējams veikt debugging darbības iOS ierīcēs, savienojot ierīci ar USB kabeli.
Solis pa solim norādījumi
1. Attīstītāja rīku aktivizēšana Safari
Lai aktivizētu attīstītāja rīkus Safari pārlūkprogrammā, ir nepieciešams pielāgot Safari iestatījumus. Ieslēdz Safari un dodies uz izvēlnes joslu. Tur izvēlies “Safari” un pēc tam “Preferences”.
Pārejiet uz cilni “Advanced” vispa labajā pusē. Tur atradīsi opciju “Show Develop menu in menu bar”. Aktivizē šo opciju, lai aktivizētu attīstītāja rīkus.
2. Piekļuve attīstītāja rīkiem
Kad attīstītāja rīki ir aktivizēti, tos vari atvērt, izmantojot izvēlni “Develop” izvēlnes joslā vai arī ar konkrētām taustiņu kombinācijām. Tieša piekļuve ar taustiņiem F12 vai Alt-Cmd-I nedarbojas, bet piemēram, varēsi veikt attiecīgā elementa izvēles darbību, noklikšķinot ar labo peles taustiņu un izvēloties “Inspect Element”.
Vari izmantot arī taustiņu kombināciju Cmd+Option+C, lai atvērtu konsoli un pārslēgtos starp dažādām skatījumu veidiem.
3. Navigācija caur attīstītāja rīkiem
Attīstītāja rīku saskarne izskatās līdzīgi kā citos pārlūkos, taču tajā satiekami daži īpaši novirzes. Kreisajā sānujoslā vari pārslēgties starp cilnēm “Elements”, “Console”, “Sources”, “Network” un citām.
Šeit varēsi uzzināt vairāk par tīmekļa lapas elementiem, lai redzētu un rediģētu to stilus un iekārtojumus. Tu vari labot jebkuru stilu, noklikšķinot uz attiecīgajām CSS noteikumiem.
4. Darbs ar konsoli
Konsolē Safari varēsi izpildīt JavaScript kodu un apskatīt vēlamos rezultātus. Iespējams, interesants aspekts ir tas, ka šeit izvades formatējums atšķiras. Pirmajā argumentā izvade notiek kā teksts, kamēr visi pēc tam sekojošie argumenti tiek attēloti kā JavaScript objekti.
Izvadē tinot papildu žurnālus, pārliecinies, ka parādība starp atsevišķiem argumentiem nav tukša vietu, bet tiek atdalīta ar svītriem. Tas varētu būt svarīgi, lai izvairītos no neskaidrībām debugging laikā.
5. Koda avotu un pārtraukumu noteikšana
Cilnē “Sources” vari apskatīt tīmekļa lapas oriģinālās un pārtvertās failus. Šeit ir iespējams arī noteikt pārtraukumus, lai atvieglotu debugging. Vienkārši noklikšķini uz attiecīgā koda rindiņas.
Neaizmirsti izmantot dažādus vadības elementus, lai atvieglotu kodola kodsikšanu. Safari šim nolūkam izmanto citu pārejas īsceļu; tā vietā izmanto specifiskus simbolus.
6. Veicot tīkla analīzes
Cilnē “Network” vari iegūt plašu informāciju par visām pieprasījumiem, ko tava tīmekļa lapa veic, ielādējoties. Šeit vari redzēt, kādi pieprasījumi tiek veikti un saņemti, kā arī to galvenes un priekšskati.
Viena interesanta funkcija šeit ir atšķirība starp galotnēm un laika izmēriem, kas sniedz padziļinātu ieskatu tava lapas veiktspējā.
7. Veiktspējas mērījumu un laika joslas izmantošana
Cilnes "Laika joslas" sadaļā tu vari veikt plašas veiktspējas analīzes un veikt ierakstus, lai labāk izprastu ātrumu un darbības tavā lapā.
Šī funkcija strādā līdzīgi kā veiktspējas profili citos pārlūkos, taču var rasties nepieciešamība pierast pie dažādības attēlojumā un nosaukumos.
8. Kļūdu labošana mobilajos ierīcēs
Īpaši izcilā funkcija Safari Developer Tools ir iespēja labot tīmekļa lapas savā iPhone vai iPad. Savieno savu ierīci ar USB un aktīvē atbilstošās kļūdu labošanas opcijas ierīces iestatījumos.
Pēc tam pārejiet uz izvēlni "Attīstība" un izvēlieties savienoto ierīci, lai piekļūtu atvērtajiem logiem un to attīstības rīkiem.
Kopsavilkums
Šajā detalizētajā pamācībā tu esi iemācījies, kā aktivizēt Safari Developer Tools, izmantot dažādas funkcijas un cilnes, kā arī veikt kļūdu labošanu mobilajās ierīcēs. Lielāka daļa funkciju ir līdzīgas citos pārlūkos, taču pastāv īpašas atšķirības, it īpaši interfeisā un saīsinājumos. Kad izpratīsi to, kļūdu labošana Safari būs viegli pārvaldāma.
Bieži uzdotie jautājumi
Kā aktivizēt izstrādātāja rīkus Safari pārlūkprogrammā?Dodieties uz Safari iestatījumiem, sadaļā "Papildus" aktivizējiet opciju "Parādīt tīmekļa izstrādātāju attīstības funkcijas".
Kā atvērt konsoles logu pārlūkprogrammā Safari?Tu vari atvērt konsoles logu, nospiežot kombināciju Cmd+Option+C vai noklikšķinot uz "Pārbaudīt vienumu" kontekstizvēlnē.
Kādas atšķirības ir starp Safari konsoles rīkiem salīdzinājumā ar citām pārlūkprogrammām?Safarī pirmais arguments tiek izvadīts kā teksts, bet pārējie kā JavaScript objekti, un starp izvadītajiem nav izmantots atstarpe.
Vai es varu veikt kļūdu labošanu savā iPhone ar Safari palīdzību?Jā, pieslēdzot savu iPhone caur USB un aktivizējot kļūdu labošanas opcijas, tu vari labot tīmekļa lapas savā iPhone.
Vai Safari ir līdzīgas veiktspējas analīzes iespējas kā Chrome pārlūkprogrammā?Jā, laika joslas funkcija Safari piedāvā līdzīgas veiktspējas analīzes iespējas, taču attēlojums var būt atšķirīgs.
