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

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
24
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
83
Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile
Avatar for Siwat Kaolueng perjerz
0
28
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
23
Building Simple Collaborative Online IDE With AngularFire and Firepad
Avatar for Siwat Kaolueng perjerz
0
1.2k
RxJS in Angular
Avatar for Siwat Kaolueng perjerz
0
41
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
140
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
77

Other Decks in Technology

See All in Technology
ファミコンでPHPを動かす / PHP on the Famicom side b
Avatar for HASEGAWA Tomoki tomzoh
0
140
USB PDを使ってスマホを労わりたい
Avatar for らすぴー raspython3
0
160
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
900
Essential architectural thinking (revised edition)
Avatar for Uwe Friedrichsen ufried
0
110
freeeらしさをAIとともに作る / Creating the freee Experience with AI
Avatar for ymrl ymrl
0
220
More Freedom on the Same Shared GPU Cluster: A Small Team’s Experience with vCluster
Avatar for NTT docomo Business nttcom
0
150
メルペイ 会計システム概要と歴史
Avatar for mewuto mewuto
0
210
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
2
790
子育てエンジニアの可処分時間が減っても成長を諦めない戦い方
Avatar for aki sudoakiy
6
4.5k
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
Avatar for Riya Amemiya riyaamemiya
0
260
オンラインゲームのシステム全体像 - コロプラ 2026年度 新卒研修
Avatar for COLOPL Inc. colopl
0
1.1k
"優秀な誰か"の下位互換にならないために
Avatar for Yuto Nagai(Future) yut0naga1_fa
1
1.7k

Featured

See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8.1k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.5k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
880
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.7k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
620
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
390
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
400
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k

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