Firefox DevTools

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

6. None

7. ϖʔδͷιʔεΛදࣔ
   ͋Γ·͢ΑͶɺ౰વɻ
   γϣʔτΧοτ
   $USM 6
   'Y
   ͔Βߦ൪߸දࣔʹରԠ
   બ୒ͨ͠෦෼ͷιʔεΛදࣔ

   
   ൣғબ୒ͯ͠ӈΫϦοΫ

8. *OTQFDUPS σβΠφʔͷࡾछͷਆثʂ

9. None

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
    ͳײ͡ɻ ɾɾ 
14. None
15. None

16. %
    *OTQFDUPS
    5JMU
    %0.
    ߏ଄Λ̏%ՄࢹԽ
    ςΫϊϩδʔͷແବݣ͍ ։ൃ࣌͸ແବػೳຬࡌͩͬͨ
    ը໘֎ཁૉͷબ୒΋؆୯
    

    %
    දࣔˍબ୒πʔϧͰ͢ point!

17. 4UZMF
    &EJUPS ελΠϧΨϯΨϯॻ͖׵͑ͯΈΑ͏

18. None

19. 4UZMF
    &EJUPS
    ϖʔδͷશ
    $44
    Ұׅฤू
    ฤूͨ͠
    $44
    ͸อଘՄೳ
    ৽ن
    $44
    ࡞੒΍ಡΈࠐΈ΋Մೳ
    ϑΝΠϧ୯ҐͷΦϯΦϑ΋ point!

20. 8FC
    $POTPMF 'JSFGPY
    
    ͔Βͷجຊπʔϧ

21. None
22. None

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
    ࣮ߦ؀ڥ

28. None

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
    
    ໨ඪʹ։ൃத

33. None

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
    ඪ४ʹ͸ೖͬͯͳ͍
    ಠࣗϏϧυͷ࡞੒͕ඞཁ
39. None

40. Any Question ?