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

by Kotaro Okuya

Slide 1

Slide 1 text

ͦΜͳػೳ͋ͬͨͷ͔ $ISPNFEFWUPPM ʙ8FC੍࡞ʹ໾ཱͬͯ΄͍͠ʙ

Slide 2

Slide 2 text

Hobby |> Family |> Organizations |> ਫӭ ཱྀߦ ࠺ ଉࢠ ࡀ Ԟ԰޹ଠ࿠ ίʔλϩʔ

Slide 3

Slide 3 text

Կͷ-5ʁ $ISPNF%FW5PPMTͷػೳͷ঺հʂ ൃදޙɺ࣌ؒʹ༨༟͕͋Ε͹ɺ ձ৔ʹ͍Δํୡ͔Β΋ʮ͜ͷػೳ͍͍Αʂʯͱ͍͏ ͷΛฉ͖͍ͨͱࢥ͍·͢ʂ 5XJUUFSͰ΋GVLVPLBKTͰͥͻྲྀ͍ͯͩ͘͠͞ʂ

Slide 4

Slide 4 text

γϣʔτΧοτܥ w &MFNFOUTλϒͷૢ࡞ w ଐੑ஋ͷૢ࡞ w εΫϦʔϯγϣοτͷͱΓํ w ༨ஊɿίϚϯυύϨοτ໘ന͍Α

Slide 5

Slide 5 text

&MFNFOUTλϒͰͷૢ࡞

Slide 6

Slide 6 text

&MFNFOUTλϒͰͷૢ࡞ ˢˣ্ԼʹཁૉҠಈ ˠɹখཁૉΛల։ ˡɹখཁૉΛด͡Δ

Slide 7

Slide 7 text

&MFNFOUTλϒͰͷૢ࡞ &OUFSଐੑ஋Λฤू 5BC࣍ͷଐੑ஋΁ 'ɹ)5.-Λฤू

Slide 8

Slide 8 text

ଐੑ஋ͷૢ࡞ ⌥ˢˣͮͭ 4IJGUˢˣɹͮͭ ˢˣɹ্ͮͭ͛Լ͛ 㵰ˢˣͮͭ $USMˢˣ 8JO

Slide 9

Slide 9 text

εΫγϣ 㵰4IJGU1ͰίϚϯυ΢Οϯυ΢Λ։͘ ʮDBQUVSFʯͱλΠϓ͢ΔͱߜΓ΍͍͢ ˡશମΛΩϟϓνϟ ˡબ୒தͷཁૉର৅ ˡࠓදࣔ͞Ε͍ͯΔൣғର৅

Slide 10

Slide 10 text

ίϚϯυϖΠϯ

Slide 11

Slide 11 text

Ξχϝʔγϣϯ ɽӈ্ͷộ͔Βʮ4IPXDPOTPMFESBXFSʯ ΋͘͠͸&4$ ɽग़ݱͨ͠$POTPMFESBXFSͷࠨ্ͷộ͔Β"OJNBUJPOΛબ୒͢Δ "OJNBUJPOλϒͷग़͠ํ

Slide 12

Slide 12 text

Ξχϝʔγϣϯ

Slide 13

Slide 13 text

Ξχϝʔγϣϯ ɽΞχϝʔγϣϯ͕͔͔͍ͬͯΔཁૉΛ ಛఆͯ͘͠ΕΔ ɽʮ4UZMFTʯͰΞχϝʔγϣϯλΠϛϯ άͷมߋ͕ग़དྷΔ

Slide 14

Slide 14 text

Ξχϝʔγϣϯ (6*ͰΞχϝʔγϣϯͷ࣌ؒΛௐ੔Ͱ͖Δɻ

Slide 15

Slide 15 text

ΦʔόʔϥΠυ طଘϖʔδͷ$44Λฤूͯ͠ɺฤू݁ ՌΛϩʔΧϧʹอଘ͓͚ͯ͠Δػೳɻ

Slide 16

Slide 16 text

ΦʔόʔϥΠυ 4PVSDFύωϧʹҠಈ ΑΓ0WFSSJEFTΛબ୒ "EEGPMEFSGPS0WFSSJEFTΛΫϦοΫ ద౰ͳσΟϨΫτϦΛબ୒ɻ

Slide 17

Slide 17 text

ΦʔόʔϥΠυ 1BHFλϒΑΓฤू͍ͨ͠$44ϑΝΠϧΛ બ୒ 4BWFGPS0WFSSJEFTΛબ୒

Slide 18

Slide 18 text

ΦʔόʔϥΠυ ͓޷͖ͳ$44ϓϩύςΟ Λฤूͯ͠ɺϦϩʔυ͠ ͯɺ͋Βͼͬ͘Γɻ