Efektyvus „Safari“ kūrėjo įrankių naudojimas: išsami instrukcija

Šiame vadove norėčiau išsamiai papasakoti, kaip naudotis "Safari" kūrėjų įrankiais. Nors "Safari" programuotojo įrankiai šiek tiek skiriasi nuo "Chrome" ir "Firefox" įrankių, pagrindinis principas išlieka tas pats. Sužinosite, kaip įjungti kūrėjo įrankius, naudotis įvairiomis sritimis ir funkcijomis bei įgyvendinti esminius derinimo procesus. Pradėkime nuo svarbiausių įžvalgų.

Svarbiausios išvados

• Kūrėjo įrankiai "Safari" nėra taip lengvai pasiekiami kaip kitose naršyklėse, nes juos reikia aktyvuoti per nustatymus.
• Programuotojo įrankių naudotojo sąsaja ir funkcijos yra panašios iš kitų naršyklių, tačiau skiriasi konkretus jų įgyvendinimas.
• Derinti "iOS" įrenginiuose "Safari" galima prijungus įrenginį per USB jungtį.

Žingsnis po žingsnio instrukcijos

1. Suaktyvinkite "Safari" programuotojo įrankius

Norėdami "Safari" aktyvuoti programuotojo įrankius, turite pakoreguoti "Safari" nustatymus. Paleiskite "Safari" ir eikite į meniu juostą. Pasirinkite "Safari" ir tada "Nustatymai".

Pereikite prie skirtuko "Advanced", esančio visiškai dešinėje. Ten rasite parinktį "Show development features for web developers" ("Rodyti kūrimo funkcijas žiniatinklio kūrėjams"). Suaktyvinkite šią parinktį, kad įjungtumėte programuotojo įrankius.

2. Prieiga prie kūrėjų įrankių

Kai tik įjungiami programuotojo įrankiai, juos galite atidaryti per meniu juostos meniu "Developer Tools" (kurti) arba naudodami tam tikras klavišų kombinacijas. Tiesioginė prieiga per klavišus F12 arba Alt-Cmd-I neveikia, tačiau galite, pavyzdžiui, dešiniuoju pelės klavišu spustelėti elementą ir pasirinkti "Examine element" (išnagrinėti elementą).

Taip pat galite naudoti klavišų kombinaciją Cmd+Option+C, kad atidarytumėte konsolę ir persijungtumėte iš vieno rodinio į kitą.

3. Naršymas per programuotojo įrankius

Nors "Developer Tools" naudotojo sąsaja atrodo panaši į tą, prie kurios esate pripratę iš kitų naršyklių, jos turi tam tikrų ypatingų skirtumų. Kairėje šoninėje juostoje galite perjungti skirtukus "Elementai", "Konsolė", "Šaltiniai", "Tinklas" ir kitus.

Čia galite daugiau sužinoti apie svetainės elementus, peržiūrėti ir redaguoti jų stilius ir išdėstymą. Kiekvieną stilių galite redaguoti tiesiog spustelėję atitinkamas CSS taisykles.

4. Darbas su konsole

Naudodami "Safari" konsolę galite vykdyti "JavaScript" kodą ir rodyti norimus rezultatus. Įdomus aspektas yra tai, kad čia skiriasi išėjimų formatavimas. Pirmasis argumentas išvedamas kaip tekstas, o visi tolesni argumentai rodomi kaip "JavaScript" objektai.

Jei išvedate papildomus žurnalo pranešimus, įsitikinkite, kad rodomi ne tarpai tarp atskirų argumentų, o jie atskiriami brūkšneliais. Tai gali būti svarbu norint išvengti nesusipratimų derinant.

5. Nustatykite išeities kodą ir pertraukos taškus

Skirtuke "Sources" (šaltiniai) galite peržiūrėti savo svetainės originalius failus ir perkeltus failus. Čia taip pat galima nustatyti nutraukimo taškus, kad būtų lengviau derinti. Norėdami tai padaryti, tiesiog spustelėkite atitinkamą kodo eilutę.

Nepamirškite naudotis įvairiais valdikliais, kad būtų lengviau pereiti per kodą. "Safari" naršyklėje žingsniavimo spartusis klavišas yra kitoks; vietoj jo naudokite specialias piktogramas.

6. atlikite tinklo analizę

Skirtuke "Tinklas" rasite išsamią informaciją apie visas užklausas, kurias jūsų puslapis atlieka krovimo metu. Čia galite matyti siunčiamas ir gaunamas užklausas, taip pat jų antraštes ir peržiūras.

Įdomi funkcija čia yra antraštės ir laikmačio atskyrimas, kuris leidžia geriau suprasti savo svetainės našumą.

7. Naudokite našumo matavimus ir laiko juostas

Skirtuke "Timelines" galite atlikti išsamią našumo analizę ir daryti įrašus, kad geriau suprastumėte savo svetainės greitį ir procesus.

Ši funkcija veikia panašiai kaip kitų naršyklių našumo profiliai, tačiau gali tekti priprasti prie kai kurių rodymo ir pavadinimų skirtumų.

8 Derinimas mobiliuosiuose įrenginiuose

Ypatingas "Safari Developer Tools" akcentas - galimybė derinti svetaines "iPhone" arba "iPad". Prijunkite prietaisą per USB ir prietaiso nustatymuose įjunkite atitinkamas derinimo parinktis.

Tada eikite į meniu "Develop" ir pasirinkite prijungtą įrenginį, kad gautumėte prieigą prie atidarytų langų ir jų "Developer Tools".

Santrauka

Šiame išsamiame vadove sužinojote, kaip suaktyvinti "Safari Developer Tools", naudotis įvairiomis funkcijomis ir skirtukais bei atlikti derinimą mobiliuosiuose įrenginiuose. Dauguma funkcijų panašios į kitų naršyklių įrankius, tačiau yra specifinių skirtumų, ypač naudotojo sąsajoje ir sparčiuosiuose klavišuose. Kai su jais susipažinsite, "Safari" derinimas bus lengvas.