Debug in safari

3,457 views

Published on

HTML5とか勉強会#37 @nakajmg

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,457
On SlideShare
0
From Embeds
0
Number of Embeds
745
Actions
Shares
0
Downloads
10
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Debug in safari

  1. 1. Debug in Safari HTML5 ¶ÊVv #37 2013/03/21
  2. 2. PÊžv «Ìhtml5j / HTML5 ôáÜÕ¶ V ¡—–öçßý {—∼ @nakajmg ¼êÔ Ãè Ãç ô CSS/JavaScript/HTML5
  3. 3. Safari 6
  4. 4. ¬̃ oo” Safarioȶxq” devtools zo³¶O©Qfiº¶OÝ ÂÔ¼
  5. 5. Safari v¡—–›³ ?
  6. 6. ËáÂÞ•ÎýÚ³ß™êŸ oØ •ßïß™êŸÍ " " pí 1 È > Safari > ýڔߣ™%êŸoØ
  7. 7. ß ™êŸoØ
  8. 8. devtools UI qÈögw
  9. 9. z¢” ìðÅ
  10. 10. ßïè¾Ñ ÓßÎòé
  11. 11. ïè¾Ñ ÓßÎòé ß ßÉçáÇçß ÓCtrl + 0 : ýÚø ýÚ”ßïè¾Ñ /Ctrl + 1 : ÕßÚCtrl + 2 :Ôß çÕCtrl + 3 :¾ Š¾ÜCtrl + 4 : ›{Ctrl + 5 : tCtrl + 6 : ÌáïåCtrl + 7 : ç ¾ýËß õCtrl + 8 : Ì (Chrome » cmd + 1~ )
  12. 12. ßÒÁ õç ä Ï
  13. 13. ßïè¾ÑÖ ßä½å
  14. 14. Æ( ßÉž ™ 0.1 Option + / Æ( ßÉž ™ 10 Shiht + / Æ( ßÉž ™ / 1¦zòN”߶flU zu–›− òN” ¾ÜÕ
  15. 15. ïè¾ÑÖ ßä½å ß ßÉçáÇçß ÓCtrl + Shift + 0 : ýÚø ýÚ”ßïè¾Ñì /Ctrl + Shift + 1 : pŽ”ÕßÚCtrl + Shift + 2 : pŽ”èßíCtrl + Shift + 3 : pŽ” ¾ÜÕ
  16. 16. UserAgent òN”
  17. 17. : Safari Realized −¡òN³çÕ ”ç ÂÔßÃßÒßž”ß™êŸoØ Safari ç¾Ñ ̨ ç ÂÔßÃÒßž oØ >
  18. 18. ∼œ »zo³¶O©Q devtools ∙¦−m»oÈ” UI
  19. 19. devtools ¬̃ qÈzxq
  20. 20. o¶x wjQ” ¾¹ô JS/CSS
  21. 21. o¶|wßÇáóß Ç
  22. 22. o¶x wØ]” ¤© JS minify
  23. 23. o¶x çß ™ÿÃ wç ù¾touch
  24. 24. touch õ¾ −x çß ™ÿÃwç ù¾ phantom-limb https://github.com/brian-c/phantom-limb çá ËßþËáõ
  25. 25. Ìï
  26. 26. Oú¹»•Ìáïå” JS− Öw • −mwéŸ
  27. 27. ”oo –Q̃∙ç ¾ýËß õ
  28. 28. R vqøÆ–›ºv v mac t −©¢w • ÜËúÕ ¾ ” : web Web Safari6 ý¬uT 1 qł|—|žœ¤– Öw • ”ÜËúÕ ¾ : Web ç¾Ñ ̨ ¡—£ž |V” CSS
  29. 29. Safari ¬̃ oo”
  30. 30. ܽåÃçáúêÕ
  31. 31. ýڳܽåÃçáúêÕ oØ >−x ß html Üw½™òÃöŠáÜ êÕ å ç ¾ ú¼ ”
  32. 32. Ìáïåçߎ
  33. 33. iOS −x wÌáïå”Ï̊ Safari6 + iOS6
  34. 34. −¡• ų ÜËúÕ ¾ Web pí 1Ł Ï̊ > Safari > : iOS−¡•ÒE³Ìáïåçߎ
  35. 35. ̆Ó³Õ¾ïåœv oØ ž Mac : zس Ï̊ : Safari ž iOS−}¶fi ³ Ï̊ Mac USB iOS
  36. 36. Üß ™ÿÓ iOS
  37. 37. flUþ• ÎýÚ
  38. 38. −̊Ów Ôßï Õ¾ïå
  39. 39. Î Üß ™ÿÓ•Ú” Î̀−©„wçá Ó ß ËÕ Ûw ÎýÚ
  40. 40. ß™êŸoØ”fiÑqØ
  41. 41. ¾ è þÏž ždefaults write com.apple.Safari IncludeInternalDebugMenu 1
  42. 42. Debug ™êŸß
  43. 43. Caches Window
  44. 44. Miscellaneous Flags chrome://flags fiº¶O
  45. 45. Drawing/Compositing Flags GPU ”÷9flag
  46. 46. Compositing BordersDrawing/Compositing Flags > Show Compositing Borders GPU ýÚ”É̌È”«Þ−ø• −©ýÚwc‚&ò”«Þ
  47. 47. …∙¶∙¶¥Š Ò+ôÑ”Õ× ö vv” alert Ø•H
  48. 48. flUÜß ™ÿÓ iOS ÂÊ»•Ìáïå”Ï̊ iOSŸÕÕÅwÒÁ õ Ì JS/CSS Ł”H»—áïå”
  49. 49. ß°u

×