HTML5とか勉強会#37 @nakajmg

1. Debug in Safari
HTML5 ¶ÊVv #37
2013/03/21

2. PÊžv «Ì
html5j / HTML5
ôáÜÕ¶ V
¡—–öçßý
{—∼ @nakajmg
¼êÔ Ãè Ãç ô
CSS/JavaScript/HTML5

3. Safari 6

4. ¬̃ oo” Safari
oȶxq” devtools
zo³¶O©Q
fiº¶OÝ ÂÔ¼

5. Safari v¡—–›³ ?

6. ËáÂÞ•ÎýÚ³ß™êŸ oØ •ßïß™êŸÍ
" "
pí 1 È
> Safari >
ýڔߣ™%êŸoØ

7. ß ™êŸoØ

8. devtools UI
qÈögw

9. z¢” ìðÅ

10. ßïè¾Ñ ÓßÎòé

11. ïè¾Ñ ÓßÎòé ß
ßÉçáÇçß Ó
Ctrl + 0 :
ýÚø ýÚ”ßïè¾Ñ /
Ctrl + 1 : ÕßÚ
Ctrl + 2 :Ôß çÕ
Ctrl + 3 :¾ Š¾Ü
Ctrl + 4 : ›{
Ctrl + 5 : t
Ctrl + 6 : Ìáïå
Ctrl + 7 :
ç ¾ýËß õ
Ctrl + 8 : Ì
(Chrome
» cmd + 1~ )

12. ßÒÁ õç ä Ï

13. ßïè¾ÑÖ ßä½å

14. Æ( ßÉž ™
0.1 Option + /
Æ( ßÉž ™
10 Shiht + /
Æ( ßÉž ™
/ 1
¦zòN”߶flU zu–›−
òN” ¾ÜÕ

15. ïè¾ÑÖ ßä½å
ß
ßÉçáÇçß Ó
Ctrl + Shift + 0 :
ýÚø ýÚ”ßïè¾Ñì /
Ctrl + Shift + 1 :
pŽ”ÕßÚ
Ctrl + Shift + 2 :
pŽ”èßí
Ctrl + Shift + 3 :
pŽ” ¾ÜÕ

16. UserAgent òN”

17. : Safari Realized −¡òN³çÕ ”ç ÂÔßÃßÒßž”ß™êŸoØ Safari
ç¾Ñ ̨
ç ÂÔßÃÒßž oØ >

18. ∼œ »zo³¶O©Q
devtools
∙¦−m»oÈ” UI

19. devtools ¬̃ qÈzxq

20. o¶x wjQ” ¾¹ô JS/CSS

21. o¶|wßÇáóß Ç

22. o¶x wØ]” ¤©
JS minify

23. o¶x çß ™ÿÃ
wç ù¾touch

24. touch
õ¾ −x çß ™ÿÃwç ù¾
phantom-limb
https://github.com/brian-c/phantom-limb
çá ËßþËáõ

25. Ìï

26. Oú¹»•Ìáïå” JS
− Öw • −mwéŸ

27. ”oo –Q̃∙ç ¾ýËß õ

29. R vqøÆ–›ºv v
mac t −©¢w • ÜËúÕ ¾ ”
: web Web Safari6
ý¬uT 1 qł|—|žœ¤– Öw • ”ÜËúÕ ¾
: Web
ç¾Ñ ̨
¡—£ž |V” CSS

30. Safari ¬̃ oo”

31. ܽåÃçáúêÕ

32. ýڳܽåÃçáúêÕ oØ
>
−x ß html
Üw½™òÃöŠáÜ êÕ
å ç ¾ ú¼ ”

33. Ìáïåçߎ

34. iOS −x wÌáïå”Ï̊
Safari6 + iOS6

35. −¡• ų ÜËúÕ ¾ Web
pí 1Ł Ï̊
> Safari > : iOS
−¡•ÒE³Ìáïåçߎ

36. ̆Ó³Õ¾ïåœv oØ
ž
Mac :
zس Ï̊
: Safari
ž
iOS
−}¶fi ³ Ï̊
Mac USB iOS

37. Üß ™ÿÓ iOS

38. flUþ• ÎýÚ

39. −̊Ów Ôßï Õ¾ïå

40. Î Üß ™ÿÓ•Ú” Î̀
−©„wçá Ó ß ËÕ
Ûw ÎýÚ

41. ß™êŸoØ”fiÑqØ

42. ¾ è þÏž ž
defaults write com.apple.Safari IncludeInternalDebugMenu 1

43. Debug ™êŸß

44. Caches Window

45. Miscellaneous Flags
chrome://flags fiº¶O

46. Drawing/Compositing Flags
GPU ”÷9flag

47. Compositing Borders
Drawing/Compositing Flags > Show Compositing Borders
GPU
ýÚ”É̌È”«Þ−ø•
−©ýÚwc‚&ò”«Þ

48. …∙¶∙¶
¥Š Ò+ôÑ”Õ× ö
vv” alert
Ø•H

49. flUÜß ™ÿÓ iOS
ÂÊ»•Ìáïå”Ï̊
iOS
ŸÕÕÅwÒÁ õ Ì JS/CSS
Ł”H»—áïå”

50. ß°u