Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

DevTools for ITOPPLUS

Avatar for Siwat Kaolueng Siwat Kaolueng
November 30, 2022
Technology
21
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
Frontend Engineering with Agentic AI: An MCP-Powered Development Lifecycle
Avatar for Siwat Kaolueng perjerz
0
77
Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile
Avatar for Siwat Kaolueng perjerz
0
24
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
22
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
40
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
130
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
77

Other Decks in Technology

See All in Technology
HHKBエバンジェリストになる方法
Avatar for 941 941
0
110
2026-09-18 gotanda.sre Terraformで複数環境作ったり、複数Stateに分割したりそれとTerragrunt / Terraform multi envs and multi states
Avatar for SUZUKI Masashi masasuzu
1
410
データ_AIの事業の勝敗をわけるもの
Avatar for KJ(Kenji Matsuda) nek0128
0
390
安心して変更できるWebフロントエンドの作り方
Avatar for Hiroyuki ANAI pirosikick
5
2.6k
空間オーディオで過去の 自分（ゴースト）と競うランニング 〜HealthKitのルートを足音に変える実装〜
Avatar for Nao-RandD nao_randd
0
220
DEFCON_CHV_CTF_Write-up.pdf
Avatar for bata_24 bata_24
0
150
作品が生態系になった ─ Mini Tokyo 3D から世界へ
Avatar for 草薙昭彦 nagix
0
190
20260912_スクラムにジェネラリストは必要か
Avatar for ryugen04 ryugen04
0
420
OpenTelemetry eBPF Instrumentationの舞台裏 / Behind the Scenes of OpenTelemetry eBPF Instrumentation
Avatar for ymotongpoo ymotongpoo
4
1.3k
SREは、MCPとAutopilotをこう使え！
Avatar for kazumax55 kazumax55
2
840
越境するなら専門用語を使うな高校校歌 / If you wanna cross border, you shouldn't use jargon
Avatar for VTRyo vtryo
0
140
beyond jj: config & tools ecosystem
Avatar for André Arko indirect
0
490

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
580
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
550
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
290
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
370
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
280
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
380
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k

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