Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FRDT-study/ChromeDevTools

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for daemaeda daemaeda
January 23, 2019
Education
0
40

 FRDT-study/ChromeDevTools

Avatar for daemaeda

daemaeda

January 23, 2019
Tweet

More Decks by daemaeda

See All by daemaeda
FRDT-study/spiral-ec
Avatar for daemaeda daemaeda
0
38

Other Decks in Education

See All in Education
滑空スポーツ講習会2025(実技講習）EMFT学科講習資料/JSA EMFT 2025
Avatar for JSA seminar jsaseminar
0
220
Web Application Frameworks - Lecture 3 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
Going over the Edge
Avatar for Jono Alderson jonoalderson
0
340
2025年の本当に大事なAI動向まとめ
Avatar for Frieve-A frievea
0
170
Cifrado asimétrico
Avatar for i-rochiño irocho
0
380
国際卓越研究大学計画｜Science Tokyo（東京科学大学）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
47k
CSS3 and Responsive Web Design - Lecture 5 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
1
3.1k
TinyGoをWebブラウザで動かすための方法+アルファ_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
110
卒論の書き方 / Happy Writing
Avatar for kaityo256 kaityo256
PRO
54
28k
LotusScript でエージェント情報を出力してみた
Avatar for Haruyuki Nakano harunakano
0
120
子どもが自立した学習者となるデジタルの活用について
Avatar for Naoki Kato naokikato
PRO
0
180
【旧：ZEPメタバース校舎操作ガイド】
Avatar for aini school小中等部 ainischool
0
790

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.8k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
72
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
0
1.9k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
0
270
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
410
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
57
50k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k

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෼