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
34
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
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
2
920
extension 現場で使えるXcodeショートカット一覧
Avatar for とんとんぼ ktombow
0
220
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
Avatar for Sarah Wells sarahjwells
0
120
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
Avatar for marokiki marokiki
0
170
そのWAFのブロック、どう活かす？ サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
Avatar for 株式会社カミナシ kaminashi
0
110
Git in Team
Avatar for Yasunobu Kawaguchi kawaguti
PRO
2
300
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
Avatar for oracle4engineer oracle4engineer
PRO
2
140
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
Avatar for you（@youtoy） you
PRO
0
230
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
Avatar for Takuto Nagami logica0419
1
480
o11yで育てる、強い内製開発組織
Avatar for _awache _awache
3
130
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
Avatar for Sansan R&D sansan_randd
0
120
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
Avatar for Taichi Nakamura taichinakamura
0
510

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
187
28k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
850
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
680
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k

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