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
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
Bref でサービスを運用している話
Avatar for Sugar Sato sgash708
0
220
スクラムを支える内部品質の話
Avatar for IIJ_PR iij_pr
0
160
How to install a gem
Avatar for André Arko indirect
0
2k
FlutterでPiP再生を実装した話
Avatar for 白井翔大 s9a17
0
240
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
5
1.3k
やさしいとこから始めるGitHubリポジトリのセキュリティ
Avatar for Yuta Matsumura tsubakimoto_s
3
2.1k
GitHub Advanced Security × Defender for Cloudで開発とSecOpsのサイロを超える: コードとクラウドをつなぐ、開発プラットフォームのセキュリティ
Avatar for yuriemori yuriemori
1
120
Cursor Subagentsはいいぞ
Avatar for Yuji Yamaguchi yug1224
2
130
Tour of Agent Protocols: MCP, A2A, AG-UI, A2UI with ADK
Avatar for Mete Atamel meteatamel
0
190
Databricks Lakehouse Federationで 運用負荷ゼロのデータ連携
Avatar for Kenji Matsuda nek0128
0
100
互換性のある（らしい）DBへの移行など考えるにあたってたいへんざっくり
Avatar for Takanori Sejima sejima
PRO
0
520
Kubernetesの「隠れメモリ消費」によるNode共倒れと、Request適正化という処方箋
Avatar for g0xu g0xu
0
170

Featured

See All Featured
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
160
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
98
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
720
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
280
HDC tutorial
Avatar for Michiel Stock michielstock
1
600
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k

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