01 ng 06
Isaaktibo at Gamitin ang Nakikiramay na Mode ng Disenyo sa Safari 9
Ang pagiging isang nag-develop ng Web sa mundo ngayon ay nangangahulugan ng pagsuporta sa isang bevy ng mga device at mga platform, na kung minsan ay maaaring maging isang nakakatakot na gawain. Kahit na ang pinaka-mahusay na dinisenyo code adhering sa pinakabagong mga pamantayan sa Web, maaari mo pa ring makita na ang mga bahagi ng iyong website ay maaaring hindi tumingin o kumilos ang paraan na gusto mo ang mga ito sa ilang mga device o resolution. Kapag nahaharap sa hamon ng pagsuporta sa ganitong malawak na hanay ng mga sitwasyon, ang pagkakaroon ng tamang mga tool ng kunwa sa iyong pagtatapon ay maaaring maging napakahalaga.
Kung ikaw ay isa sa maraming mga programmers na gumagamit ng Mac, ang toolset ng developer ng Safari ay palaging madaling gamitin. Sa paglabas ng Safari 9 ang lawak ng pag-andar na ito ay malaki ang pinalawak, higit sa lahat dahil sa Responsive Design Mode_ na nagbibigay-daan sa iyo upang i-preview kung paano ang iyong site ay magre-render sa iba't ibang mga resolution ng screen pati na rin sa iba't ibang iPad, iPhone at iPod touch build.
Ang mga detalye ng tutorial kung paano i-activate ang tumutugon Disenyo Mode pati na rin kung paano gamitin ito para sa iyong mga pangangailangan sa pag-unlad.
Una, buksan ang iyong Safari browser.
02 ng 06
Mga Kagustuhan sa Safari
Mag-click sa Safari sa menu ng browser, na matatagpuan sa tuktok ng screen. Kapag lumitaw ang drop-down na menu, piliin ang opsiyon na Mga Kagustuhan_ circled sa halimbawa sa itaas.
Mangyaring tandaan na maaari mong magamit ang sumusunod na shortcut sa keyboard bilang kapalit ng nakalagay na menu item: COMMAND + COMMA (,)
03 ng 06
Ipakita ang Bumuo ng Menu
Ang dialog na Mga Pagpipilian sa Safari ay dapat na ngayong maipakita, overlaying ang iyong browser window. Una, mag-click sa Advanced na icon_ na kinakatawan ng isang gear at matatagpuan sa itaas na kanang sulok ng window.
Dapat na nakikita ang Mga Advanced na Kagustuhan ng browser. Sa ibaba ay isang opsiyon na sinamahan ng isang checkbox, na may label na Show Develop menu sa menu bar at circled sa halimbawa sa itaas. Mag-click sa checkbox nang isang beses upang buhayin ang menu na ito.
04 ng 06
Ilagay ang tumutugon Disenyo Mode
Ang isang bagong pagpipilian ay dapat na magagamit sa iyong menu ng Safari, na matatagpuan sa tuktok ng screen, na may label na Binuo . Mag-click sa pagpipiliang ito. Kapag lumilitaw ang drop-down na menu, piliin ang Enter Responsive Design Mode _ circled sa halimbawa sa itaas.
Pakitandaan na maaari mong magamit ang sumusunod na shortcut sa keyboard bilang kapalit ng item na nabanggit sa itaas: OPTION + COMMAND + R
05 ng 06
Nakikiramay Disenyo Mode
Ang aktibong pahina ng Web ay dapat na ipapakita sa Responsive Design Mode, tulad ng ipinapakita sa halimbawa sa itaas. Sa pamamagitan ng pagpili ng isa sa mga aparatong iOS na nakalista tulad ng iPhone 6, o isa sa mga itinalagang resolution ng screen na magagamit tulad ng 800 x 600, maaari mong agad na tingnan kung paano magre-render ang pahina sa device na iyon o sa resolution ng display na iyon.
Bilang karagdagan sa mga device at resolution na ipinapakita, maaari mo ring turuan ang Safari upang gayahin ang ibang ahente ng user - tulad ng isa mula sa ibang browser - sa pamamagitan ng pag-click sa drop-down na menu na ipinakita nang direkta sa itaas ng mga icon ng resolution.
06 ng 06
Paunlarin ang Menu: Iba pang Mga Pagpipilian
Bilang karagdagan sa Responsive Design Mode, ang menu ng Develop Safari 9 ay nag-aalok ng maraming iba pang kapaki-pakinabang na mga pagpipilian_ ilang na nakalista sa ibaba.
- Buksan ang Pahina Sa: Nagbibigay-daan sa iyo upang buksan ang aktibong Web page sa anumang iba pang browser na kasalukuyang naka-install sa iyong Mac.
- User Agent: Ang pagpapalit ng ahente ng gumagamit ay nagiging sanhi ng mga server ng Web upang makilala ang iyong browser bilang isang bagay maliban sa Safari 9.
- Ikonekta ang Web Inspector: Ang Web Inspector ng Safari 9 ay nagpapakita ng lahat ng mga mapagkukunan ng Web page, na nagbibigay ng kakayahang bumasang mabuti sa impormasyon ng CSS, sukatan ng DOM at istraktura, pati na rin ang katutubong code ng pinagmulan nito.
- Ipakita ang Error Console: Isa sa mga pinakalawak na pagpipilian sa Paggawa ng Menu, ang console na ito ay nagpapakita ng mga error sa JavaScript, HTML at XML at mga babala.
- Ipakita ang Pinagmulang Pahina: Pinapayagan kang tingnan at hanapin ang source code ng aktibong pahina ng Web.
- Ipakita ang Mga Mapagkukunan ng Pahina: Ang pagpili ng pagpipiliang ito ay nagpapakita ng mga dokumento, mga script, CSS at iba pang mga mapagkukunan mula sa kasalukuyang pahina.
- Ipakita ang Snippet Editor: Nagbibigay ng kakayahang mag-edit at magsagawa ng mga fragment ng code, kumpara sa isang kumpletong pahina. Ang tampok na ito ay lubhang kapaki-pakinabang mula sa isang pananaw sa pagsubok.
- Ipakita ang Tagabuo ng Extension: Pinapayagan kang bumuo ng iyong sariling mga extension ng Safari sa pamamagitan ng pagpoproseso ng iyong code nang naaayon at pagdagdag ng metadata.
- Magsimula ng Pag-record ng Timeline: Mga record ng isang bilang ng mga item kabilang ang mga kahilingan sa network, pagpapatupad ng JavaScript, pag-render ng pahina, at iba pang mga kaganapan para sa isang tinukoy ng gumagamit na period_ lahat na makikita sa loob ng WebKit Inspector.
- Mga Empty Cache: Ang pag- click sa pagpipiliang ito ay nagtatanggal ng lahat ng nakaimbak na cache sa loob ng Safari, hindi lamang ang karaniwang mga file ng cache ng website.
- Huwag Paganahin ang Mga Cache: Sa pag-cache na may kapansanan, ang mga mapagkukunan ay nai-download mula sa isang website sa bawat oras na ang isang kahilingan sa pag-access ay ginawa kumpara sa paggamit ng lokal na cache.
- Pahintulutan ang JavaScript mula sa Smart Search Field: Pinagana bilang default para sa mga kadahilanang pang-seguridad, pinapayagan ka ng tampok na ito na ipasok mo ang mga URL na naglalaman ng javascript: sa address bar ng Safari.
- Tratuhin ang SHA-1 Certificate bilang Hindi Tiwasay : Maikling para sa Secure Hash Algorithm, ang SHA-1 na hash function ay napatunayang hindi mas ligtas kaysa sa orihinal na naisip_ kaya ang pagdaragdag ng pagpipiliang ito sa Safari 9.
Mga Kaugnay na Pagbabasa
Kung nahanap mo ang tutorial na ito kapaki-pakinabang, siguraduhin na tingnan ang aming iba pang mga walkthroughs ng Safari 9.
- Paano Pamahalaan ang Mga Abiso sa Push ng Website
- Paano Mag-export ng isang Web Page sa isang PDF File
- Paano I-configure ang Safari 9 Mga Extension upang Awtomatikong I-update
- Paano Gamitin ang Piniling Mga Tampok na Site