Firefox DevTools

Firefox 標準の Developer Tools の紹介
Kanazawa.js 1.7 で利用

Transcript

1. Firefox DevTools Slides @ Kanazawa.js 1.7 with Mozilla by Tomoya ASAI (dynamis) last update on 2012.03.30 see also: http://dynamis.jp/r
2. BCPVUNF http:// dynamis.jp @dynamitter facebook.com/ dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org> @
3. 'JSFCVH
   ͸ʁ ࠓ೔͸ѻ͍·ͤΜɻ طʹ஌ͬͯ·͢ΑͶʁ ৘ใ΋͍ͬͺ͍͋ΔΑͶʁ ΈΜͳͰษڧͯ͠Ͷɻ
4. Page Source Inspector Style Editor Web Console Scratchpad Script Debugger ... Agenda
5. 1BHF
   4PVSDF ιʔε͕ݟΒΕΔͷ͕
   8FC
7. ϖʔδͷιʔεΛදࣔ
   ͋Γ·͢ΑͶɺ౰વɻ
   γϣʔτΧοτ
   $USM 6
   'Y
   ͔Βߦ൪߸දࣔʹରԠ
   બ୒ͨ͠෦෼ͷιʔεΛදࣔ
   ൣғબ୒ͯ͠ӈΫϦοΫ
8. *OTQFDUPS σβΠφʔͷࡾछͷਆثʂ
10. $ISPNF
    63-
    'JSFGPY
    ͷ
    6*
    ෦෼
    ΋
11. *OTQFDUPS
    ཁૉΛௐࠪ͢Δπʔϧ
    γϣʔτΧοτ
    $USM "MU *
    Ϛ΢εΦʔόʔͰཁૉΛબ୒
    ਌ࢠͷཁૉ͸ύϯͣ͘Ϧετ· ͨ͸
    )5.-
    ϏϡʔͰબ୒͢Δ
    બ୒
    )JHIMJHIUFS
    ࣌ͷӄ͕Ξχ ϝʔγϣϯͰҠಈͯ֨͠޷͍͍
12. *OTQFDUPS
    
    )5.-
    &EJUPS
    )5.-
    ϦΞϧλΠϜΤσΟλ
    ଐੑ͸μϒϧΫϦοΫͰฤूՄ
    ӈΫϦοΫ͔Βཁૉͷ࡟আɺ *OUFS)5.-0VUFS)5.-
    ίϐʔ
    ΑΓڧྗͳΤσΟλ
    5SFF&EJUPS
    ΋ݱࡏ։ൃத point!
13. *OTQFDUPS
    
    4UZMF
    *OTQFDUPS
    $44
    ϦΞϧλΠϜΤσΟλ
    ελΠϧͷฤूɺΦϯΦϑ
    ܭࢉ஋ελΠϧͷ֬ೝ
    ϓϩύςΟϔϧϓ͸
    .%/
    ελΠϧมߋ΋Ξχϝʔγϣϯ ͯ͠
    'PYZ
    ͳײ͡ɻ ɾɾ 
16. %
    *OTQFDUPS
    5JMU
    %0.
    ߏ଄Λ̏%ՄࢹԽ
    ςΫϊϩδʔͷແବݣ͍ ։ൃ࣌͸ແବػೳຬࡌͩͬͨ
    ը໘֎ཁૉͷબ୒΋؆୯
    %
    දࣔˍબ୒πʔϧͰ͢ point!
17. 4UZMF
    &EJUPS ελΠϧΨϯΨϯॻ͖׵͑ͯΈΑ͏
19. 4UZMF
    &EJUPS
    ϖʔδͷશ
    $44
    Ұׅฤू
    ฤूͨ͠
    $44
    ͸อଘՄೳ
    ৽ن
    $44
    ࡞੒΍ಡΈࠐΈ΋Մೳ
    ϑΝΠϧ୯ҐͷΦϯΦϑ΋ point!
20. 8FC
    $POTPMF 'JSFGPY
    
    ͔Βͷجຊπʔϧ
23. 8FC
    ίϯιʔϧ
    جຊతͳίϯιʔϧ
    γϣʔτΧοτ
    $USM "MU ,
    දࣔҐஔ
    ্ɺԼɺผ΢Οϯυ΢
    ϝοηʔδͷϑΟϧλ
    'Y
    ͔Β͸ίϯιʔϧ։͘લͷ ϩάϝοηʔδ΋ه࿥͞ΕΔ point!
