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
1.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
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
Avatar for AEON aeonpeople
1
200
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
170
StrandsとNeptuneを使ってナレッジグラフを構築する
Avatar for やくも yakumo
1
100
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
140
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.6k
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
Avatar for msysh msysh
3
160
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
Avatar for Niishi Kubo n11sh1
0
130
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
1
280
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.8k
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
310
CDKで始めるTypeScript開発のススメ
Avatar for つくぼし tsukuboshi
1
370

Featured

See All Featured
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
49
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.1k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
140
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
52k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k

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