Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DevTools for ITOPPLUS

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Siwat Kaolueng Siwat Kaolueng
November 30, 2022
Technology
20
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
Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile
Avatar for Siwat Kaolueng perjerz
0
9
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
17
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
36
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
120
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
68

Other Decks in Technology

See All in Technology
AI時代 に増える データ活用先
Avatar for ono.takayuki takahal
0
330
Rapid Start: Faster Internet Connections, with Ruby's Help
Avatar for kazuho kazuho
2
830
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
4
340
20260428_Product Management Summit_tadokoroyoshiro
Avatar for tadokoro_yoshiro tadokoro_yoshiro
14
15k
目的ファーストのハーネス設計 ~ハーネスの変更容易性を高めるための優先順位~
Avatar for Gota gotalab555
8
2.5k
AndroidアプリとCopilot Studioの統合
Avatar for なかしょ nakasho
0
170
プラットフォームエンジニアリングの実践 - AWS コンテナサービスで構築する社内プラットフォーム / AWS Containers Platform Meetup #1
Avatar for Masatoshi Hayashi literalice
1
220
AgentCore Managed Harness を使ってみよう
Avatar for やくも yakumo
2
250
Do Vibe Coding ao LLM em Produção para Busca Agêntica - TDC 2026 - Summit IA - São Paulo
Avatar for Jessica Pauli de C Bonson jpbonson
3
160
【技術書典20】OpenFOAM（自宅で深める流体解析）流れと熱移動（２）
Avatar for kamakiri1225 kamakiri1225
0
290
Good Enough Types: Heuristic Type Inference for Ruby
Avatar for Shia riseshia
1
320
"おまじない"を卒業する　ボイラープレート再入門
Avatar for shun shunsuke_1b
1
120

Featured

See All Featured
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
210
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
6.8k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
350
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
49k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
110
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
6
35k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
680
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.9k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
980

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