Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

DevTools for ITOPPLUS

Avatar for Siwat Kaolueng Siwat Kaolueng
November 30, 2022
Technology
24
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
90
Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile
Avatar for Siwat Kaolueng perjerz
0
28
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
23
Building Simple Collaborative Online IDE With AngularFire and Firepad
Avatar for Siwat Kaolueng perjerz
0
1.2k
RxJS in Angular
Avatar for Siwat Kaolueng perjerz
0
42
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
140
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
77

Other Decks in Technology

See All in Technology
AI時代、つくる力を自分たちの手に。 ──電通×KAG、アジャイルとAI駆動開発で挑む開発の変革
Avatar for yuukiyo yuukiyo
3
450
You Have Agency（サンキュー、Ruby）
Avatar for Koji SHIMADA snoozer05
PRO
5
650
Technical Project Manager の役割とやりがい、少しだけ AI
Avatar for Ryo Yoshii yoshiiryo1
0
570
2拠点SRE活動始めてみた | sogaoh's LT @ ホンマでっかSRE勉強会 #3
Avatar for Hisashi SOGA sogaoh
PRO
0
230
AX時代の自治体支援リソース再配分と役割分担の再構成：戦略とロードマップ（概要）
Avatar for Sayaka Isizuka sishi2026
0
170
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
3
1k
なぜ東京にいる私が、新潟の技術コミュニティを運営するのか by 八雲慎之助
Avatar for やくも yakumo
0
210
FinOpsを導入してマルチプロダクトのコスト最適化を実現する
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
110
Copilot Coworkで「みのるん式」やってみた
Avatar for みのるん minorun365
PRO
1
1.1k
Oracle Database Security 詳細解説
Avatar for oracle4engineer oracle4engineer
PRO
1
220
1週間、Opus封印でお願いします
Avatar for KintoTech_Dev kintotechdev
1
430
AI AgentによるEmbedded SREの取り組み
Avatar for norimichi.osanai tgidgd
1
320

Featured

See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.7k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
870
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
43k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
920
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
520
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
390
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
430
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
880
Designing for Performance
Avatar for Lara Hogan lara
612
70k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k

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