01 van 06
Aktiveer en gebruik die verantwoordelike ontwerp af in Safari 9
Om 'n webontwikkelaar in vandag se wêreld te wees, beteken die ondersteuning van 'n verskeidenheid toestelle en platforms, wat soms 'n uitdagende taak kan wees. Selfs met die mees goed ontwerpte kode wat voldoen aan die nuutste Web-standaarde, kan jy steeds vind dat gedeeltes van jou webwerf dalk nie lyk of optree soos jy dit wil hê op sekere toestelle of resolusies nie. As jy die uitdaging om so 'n wye verskeidenheid scenario's te ondersteun, kan die regte simulasie gereedskap tot jou beskikking van onskatbare waarde wees.
As jy een van die vele programmeerders is wat 'n Mac gebruik, is Safari se ontwikkelaar gereedskapset altyd handig. Met die vrylating van Safari 9 het die omvang van hierdie funksionaliteit aansienlik uitgebrei, hoofsaaklik as gevolg van Responsive Design Mode_ wat u toelaat om te voorskou hoe u werf by verskeie skermresolusies sal lewer, asook op verskillende iPad-, iPhone- en iPod touch-opgraderings.
Hierdie handleiding beskryf hoe om die Responsive Design Mode te aktiveer, asook hoe om dit te gebruik vir u ontwikkelingsbehoeftes.
Open eers jou Safari-blaaier.
02 van 06
Safari Voorkeure
Klik op Safari in die blaaier kieslys, boaan die skerm. Wanneer die aftreklys verskyn, kies die Voorkeure- opsie_ omkring in die voorbeeld hierbo.
Let asseblief daarop dat u die volgende sleutelbordkortpaaie kan gebruik in plaas van die voorafgaande menu-item: COMMAND + COMMA (,)
03 van 06
Wys ontwikkel-kieslys
Safari-voorkeure dialoog moet nou vertoon word, met die oorlaai van jou blaaier venster. Klik eers op die Gevorderde ikoon wat deur 'n rat voorgestel word en in die boonste regterkantste hoek van die venster verskyn.
Die blaaier se gevorderde voorkeure moet nou sigbaar wees. Aan die onderkant is 'n opsie vergesel deur 'n boks, gemerk Wys ontwikkel-kieslys in menubalk en omkring in die voorbeeld hierbo. Klik een keer op die boks om hierdie spyskaart te aktiveer.
04 van 06
Voer die verantwoordelike ontwerpmodus in
'N Nuwe opsie moet nou beskikbaar wees in jou Safari-kieslys, boaan die skerm, met die naam Ontwikkel . Klik op hierdie opsie. Wanneer die aftrekkieslys verskyn, kies Invoer Responsive Design Mode _ omkring in die voorbeeld hierbo.
Let asseblief daarop dat u die volgende sleutelbordkortpaaie kan gebruik in plaas van die voorgenoemde spyskaart item: OPTION + COMMAND + R
05 van 06
Responsiewe ontwerp af
Die aktiewe webblad moet nou in die responsiewe ontwerpmodus vertoon word, soos in die voorbeeld hierbo aangedui. Deur een van die IOS-toestelle soos die iPhone 6 of een van die beskikbare skermresolusies soos 800 x 600 te kies, kan jy dadelik sien hoe die bladsy op daardie toestel of in daardie skermresolusie sal vertoon.
Benewens die aangeduide toestelle en resolusies, kan jy ook Safari instrueer om 'n ander gebruikersagent soos een van 'n ander blaaier te simuleer deur op die keuselys te klik wat direk bo die resolusie-ikone vertoon word.
06 van 06
Ontwikkel Kieslys: Ander Opsies
Benewens die responsiewe ontwerpmodus bied Safari 9 se ontwikkelingslys baie ander nuttige opsies wat sommige hieronder genoem word.
- Open bladsy met: Hiermee kan u die aktiewe webblad oopmaak in enige ander blaaier wat tans op u Mac geïnstalleer is.
- Gebruikersagent: Deur die gebruiker agent te verander, veroorsaak dat webbedieners jou blaaier as iets anders as Safari 9 identifiseer.
- Koppel Web Inspector: Safari 9 se Web Inspector vertoon al die bronne van 'n webblad, wat die vermoë bied om CSS-inligting, DOM-statistieke en -strukture, sowel as die inheemse bronkode te lees.
- Wys Fout Console: Een van die mees gebruikte opsies in die ontwikkel menu, hierdie console vertoon JavaScript, HTML en XML foute en waarskuwings.
- Wys bladsy Bron: Hiermee kan jy die bronkode van die aktiewe webblad sien en deursoek.
- Wys bladsy hulpbronne: Hierdie opsie kies dokumente, skrifte, CSS en ander bronne vanaf die huidige bladsy.
- Wys Snippet Editor: Verskaf die vermoë om fragmente van kode te wysig en uit te voer, in teenstelling met 'n volledige bladsy. Hierdie funksie is baie nuttig uit 'n toetsperspektief.
- Wys Uitbreidingsbouer: Laat jou toe om jou eie Safari-uitbreidings op te stel deur jou kode dienooreenkomstig te verpak en metadata by te voeg.
- Begin tydlynopname: Teken 'n aantal items in, insluitend netwerkversoeke, JavaScript-uitvoering, bladsyweergawe en ander gebeurtenisse vir 'n gebruiker-gedefinieerde tydperk_ alles wat sigbaar is in die WebKit-inspekteur.
- Leë Caches: As u op hierdie opsie klik, word alle gestoor cache in Safari verwyder, nie net die standaard-webwerf kas lêers.
- Caches uitskakel: Met caching gedeaktiveer, word hulpbronne afgelaai vanaf 'n webwerf elke keer as 'n toegangsversoek gemaak word in teenstelling met die gebruik van die plaaslike kas.
- Laat JavaScript toe in Smart Search Field: Sekuriteit is standaard afgeskakel. Met hierdie funksie kan u URL's met javascript in die adresbalk van Safari spesifiseer.
- Behandel SHA-1-sertifikate as onseker: Kort vir Secure Hash Algoritme, is die SHA-1 hash-funksie minder veilig as oorspronklik gedink, en dus die byvoeging van hierdie opsie in Safari 9.
Verwante leeswerk
As jy hierdie handleiding nuttig gevind het, kyk gerus na ons ander Safari 9-deurbrake.
- Hoe om Webwerfdrukkennisgewings te bestuur
- Hoe om 'n webbladsy na 'n PDF-lêer uit te voer
- Hoe om Safari 9-uitbreidings te konfigureer om outomaties op te dateer
- Hoe om die Pinned Sites-funksie te gebruik