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
14
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
32
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
64

Other Decks in Technology

See All in Technology
Rustから学ぶ 非同期処理の仕組み
Avatar for skanehira skanehira
1
150
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
Avatar for Naoko Shinagawa ratsbane666
0
100
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
Avatar for oracle4engineer oracle4engineer
PRO
0
180
新アイテムをどう使っていくか？みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
Avatar for Akira Ouchi akkiesoft
0
340
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
Avatar for KASUYA, Daisuke daiksy
3
1.1k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
Avatar for Ryo WATANABE error96num
2
1.2k
いま注目のAIエージェントを作ってみよう
Avatar for Marimo supermarimobros
0
350
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
Avatar for Kosaku Ono kevinrobot34
1
120
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
Avatar for ヤマダ（北野） yamada_r
2
120
roppongirb_20250911
Avatar for Kuniaki IGARASHI igaiga
1
250
自作JSエンジンに推しプロポーザルを実装したい！
Avatar for Saji sajikix
1
190
Snowflake Intelligenceにはこうやって立ち向かう！クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
Avatar for harry gappy50
0
280

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
930
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
850
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k

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