そんな機能あったのかChrome DevTool -Web制作に役立ってほしい-

9/13開催のFukuokaJSでのLT用資料です。

よく行うChromeDevToolでの操作のショートカットの紹介と、Animationの調整時に便利な機能や、既存サイトの編集内容の保存を可能にする機能を紹介しています。

資料には動画を埋め込んでいるので、動画が再生出来るKeynoteファイルはこちら
https://www.dropbox.com/s/9rqrg341fr913kc/0913_fukuokajs.key?dl=0

Transcript

1. ͦΜͳػೳ͋ͬͨͷ͔
   $ISPNF
   EFW
   UPPM
   ʙ8FC੍࡞ʹ໾ཱͬͯ΄͍͠ʙ
2. Hobby |> Family |> Organizations |> ਫӭ
   
   ཱྀߦ ࠺
   
   ଉࢠ ࡀ Ԟ԰
   ޹ଠ࿠ ίʔλϩʔ
3. Կͷ-5ʁ $ISPNF
   %FW5PPMTͷػೳͷ঺հʂ
   ൃදޙɺ࣌ؒʹ༨༟͕͋Ε͹ɺ
   ձ৔ʹ͍Δํୡ͔Β΋ʮ͜ͷػೳ͍͍Αʂʯͱ͍͏ ͷΛฉ͖͍ͨͱࢥ͍·͢ʂ
   5XJUUFSͰ΋GVLVPLBKTͰͥͻྲྀ͍ͯͩ͘͠͞ʂ
4. γϣʔτΧοτܥ w &MFNFOUTλϒͷૢ࡞
   w ଐੑ஋ͷૢ࡞
   w εΫϦʔϯγϣοτͷͱΓํ
   w ༨ஊɿίϚϯυύϨοτ໘ന͍Α
5. &MFNFOUTλϒͰͷૢ࡞
6. &MFNFOUTλϒͰͷૢ࡞ ˢˣ
   
   
   ্ԼʹཁૉҠಈ
   ˠ
   
   
   ɹখཁૉΛల։
   ˡ
   
   
   ɹখཁૉΛด͡Δ
7. &MFNFOUTλϒͰͷૢ࡞ &OUFS
   
   ଐੑ஋Λฤू
   5BC
   
   
   
   ࣍ͷଐੑ஋΁
   '
   
   
   ɹ)5.-Λฤू
8. ଐੑ஋ͷૢ࡞ ⌥
   
   ˢˣ
   
   
   ͮͭ 4IJGU
   
   ˢˣɹͮͭ ˢˣɹ্ͮͭ͛Լ͛ 㵰
   
   ˢˣ
   ͮͭ
   $USM
   
   ˢˣ
   8JO
9. εΫγϣ 㵰
   
   4IJGU
   
   1
   ͰίϚϯυ΢Οϯυ΢Λ։͘
   ʮDBQUVSFʯͱλΠϓ͢ΔͱߜΓ΍͍͢ ˡ
   શମΛΩϟϓνϟ
   ˡ
   બ୒தͷཁૉର৅
   ˡ
   ࠓදࣔ͞Ε͍ͯΔൣғର৅
10. ίϚϯυϖΠϯ
11. Ξχϝʔγϣϯ ɽӈ্ͷộ͔Βʮ4IPX
    DPOTPMF
    ESBXFSʯ ΋͘͠͸
    &4$
    ɽग़ݱͨ͠$POTPMF
    ESBXFSͷࠨ্ͷộ͔Β"OJNBUJPOΛબ୒͢Δ "OJNBUJPO
    λϒͷग़͠ํ
12. Ξχϝʔγϣϯ
13. Ξχϝʔγϣϯ ɽΞχϝʔγϣϯ͕͔͔͍ͬͯΔཁૉΛ ಛఆͯ͘͠ΕΔ
    ɽʮ4UZMFTʯͰΞχϝʔγϣϯλΠϛϯ άͷมߋ͕ग़དྷΔ
14. Ξχϝʔγϣϯ (6*ͰΞχϝʔγϣϯͷ࣌ؒΛௐ੔Ͱ͖Δɻ
15. ΦʔόʔϥΠυ طଘϖʔδͷ$44Λฤूͯ͠ɺฤू݁ ՌΛϩʔΧϧʹอଘ͓͚ͯ͠Δػೳɻ
16. ΦʔόʔϥΠυ 
    
    
    4PVSDFύωϧʹҠಈ
    
    
    
    ΑΓ0WFSSJEFTΛબ୒
    
    
    
    "EE
    GPMEFS
    GPS
    0WFSSJEFTΛΫϦοΫ
    
    
    
    ద౰ͳσΟϨΫτϦΛબ୒ɻ
17. ΦʔόʔϥΠυ  1BHFλϒΑΓฤू͍ͨ͠$44ϑΝΠϧΛ બ୒
     4BWF
    GPS
    0WFSSJEFTΛબ୒
18. ΦʔόʔϥΠυ ͓޷͖ͳ$44ϓϩύςΟ Λฤूͯ͠ɺϦϩʔυ͠ ͯɺ͋Βͼͬ͘Γɻ
19. ΦʔόʔϥΠυ Ͳ͜Λฤूͨ͠ͷ͔ࠩ෼ ΋Θ͔Γ·͢ʂ
20. Ҏ্Ͱ͢ʂ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