Firefox DevTools

Transcript

1. 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. 2.

   BCPVUNF http:// dynamis.jp @dynamitter facebook.com/ dynamis mailto: Tomoya ASAI <dynamis

   mozilla-japan.org> @
3. 3.

   'JSFCVH
   ͸ʁ ࠓ೔͸ѻ͍·ͤΜɻ طʹ஌ͬͯ·͢ΑͶʁ ৘ใ΋͍ͬͺ͍͋ΔΑͶʁ ΈΜͳͰษڧͯ͠Ͷɻ

4. 4.

   Page Source Inspector Style Editor Web Console Scratchpad Script Debugger

   ... Agenda
5. 5.

   1BHF
   4PVSDF ιʔε͕ݟΒΕΔͷ͕
   8FC

6. 6.

   None
7. 7.

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

   
   ൣғબ୒ͯ͠ӈΫϦοΫ
8. 8.

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

9. 9.

   None
10. 10.

    $ISPNF
    63-
    'JSFGPY
    ͷ
    6*
    ෦෼
    ΋

11. 11.

    *OTQFDUPS
    ཁૉΛௐࠪ͢Δπʔϧ
    γϣʔτΧοτ
    $USM "MU *
    Ϛ΢εΦʔόʔͰཁૉΛબ୒
    

    ਌ࢠͷཁૉ͸ύϯͣ͘Ϧετ· ͨ͸
    )5.-
    ϏϡʔͰબ୒͢Δ
    બ୒
    )JHIMJHIUFS
    ࣌ͷӄ͕Ξχ ϝʔγϣϯͰҠಈͯ֨͠޷͍͍
12. 12.

    *OTQFDUPS
    
    )5.-
    &EJUPS
    )5.-
    ϦΞϧλΠϜΤσΟλ
    ଐੑ͸μϒϧΫϦοΫͰฤूՄ
    ӈΫϦοΫ͔Βཁૉͷ࡟আɺ *OUFS)5.-0VUFS)5.-
    ίϐʔ
    ΑΓڧྗͳΤσΟλ
    

    5SFF&EJUPS
    ΋ݱࡏ։ൃத point!
13. 13.

    *OTQFDUPS
    
    4UZMF
    *OTQFDUPS
    $44
    ϦΞϧλΠϜΤσΟλ
    ελΠϧͷฤूɺΦϯΦϑ
    ܭࢉ஋ελΠϧͷ֬ೝ
    ϓϩύςΟϔϧϓ͸
    .%/
    

    ελΠϧมߋ΋Ξχϝʔγϣϯ ͯ͠
    'PYZ
    ͳײ͡ɻ ɾɾ 
14. 14.

    None
15. 15.

    None
16. 16.

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

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

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

18. 18.

    None
19. 19.

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

20. 20.

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

21. 21.

    None
22. 22.

    None
23. 23.

    8FC
    ίϯιʔϧ
    جຊతͳίϯιʔϧ
    γϣʔτΧοτ
    $USM "MU ,
    දࣔҐஔ
    ্ɺԼɺผ΢Οϯυ΢
    

    ϝοηʔδͷϑΟϧλ
    'Y
    ͔Β͸ίϯιʔϧ։͘લͷ ϩάϝοηʔδ΋ه࿥͞ΕΔ point!
24. 24.

    ؆қ
    +BWB4DSJQU
    ࣮ߦ؀ڥ
    ؆қ
    +4
    ࣮ߦ؀ڥ
    ίʔυͷࣗಈิ׬΋͋Γ
    ஫
    'Y
    ͔ΒϩέʔγϣϯόʔͰͷ KBWBTDSJQU
    63-
    ͸ϖʔδݖݶͳ͠
    ιʔγϟϧΤϯδχΞϦϯάରԠ

    
    ࠔΔͳΒ
    *OIFSJU1SJODJQBM
    ΞυΦϯ
    IUUQTBEEPOTNP[JMMBPSH pSFGPYBEEPOJOIFSJUQSJODJQBM point!
25. 25.

    ίϯιʔϧར༻࣌ͷ஫ҙ
    ίϯιʔϧ͸
    4BOECPY
    ؀ڥ
    8FC
    ϖʔδͷཁૉʹ͸
    XJOEPX
    ܦ༝ͰΞΫηε͢Δඞཁ͋Γ ྫ͑͹ɺϖʔδίϯςΩετʹ άϩʔόϧม਺Λఆٛ͢Δʹ͸ XJOEPXGPP
    
    WBMVF
    

    *OTQFDUPS
    Ͱબ୒͍ͯ͠Δཁૉ ʹ͸
    
    ม਺ͰΞΫηεՄೳ point! point!
26. 26.

    /FUXPSL
    3FRVFTU
    *OTQFDUPS
    )551
    ϔομͷ֬ೝ
    ίϯιʔϧͷ
    63-
    ΛΫϦοΫ
    3FRVFTU
    
    3FTQPOTF
    ϔομ
    ௨৴࣌ؒ΍
    $PPLJF
    ͷ֬ೝ
    

    )551
    #0%:
    ΋ه࿥Մೳ
    ӈΫϦοΫϝχϡʔ͔Βʮཁٻ ϘσΟͱԠ౴ϘσΟΛه࿥ʯ point!