24. ؆қ
    +BWB4DSJQU
    ࣮ߦ؀ڥ
    ؆қ
    +4
    ࣮ߦ؀ڥ
    ίʔυͷࣗಈิ׬΋͋Γ
    ஫
    'Y
    ͔ΒϩέʔγϣϯόʔͰͷ KBWBTDSJQU
    63-
    ͸ϖʔδݖݶͳ͠
    ιʔγϟϧΤϯδχΞϦϯάରԠ
    ࠔΔͳΒ
    *OIFSJU1SJODJQBM
    ΞυΦϯ
    IUUQTBEEPOTNP[JMMBPSH pSFGPYBEEPOJOIFSJUQSJODJQBM point!
25. ίϯιʔϧར༻࣌ͷ஫ҙ
    ίϯιʔϧ͸
    4BOECPY
    ؀ڥ
    8FC
    ϖʔδͷཁૉʹ͸
    XJOEPX
    ܦ༝ͰΞΫηε͢Δඞཁ͋Γ ྫ͑͹ɺϖʔδίϯςΩετʹ άϩʔόϧม਺Λఆٛ͢Δʹ͸ XJOEPXGPP
    
    WBMVF
    *OTQFDUPS
    Ͱબ୒͍ͯ͠Δཁૉ ʹ͸
    
    ม਺ͰΞΫηεՄೳ point! point!
26. /FUXPSL
    3FRVFTU
    *OTQFDUPS
    )551
    ϔομͷ֬ೝ
    ίϯιʔϧͷ
    63-
    ΛΫϦοΫ
    3FRVFTU
    
    3FTQPOTF
    ϔομ
    ௨৴࣌ؒ΍
    $PPLJF
    ͷ֬ೝ
    )551
    #0%:
    ΋ه࿥Մೳ
    ӈΫϦοΫϝχϡʔ͔Βʮཁٻ ϘσΟͱԠ౴ϘσΟΛه࿥ʯ point!
27. 4DSBUDIQBE &DMJQTF
    0SJPO
    ಺ଂͷ
    +4
    ࣮ߦ؀ڥ
29. 4DSBUDIQBE
    &DMJQTF
    0SJPO
    ΤσΟλΛ಺ଂ
    γϣʔτΧοτ
    4IJGU '
    ίʔυΛ࣮ߦɺௐࠪɺදࣔ
    ௐࠪ
    ΠϯεϖΫλը໘Λදࣔ
    දࣔ
    ࣮ߦ݁ՌΛίϝϯτͰૠೖ
    બ୒ൣғ͚ͩΛ࣮ߦՄೳʂ point!
30. 4DSBUDIQBE
    ར༻࣌ͷ஫ҙ
    4DSBUDIQBE
    ΋
    4BOECPY
    ؀ڥ
    8FC
    ϖʔδͷཁૉʹ͸
    XJOEPX
    ܦ༝ͰΞΫηε͢Δඞཁ͋Γ ྫ͑͹ɺϖʔδίϯςΩετʹ άϩʔόϧม਺Λఆٛ͢Δʹ͸ XJOEPXGPP
    
    WBMVF point!
31. 4DSBUDIQBE
    GPS
    $ISPNF
    $POUFOU
    ͚ͩͰͳ͘
    $ISPNF
    ؀ ڥͰ΋ར༻Մೳ
    BCPVUDPOpH
    Ͱ࣍ͷઃఆΛ EFWUPPMTDISPNFFOBCMFEUSVF
    ʮ࣮ߦ؀ڥʯϝχϡʔ͕௥Ճ ֦ுػೳ΍
    'JSFGPY
    ຊମΛ։ൃ͢ Δ࣌ʹศརͰ͢ point!
32. 4DSJQU
    %FCVHHFS ࠷୹Ͱ
    'JSFGPY
    
    ໨ඪʹ։ൃத
34. 4DSJQU
    %FCVHHFS
    +BWB4DSJQU
    σόοΨͰ͢
    γϣʔτΧοτ
    $USM "MU 4
    ݱࡏ
    /JHIUMZ
    ͰσϑΥϧτΦϑ EFWUPPMTEFCVHHFSFOBCMFEUSVF
    ϒϨʔΫϙΠϯτɺεςοϓ࣮ ߦɺίʔϧελοΫɺείʔϓม ਺ͳͲ͸طʹ࣮૷ࡁΈ
35. BOE
    NPSF %FWFMPQFS
    5PPMCBS 4UZMF
    &EJUPS
    ͷڧԽ ٙࣅΫϥεͷϩοΫɺࣗಈิ׬ɺૢ࡞ੑ޲্ *OTQFDUPS
    ͷڧԽ ϨΠΞ΢τ৘ใͷදࣔɺෳ਺ಉ࣌
    )JHIMJHIU RVFSZ4FMFDUPS
    ݕࡧϘοΫε 4PVSDF.BQ ͳͲͳͲ
36. ͓·͚ɻ
37. .BSJPOFUUF ͋ͳͨͷ
    'JSFGPY
    ΋ૢΓਓܗ
38. ϚϦΦωοτ
    ϦϞʔτςετυϥΠό
    4FMFOJVN
    తͳ΋ͷͰ͢ #(
    ։ൃͷͨΊ༏ઌ࣮૷͞Εͨ
    +40/
    Ͱ໋ྩΛϙʔτʹྲྀ͢
    1ZUIPO
    ΫϥΠΞϯτ͋Γ
    'JSFGPY
    ඪ४ʹ͸ೖͬͯͳ͍
    ಠࣗϏϧυͷ࡞੒͕ඞཁ
40. Any Question ?