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
7
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
36
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
67

Other Decks in Technology

See All in Technology
15年メンテしてきたdotfilesから開発トレンドを振り返る 2011 - 2026
Avatar for giginet giginet
PRO
2
260
VSCode中心だった自分がターミナル沼に入門した話
Avatar for Genki Sano sanogemaru
0
890
来期の評価で変えようと思っていること 〜AI時代に変わること・変わらないこと〜
Avatar for estie | エスティ estie
0
130
AWSで2番目にリリースされたサービスについてお話しします(諸説あります)
Avatar for Yuuki Yamashita yama3133
0
110
GitHub Actions侵害 — 相次ぐ事例を振り返り、次なる脅威に備える
Avatar for GMO Flatt Security flatt_security
12
7.2k
トイルを超えたCREは何屋になるのか
Avatar for 弁護士ドットコム bengo4com
0
120
BFCacheを活用して無限スクロールのUX を改善した話
Avatar for Ryuya Yanagi apple_yagi
0
140
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
Avatar for SmartHR 品質保証本部 qa
0
670
AI時代のシステム開発者の仕事_20260328
Avatar for 閃利㈱河村 純 sengtor
0
320
不確実性と戦いながら見積もりを作成するプロセス/mitsumori-process
Avatar for hiro@miraito hirodragon112
1
170
Data Enabling Team立ち上げました
Avatar for SansanTech sansantech
PRO
0
170
The essence of decision-making lies in primary data
Avatar for 株式会社カミナシ kaminashi
0
220

Featured

See All Featured
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
150
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
210
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
61
43k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
6
1.6k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
260
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
300
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k

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