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

DevTools for ITOPPLUS

Avatar for Siwat Kaolueng Siwat Kaolueng
November 30, 2022
Technology
0
18

DevTools for ITOPPLUS

Edge DevTools overview
Avatar for Siwat Kaolueng

Siwat Kaolueng

November 30, 2022
Tweet

More Decks by Siwat Kaolueng

See All by Siwat Kaolueng
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
11
Building Simple Collaborative Online IDE With AngularFire and Firepad
Avatar for Siwat Kaolueng perjerz
0
1k
RxJS in Angular
Avatar for Siwat Kaolueng perjerz
0
29
What's Angular View?
Avatar for Siwat Kaolueng perjerz
0
120
What's New, What's Next in Angular?
Avatar for Siwat Kaolueng perjerz
0
110
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
63

Other Decks in Technology

See All in Technology
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
18k
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
Avatar for tnir tnir
0
200
本当にわかりやすいAIエージェント入門
Avatar for segavvy segavvy
1
660
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
Avatar for katsukamaru shin1988
2
2.1k
An introduction to Claude Code SDK
Avatar for Akihiro Okuno choplin
2
1.2k
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
Avatar for takuya kikuchi tkikuchi1002
3
410
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
Avatar for CUEBiC Inc. cuebic9bic
2
170
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
Avatar for Takahiro Miyoshi sankichi92
1
1.1k
SREのためのeBPF活用ステップアップガイド
Avatar for Sohei Iwahori egmc
2
1.3k
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
Avatar for sato-s satos
5
3k
Microsoft Defender XDRで疲弊しないためのインシデント対応
Avatar for Kunii, Suguru sophiakunii
1
320
対話型音声AIアプリケーションの信頼性向上の取り組み
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
3
1.1k

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.4k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.1k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k

Transcript

  1. DevTools for ITOPPLUS Siwat Kaolueng https://perjerz.netlify.com

  2. Siwat Kaolueng (Jame) Senior Software Engineer - Optimizing Web app

    performance

  3. What you will learn - Overview - Element - Console

    - Source (Debugging) - Performance (Profiling) - Network - Application

  4. Overview

  5. Ctrl (Command) + Shift + I

  6. None
  7. None

  8. Element

  9. None

  10. Element - Edit CSS Layout in Element - Store in

    Global Variable - Force State - Break on

  11. Console

  12. None

  13. Source (Debugging)

  14. None

  15. Debugging - DOM - JavaScript

  16. None

  17. Return to the Source (Code)

  18. Performance (Profiling)

  19. None

  20. If you can’t measure it, you can’t improve it. Peter

    Drucker

  21. Network

  22. None

  23. Application

  24. None

  25. Application - Service Worker - Cache - IndexedDB - Local

    Storage - Session Storage - Cookies

  26. Resources

  27. Resources - Overview of DevTools - Microsoft Edge Development |

    Microsoft Learn - What's New in DevTools - Chrome Developers