Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Debug in Safari  HTML5     ¶ÊVv       #37          2013/03/21
PÊžv «Ìhtml5j / HTML5       ôáÜÕ¶ V         ¡—–öçßý          {—∼    @nakajmg   ¼êÔ Ãè Ãç ô     CSS/JavaScript/HTML5
Safari 6
¬̃ oo”  Safarioȶxq” devtools  zo³¶O©Qfiº¶OÝ ÂÔ¼
Safari   v¡—–›³   ?
ËáÂÞ•ÎýÚ³ß™êŸ oØ •ßïß™êŸÍ                "     "    pí 1 È         >   Safari >  ýڔߣ™%êŸoØ
ß   ™êŸoØ
devtools UI          qÈögw
z¢” ìðÅ
ßïè¾Ñ ÓßÎòé
ïè¾Ñ ÓßÎòé             ß       ßÉçáÇçß ÓCtrl + 0 :   ýÚø ýÚ”ßïè¾Ñ              /Ctrl + 1 : ÕßÚCtrl + 2 :Ôß çÕCtrl + 3 :¾ Š...
ßÒÁ õç ä Ï
ßïè¾ÑÖ ßä½å
Æ( ßÉž ™   0.1   Option + / Æ( ßÉž ™  10     Shiht + /     Æ( ßÉž ™           /        1¦zòN”߶flU zu–›−  òN” ¾ÜÕ
ïè¾ÑÖ ßä½å                     ß               ßÉçáÇçß ÓCtrl + Shift + 0 :         ýÚø ýÚ”ßïè¾Ñì   /Ctrl + Shift + 1 :    ...
UserAgent   òN”
: Safari Realized   −¡òN³çÕ ”ç ÂÔßÃßÒßž”ß™êŸoØ   Safari                        ç¾Ñ ̨                    ç ÂÔßÃÒßž oØ    >
∼œ     »zo³¶O©Q   devtools   ∙¦−m»oÈ”   UI
devtools   ¬̃ qÈzxq
o¶x wjQ” ¾¹ô   JS/CSS
o¶|wßÇáóß Ç
o¶x wØ]” ¤©        JS     minify
o¶x çß ™ÿÃ wç ù¾touch
touch    õ¾ −x çß ™ÿÃwç ù¾        phantom-limb  https://github.com/brian-c/phantom-limb         çá ËßþËáõ
Ìï
Oú¹»•Ìáïå”   JS− Öw • −mwéŸ
”oo –Q̃∙ç ¾ýËß õ
R   vqøÆ–›ºv v            mac     t −©¢w • ÜËúÕ ¾ ”                  : web          Web     Safari6        ý¬uT 1 qł|—|žœ¤...
Safari   ¬̃ oo”
ܽåÃçáúêÕ
ýڳܽåÃçáúêÕ oØ             >−x  ß            html   Üw½™òÃöŠáÜ êÕ      å ç ¾ ú¼ ”
Ìáïåçߎ
iOS   −x wÌáïå”Ï̊       Safari6 + iOS6
−¡• ų ÜËúÕ ¾       Web   pí     1Ł Ï̊     > Safari >   :    iOS−¡•ÒE³Ìáïåçߎ
̆Ó³Õ¾ïåœv oØ        ž                 Mac :  zس   Ï̊    : Safari        ž               iOS−}¶fi ³ Ï̊    Mac USB          ...
Üß ™ÿÓ   iOS
flUþ• ÎýÚ
−̊Ów Ôßï Õ¾ïå
Î Üß ™ÿÓ•Ú” Î̀−©„wçá Ó ß ËÕ    Ûw ÎýÚ
ß™êŸoØ”fiÑqØ
¾ è þÏž                              ždefaults write com.apple.Safari IncludeInternalDebugMenu 1
Debug   ™êŸß
Caches Window
Miscellaneous Flags    chrome://flags   fiº¶O
Drawing/Compositing Flags        GPU   ”÷9flag
Compositing BordersDrawing/Compositing Flags > Show Compositing Borders           GPU            ýÚ”É̌È”«Þ−ø•             ...
…∙¶∙¶¥Š Ò+ôÑ”Õ× ö   vv” alert   Ø•H
flUÜß ™ÿÓ  iOS   ÂÊ»•Ìáïå”Ï̊            iOSŸÕÕÅwÒÁ õ  Ì         JS/CSS       Ł”H»—áïå”
ß°u
Debug in safari
Upcoming SlideShare
Loading in …5
×

Debug in safari

3,671 views

Published on

HTML5とか勉強会#37 @nakajmg

  • Be the first to comment

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

×