FRDT-study/ChromeDevTools

Transcript

1. Chrome DevTools ษڧձ 2019/01/23
2. ໨త • ʮ͜ΕͰ͖Δ͔ͳʯ
 ˠࣗ෼ͰݕূͰ͖ΔΑ͏ʹͳΔ • ʮݪҼΘ͔Γ·ͤΜʯʮͳ͔ͥಈ͖·ͤΜʯ
 ˠগ͠Ͱ΋͋ͨΓΛ͚ͭͯௐࠪґཔΛग़ͤΔΑ͏ʹͳΔ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹʢɹɹɹɹɹ࣮ɹɹɹɹɹҊɹɹɹɹɹ݅ɹɹɹɹɹਐɹɹɹɹɹ·ɹɹɹɹɹͶɹɹɹɹɹ͑ɹɹɹɹɹʣ ͭ·ΓɿDevToolsΛ࢖͍͜ͳͤΔਓΛ૿΍ͯ͠
 ɹɹɹɹෆ۩߹ൃݟʙվमͷ࣌ؒΛ୹ॖ͍ͨ͠
3. Chrome DevToolsͷ ىಈ
4. F12 or Command + Option + I or ӈΫϦοΫ ʼ ݕূ
5. Chrome DevToolsͰ Ͱ͖Δ͜ͱ
6. Ͱ͖Δ͜ͱ • Ϩεϙϯγϒදࣔ
 -ɹ༷ʑͳσόΠεαΠζͰͷϖʔδͷݟ͑ํΛݕূͰ͖Δ • Elements
 -ɹݱࡏද͍ࣔͯ͠ΔϖʔδͷHTML/CSS etc͕֬ೝͰ͖Δ
 -ɹHTML/CSSΛมߋͰ͖Δʢϖʔδߋ৽͢Δͱফ͑Δʣ • Console
 -ɹΤϥʔ͕֬ೝ͕Ͱ͖Δ
 -ɹJSͷσόοά৘ใ͕֬ೝͰ͖Δ
7. Ͱ͖Δ͜ͱ • Sources
 -ɹιʔεσΟϨΫτϦ͕֬ೝͰ͖Δ
 -ɹϑΝΠϧͷத਎͕֬ೝͰ͖Δ
 -ɹݱࡏͷϖʔδͷιʔε͕֬ೝͰ͖ΔʢSPදࣔͳΒSPιʔεʣ • Network
 -ɹϖʔδͷಡΈࠐΈʹ͔͔Δ࣌ؒΛࡉ͔֬͘ೝͰ͖Δ • Application
 -ɹࠓอ͍࣋ͯ͠ΔΩϟογϡ΍ηογϣϯΛ֬ೝͰ͖Δ
 ɹʢ࡟আ΋Մೳʣ
8. ΍ͬͯΈΑ͏
9. ΍Δ͜ͱ • OLIVE des OLIVE ຊ൪αΠτɹϥϯΩϯάϖʔδ • ඇදࣔதͷձһՁ֨ͱձһՁ֨ϥϕϧΛදࣔ • ଧͪফ͞ΕͨఆՁˠηʔϧՁ֨ˠձһՁ֨ͷॱͰදࣔ • ηʔϧՁ֨ͱηʔϧՁ֨ϥϕϧ͸OLIVEͷ੨৭Ͱදࣔ • ੍ݶ࣌ؒɿ10෼
10. ׬੒ਤ
11. ΍ͬͯΈΑ͏̎
12. ΍Δ͜ͱ • ෡দ҇(EC) ຊ൪αΠτɹγϣοϓϦετϖʔδ • Google Maps͕දࣔ͞Εͳ͍ݪҼ͕஌Γ͍ͨ • ݪҼͱͳΔ෦෼Λमਖ਼͠ɺGoogle Maps͕දࣔ͞ΕΕ͹OK • ੍ݶ࣌ؒɿ10෼