27. 27.

    4DSBUDIQBE &DMJQTF
    0SJPO
    ಺ଂͷ
    +4
    ࣮ߦ؀ڥ

28. 28.

    None
29. 29.

    4DSBUDIQBE
    &DMJQTF
    0SJPO
    ΤσΟλΛ಺ଂ
    γϣʔτΧοτ
    4IJGU '
    ίʔυΛ࣮ߦɺௐࠪɺදࣔ
    ௐࠪ
    ΠϯεϖΫλը໘Λදࣔ

    
    දࣔ
    ࣮ߦ݁ՌΛίϝϯτͰૠೖ
    બ୒ൣғ͚ͩΛ࣮ߦՄೳʂ point!
30. 30.

    4DSBUDIQBE
    ར༻࣌ͷ஫ҙ
    4DSBUDIQBE
    ΋
    4BOECPY
    ؀ڥ
    8FC
    ϖʔδͷཁૉʹ͸
    XJOEPX
    ܦ༝ͰΞΫηε͢Δඞཁ͋Γ ྫ͑͹ɺϖʔδίϯςΩετʹ άϩʔόϧม਺Λఆٛ͢Δʹ͸ XJOEPXGPP
    
    WBMVF point!

31. 31.

    4DSBUDIQBE
    GPS
    $ISPNF
    $POUFOU
    ͚ͩͰͳ͘
    $ISPNF
    ؀ ڥͰ΋ར༻Մೳ
    BCPVUDPOpH
    Ͱ࣍ͷઃఆΛ EFWUPPMTDISPNFFOBCMFEUSVF
    ʮ࣮ߦ؀ڥʯϝχϡʔ͕௥Ճ ֦ுػೳ΍
    'JSFGPY
    ຊମΛ։ൃ͢

    Δ࣌ʹศརͰ͢ point!
32. 32.

    4DSJQU
    %FCVHHFS ࠷୹Ͱ
    'JSFGPY
    
    ໨ඪʹ։ൃத

33. 33.

    None
34. 34.

    4DSJQU
    %FCVHHFS
    +BWB4DSJQU
    σόοΨͰ͢
    γϣʔτΧοτ
    $USM "MU 4
    ݱࡏ
    /JHIUMZ
    ͰσϑΥϧτΦϑ EFWUPPMTEFCVHHFSFOBCMFEUSVF

    
    ϒϨʔΫϙΠϯτɺεςοϓ࣮ ߦɺίʔϧελοΫɺείʔϓม ਺ͳͲ͸طʹ࣮૷ࡁΈ
35. 35.

    BOE
    NPSF %FWFMPQFS
    5PPMCBS 4UZMF
    &EJUPS
    ͷڧԽ ٙࣅΫϥεͷϩοΫɺࣗಈิ׬ɺૢ࡞ੑ޲্ *OTQFDUPS
    ͷڧԽ ϨΠΞ΢τ৘ใͷදࣔɺෳ਺ಉ࣌
    )JHIMJHIU RVFSZ4FMFDUPS
    ݕࡧϘοΫε 4PVSDF.BQ ͳͲͳͲ

36. 36.

    ͓·͚ɻ

37. 37.

    .BSJPOFUUF ͋ͳͨͷ
    'JSFGPY
    ΋ૢΓਓܗ

38. 38.

    ϚϦΦωοτ
    ϦϞʔτςετυϥΠό
    4FMFOJVN
    తͳ΋ͷͰ͢ #(
    ։ൃͷͨΊ༏ઌ࣮૷͞Εͨ
    +40/
    Ͱ໋ྩΛϙʔτʹྲྀ͢
    1ZUIPO
    ΫϥΠΞϯτ͋Γ

    
    'JSFGPY
    ඪ४ʹ͸ೖͬͯͳ͍
    ಠࣗϏϧυͷ࡞੒͕ඞཁ
39. 39.

    None
40. 40.

    Any Question ?