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

Chrome Devtools使いこなしたい/I want to master devtool

69b4dadef85efe143ac825b62d36ed7c?s=47 果物リン
February 02, 2022
Programming
3
1.1k

Chrome Devtools使いこなしたい/I want to master devtool

みんなの技教えて

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

February 02, 2022
Tweet

More Decks by 果物リン

See All by 果物リン
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
0
56
読み上げチャット＋映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
0
10
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
1
160
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
6
610
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
2
300
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
3
1.1k
[社内LT]元窓使いで林檎教信者ですが窓使いに転生します/I'm an ex-windowman, a follower of the apple cult, but I'm turning into a windowman.
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
0
240
読書から始めるポモドーロ・テクニック/The Pomodoro Technique, starting with reading
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
0
1.1k
[社内LT]おいでよNuxtの森/Wellcome to Nuxt
69b4dadef85efe143ac825b62d36ed7c?s=48 fruitriin
2
630

Other Decks in Programming

See All in Programming
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
198d69383210fbec8c6bea4a35863c9d?s=48 tippy
1
3.2k
Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20
41c9dedd1b4c53ace82e040bb09334fe?s=48 tamago3keran
1
160
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
2
1.2k
OSS貢献を気軽にしたい Let's Go Talk #1
Aa0368c69701536321af9db1ae552b45?s=48 yuyaabo
2
240
Git操作編
A3efba75cfbb0b7d5248eb74d1d29d79?s=48 smt7174
2
240
パスワードに関する最近の動向
8fd1ae6548d5ab14139c8d8032b76ee1?s=48 kenchan0130
1
320
SwiftUIで「意図」を伝える / swiftui_intention
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
2
150
アジャイルで始める データ分析基盤構築
384e4d8bab8ac2a5e6f64dab1300c491?s=48 nagano
1
900
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
C54e383f9597a63832fcc1c2547c7540?s=48 turamy
1
210
kintoneでランダム取得を作ってみた（imoniCamp 2022-07-27)
F9904a15202c8ead8e638fc6fa659e33?s=48 shokun1108
0
140
Now in Android Overview
62384887995a0ce07ec4f86b89f5ec9e?s=48 aosa4054
0
400
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
490

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
6
570
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
Visualization
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
125
12k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.6k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Happy Clients
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
89
5.6k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
62
10k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
13
1.4k
Building Better People: How to give real-time feedback that sticks.
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
344
17k

Transcript

  1. Chrome DevTool s ࢖͍͜ͳ͍ͨ͠ Ռ෺Ϧϯ גࣜձࣾελσΟετ 2022/02/02 Studist Lightning Talks

    #46

  2. ࣗݾ঺հ • Vue.js͕޷͖ • Լखͷԣ޷͖આ͋Δ • ΋͘͠͸׬શʹཧղͨ͠ͱ 
 φχϞϫΧϥφΠͷڱؒ

  3. DevTools࢖͍͜ͳ͍ͨ͠ ಛʹ໘നΈͷͳ͍εϥΠυ

  4. Tips • ࠓͷDevTools͸೔ຊޠԽͰ͖Δͧʂ

  5. • Perfomance • Element • Console • Sorce

  6. Performanceλϒ • ه࿥தͷ஋͕ͱΕΔ

  7. ͜Μͳײ͡

  8. ͜ͷลΛ޿͛Δ

  9. ͔͔ͬͯΔ࣌ؒ

  10. ԿΛ໨ࢦͯ͠վળ͍ͯ͘͠΂͖͔ • ࡉ͔͘ௐ੔͢ͱ੾Γ͕ͳ͍ • Webϑϩϯτతʹ͸60FPSΛ໨ࢦ͢ͷ͕Αͦ͞͏ • Ϣʔβʔͷૢ࡞ʹରͯ͠100msͰԿΒ͔ͷϦΞΫγϣϯ͕͋Δ ͱຬ଍ײ͋Δ • 1000ms

    ͑͜ΔͳΒ͙Δ͙Δ͢Δͱ͔

  11. ͳΜ͔஗͍ͳʁͱࢥͬͨΒ PerformanceλϒΛݟͯΈΑ͏

  12. ͓͢͢Ίຊ

  13. Elementλϒ HTML Style

  14. Element HTML

  15. Cmd+C, VͰίϐϖ DelͰ࡟আ μϒϧΫϦοΫͰฤू

  16. Cmd+C, VͰίϐϖ DelͰ࡟আ μϒϧΫϦοΫͰฤू

  17. λάͷߏ଄͍͡Γ͍ͨͱ͖͸ HTMLͱͯ͠ฤू

  18. Element HTML Style

  19. Element HTML Style

  20. બ୒தͷElementͷ style λάͱͯ͠ࢦఆ

  21. બ୒தͷElementͷ style λάͱͯ͠ࢦఆ ৽͍͠ελΠϧͷઃఆɺ࡟আ

  22. બ୒தͷElementͷ style λάͱͯ͠ࢦఆ ৽͍͠ελΠϧͷઃఆɺ࡟আ

  23. ஋͸Ϛ΢εϗΠʔϧ΍ 
 ΩʔϘʔυͰ੾Γସ͑ΒΕΔ

  24. ίʔυ͍ͬͯ͡ίϯύΠϧ 
 →ϒϥ΢βΛݟΔΑΓ ϒϥ΢β্Ͱฤूͯ֬͠ೝ 
 →ίʔυʹ൓өͷ΄͏͕ૣ͍

  25. ελΠϧͷద༻༏ઌ౓

  26. hoverঢ়ଶͰݻఆ͍ͨ͠ͱ͖ ։͘

  27. % ࢦఆͱ͔΋ px ͰͰΔ ܭࢉࡁΈ 
 Computed #FFF -> rgb(255,

    255, 255) ʮ͜͜ʹͳ͔ͬͨΒͳ͍Ͱ͢Ͷʯ

  28. ๞͖ͨͷͰElement͜͜·Ͱ

  29. ConsoleͱSource

  30. debugger • ιʔείʔυʹ debugger Λ࢓ࠐΉͱ 
 DevToolsΛ։͍͍ͯΕ͹ͦ͜Ͱࢭ·Δ

  31. ιʔελϒʹͳΔ ϒϨʔΫϙΠϯτ࢓ࠐ·ͳͯ͘Α͍

  32. breakpoint Ͱࢭ·ͬͯΔ࠷தͷconsole͸ͦͷείʔϓ

  33. ͓͢͢Ίهࣄ • $_, $1, $(), $$(),ͱ͔͓΋͠Ζ͍Α • Chrome DevTools Console

    Ͱ࢖͑ΔศརͳίϚϯυ 
 https://zenn.dev/lollipop_onl/articles/eoz-devtools-console- commands