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
21
0

DevTools for ITOPPLUS

Edge DevTools overview

Avatar for Siwat Kaolueng

Siwat Kaolueng

November 30, 2022

More Decks by Siwat Kaolueng

See All by Siwat Kaolueng
Frontend Engineering with Agentic AI: An MCP-Powered Development Lifecycle
Avatar for Siwat Kaolueng perjerz
0
65
Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile
Avatar for Siwat Kaolueng perjerz
0
15
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
20
Building Simple Collaborative Online IDE With AngularFire and Firepad
Avatar for Siwat Kaolueng perjerz
0
1.1k
RxJS in Angular
Avatar for Siwat Kaolueng perjerz
0
40
What's Angular View?
Avatar for Siwat Kaolueng perjerz
0
130
What's New, What's Next in Angular?
Avatar for Siwat Kaolueng perjerz
0
130
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
74

Other Decks in Technology

See All in Technology
Atlassian Cloudサポート業務でのAIエージェント活用事例
Avatar for Makky12 smt7174
0
490
トヨタ⽣産⽅式(TPS)⼊⾨
Avatar for Recruit recruitengineers
PRO
1
510
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
53k
クラウドセキュリティ入門　～安全なクラウド利用のための基礎知識～
Avatar for LHazy lhazy
10
7.8k
オートロックマンションなのに、各部屋は施錠なし！？ 攻撃者が組織内ネットワークで大暴れする理由 / The Front Door Is Locked, but the Rooms Are Wide Open: Why Attackers Move Freely Inside Enterprise Networks
Avatar for NTT docomo Business nttcom
1
1.5k
AI ネイティブな組織に Gemini Enterprise Agent Platform がなぜ必要なのか
Avatar for Asei Sugiyama asei
1
170
【CEDEC2026】コードレビュー支援ツール開発から学ぶ：LLMを用いた業務システムの実践的な運用設計と誤出力対策
Avatar for Cygames, Inc. cygames
PRO
0
580
MIRU 2026 チュートリアル
Avatar for Keisuke Fujii keisuke198619
0
840
侵入は突然に 〜 IoTマルウェアと悪用される家庭の機器 ～ / When Intrusion Strikes: IoT Malware and the Abuse of Home Devices
Avatar for NTT docomo Business nttcom
0
1.5k
攻撃と防御で学ぶAI時代のプロダクトセキュリティ演習
Avatar for Recruit recruitengineers
PRO
1
460
Issue設計から始める仕様駆動開発 / 20260731 Mizuki Hirata
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
140
もう一度考える SRE チームの作り方・育て方 / Rethinking SRE #1: Building and Growing SRE Teams
Avatar for rrreeeyyy rrreeeyyy
6
990

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
A Soul's Torment
Avatar for Nat Ma seathinner
6
3.4k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.2k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
760
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
480
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
360
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.1k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k

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