debug in safari
DESCRIPTION
HTML5とか勉強会#37 @nakajmgTRANSCRIPT
![Page 1: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/1.jpg)
Debug in SafariHTML5�vVʶ #37
2013/03/21
![Page 2: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/2.jpg)
Ì« žPhtml5j / HTML5�vVʶÕÜáô
�ýßço–—¡
∼—{
ô��çÃ�èÃ�Ôê¼
CSS/JavaScript/HTML5
@nakajmg
![Page 3: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/3.jpg)
Safari 6
![Page 4: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/4.jpg)
¼ÔÂ�ÝO¶ºfi
Q©O¶³ozdevtools�”qx¶Èo
Safari”oo�¬
![Page 5: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/5.jpg)
Safari³›–—¡v?
![Page 6: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/6.jpg)
ØoŸê™ß”ÚýSafari > %ÈŁ1 > íp
ÍŸê™ßïß•"Øo"Ÿê™ß³ÚýΕÞÂáË
![Page 7: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/7.jpg)
ØoŸê™ß
![Page 8: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/8.jpg)
devtools�UIwgöÈq
![Page 9: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/9.jpg)
Åðì�”¢z
![Page 10: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/10.jpg)
éòÎßÓ��Ѿèïß
![Page 11: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/11.jpg)
éòÎßÓ��Ѿèïß
Ó�ßçÇáçÉß
Ctrl + 0 : Ѿèïß”Úý/øÚýCtrl + 1 : �ÚßÕCtrl + 2 : Õç�ßÔCtrl + 3 : ܾŠ�¾�Ctrl + 4 : {›Ctrl + 5 : �tCtrl + 6 : åïáÌCtrl + 7 : õ�ßËý¾�çCtrl + 8 : �Ì
(Chrome»cmd + 1~ )
![Page 12: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/12.jpg)
Ï�ä�çõ�ÁÒß
![Page 13: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/13.jpg)
å½äß�ÖѾèïß
![Page 14: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/14.jpg)
Õܾ�”Nò
−›–uz�Ufl¶ß”Nòz¦
™/žÉß �1(ÆShiht + ™/žÉß �10(ÆOption + ™/žÉß �0.1(Æ
![Page 15: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/15.jpg)
å½äß�ÖѾèïß
Ó�ßçÇáçÉß
Ctrl + Shift + 0 : ìѾèïß”Úý/øÚýCtrl + Shift + 1 : �ÚßÕ”ŽpCtrl + Shift + 2 : íß蔎pCtrl + Shift + 3 : Õܾ�”Žp
![Page 16: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/16.jpg)
UserAgent”Nò
![Page 17: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/17.jpg)
Øo > žßÒÃßÔÂ�ç
�ѾçSafari ØoŸê™ß”žßÒßÃßÔÂ�ç”�Õç³Nò¡− : Safari Realized
![Page 18: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/18.jpg)
UI”Èo»m−¦∙Q©O¶³oz»devtools�œ∼
![Page 19: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/19.jpg)
devtools�qxzÈq�¬
![Page 20: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/20.jpg)
JS/CSSô¹¾�”Qjw�x¶o
![Page 21: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/21.jpg)
Ç�ßóáÇßw|¶o
![Page 22: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/22.jpg)
minify\©¤JS”]Øw�x¶o
![Page 23: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/23.jpg)
touch¾ù�çwÃÿ™�ßç�x¶o
![Page 24: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/24.jpg)
touch¾ù�çwÃÿ™�ßç�x−�¾õ��
phantom-limb
õáËþßË�áç���
https://github.com/brian-c/phantom-limb
![Page 25: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/25.jpg)
ïÌ
![Page 26: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/26.jpg)
Ÿ©Ãwm−��•�wÖ�−
JS”åïáÌ•»¹úO
![Page 27: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/27.jpg)
õ�ßËý¾�ç∙Q–�oo”
![Page 28: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/28.jpg)
![Page 29: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/29.jpg)
CSS”V|�ž£—¡
�ѾçWeb¾�ÕúËÜ”�•�wÖ�–¤œž|—|łq : 1�Tu¬ý�
Safari6 ” Web ¾�ÕúËÜ��•�w¢©−�t : web�vmac�vº›–Æøqv R
![Page 30: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/30.jpg)
Safari”oo�¬
![Page 31: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/31.jpg)
ÕêúáçÃå½Ü
![Page 32: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/32.jpg)
ÕêúáçÃå½Ühtml”�¼�ܾŠö�ò™ßw�x−
Øo > ÕêúáçÃå½Ü³Úý
![Page 33: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/33.jpg)
�ŽßçåïáÌ
![Page 34: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/34.jpg)
iOSÏ”åïáÌw�x−Safari6 + iOS6
![Page 35: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/35.jpg)
�Žßçåïá̳EÒ•¡−
iOSÏ : Ł1 > Safari > íp
Web¾�ÕúËÜ ³Å�•¡−
![Page 36: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/36.jpg)
iOSÏ�Mac³USB�fi¶}−ž
iOSÏ : Safari³Øzž
Mac : Øo vœåï¾Õ³Ó
![Page 37: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/37.jpg)
iOSÓÿ™�ßÜ
![Page 38: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/38.jpg)
ÚýÎ�•þUfl
![Page 39: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/39.jpg)
åï¾Õ�ïßÔ��wÓ−
![Page 40: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/40.jpg)
ÚýÎ�wÛÕË�ß�Ó�áçw„©−
�Î�”Ú•Óÿ™�ßÜ�Î�
![Page 41: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/41.jpg)
ØqÑfi”ØoŸê™ß
![Page 42: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/42.jpg)
žÏþ�è�¾����ždefaults write com.apple.Safari IncludeInternalDebugMenu 1
![Page 43: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/43.jpg)
DebugŸê™ß
![Page 44: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/44.jpg)
Caches Window
![Page 45: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/45.jpg)
Miscellaneous Flagschrome://flags O¶ºfi
![Page 46: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/46.jpg)
Drawing/Compositing FlagsGPU9÷”flag
![Page 47: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/47.jpg)
Compositing BordersDrawing/Compositing Flags > Show Compositing Borders
GPU•ø−Þ«”ÈÉ”Úý
Þ«”ò&‚cwÚý\©−
![Page 48: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/48.jpg)
H•Øalert”vv
ö�×Õ”Ñô+Ò�Š¥
¶∙¶∙…
![Page 49: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/49.jpg)
—�ŁJS/CSS”åïáÌ»H”õ�ÁÒwÅÕÕŸ
iOSÏ”åïáÌ•»ÊÂ
iOSÓÿ™�ßÜUfl
![Page 50: Debug in safari](https://reader031.vdocument.in/reader031/viewer/2022013111/549a45e1ac795925288b5cb2/html5/thumbnails/50.jpg)
u°ß