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
19

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
16
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
35
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
120
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
65

Other Decks in Technology

See All in Technology
AWSと生成AIで学ぶ！実行計画の読み解き方とSQLチューニングの実践
Avatar for やくも yakumo
2
120
AI with TiDD
Avatar for Shiraji shiraji
1
330
技術選定、下から見るか？横から見るか？
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
170
Oracle Cloud Infrastructure：2025年12月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
180
チームで安全にClaude Codeを利用するためのプラクティス / team-claude-code-practices
Avatar for tomoki10 tomoki10
4
1.8k
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1k
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.6k
Node vs Deno vs Bun 〜推しランタイムを見つけよう〜
Avatar for すずとも kamekyame
1
120
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
1
130
迷わない！AI×MCP連携のリファレンスアーキテクチャ完全ガイド
Avatar for CData Software Japan cdataj
0
120
戰略轉變：從建構 AI 代理人到發展可擴展的技能生態系統
Avatar for Bo-Yi Wu appleboy
0
180
業務の煩悩を祓うAI活用術108選 / AI 108 Usages
Avatar for 株式会社スマートバンク smartbank
9
19k

Featured

See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
58
41k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
130
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
2.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.3k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
130
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
220
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
93

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