Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DevTools for ITOPPLUS

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Siwat Kaolueng Siwat Kaolueng
November 30, 2022
Technology
0
20

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
Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile
Avatar for Siwat Kaolueng perjerz
0
1
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
JAWSDAYS2026_A-6_現場SEが語る 回せるセキュリティ運用～設計で可視化、AIで加速する「楽に回る」運用設計のコツ～
Avatar for s-hata shoki_hata
0
2.9k
[AEON TECH HUB #24] お客様の長期的興味の理解に向けて
Avatar for alpicola alpicola
0
120
Serverless Agent Architecture on Azure / serverless-agent-on-azure
Avatar for miyake miyake
1
160
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
1.1k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
Avatar for oracle4engineer oracle4engineer
PRO
8
7.1k
Abuse report だけじゃない。AWS から緊急連絡が来る状況とは？昨今の攻撃や被害の事例の紹介と備えておきたい考え方について
Avatar for kazzpapa3 kazzpapa3
1
160
us-east-1 に障害が起きた時に、 ap-northeast-1 にどんな影響があるか 説明できるようになろう！
Avatar for Kazuki Miura miu_crescent
PRO
13
3.9k
マネージャー版 "提案のレベル" を上げる
Avatar for konifar konifar
21
14k
AIエージェント時代に備える AWS Organizations とアカウント設計
Avatar for Hajime KOSHIRO kossykinto
2
370
Claude Codeが爆速進化してプラグイン追従がつらいので半自動化した話 ver.2
Avatar for ryu rfdnxbro
0
430
生成AIの利用とセキュリティ /gen-ai-and-security
Avatar for Masayoshi Mizutani mizutani
1
1.4k
Ultra Ethernet (UEC) v1.0 仕様概説
Avatar for Masayuki Kobayashi markunet
3
230

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.4k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
460
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
510
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
120
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
67
37k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
200
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
73
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
250
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k

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