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
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
71
Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile
Avatar for Siwat Kaolueng perjerz
0
17
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
21
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
アクセスキーが漏れた日にやるべきこと- 無効化の先にある本当の対応
Avatar for kazzpapa3 kazzpapa3
0
350
型落ちシンクライアント端末のPoEモジュールを自作したかった話
Avatar for Takuto Nagami logica0419
0
490
ブラウザで変わるID連携（OAuth/OIDC Numa (Immersion) Workshop 2026）
Avatar for OpenID Foundation Japan oidfj
PRO
0
330
Cloudflare製品を活用した AIガバナンス実践入門 / AI governance with Cloudflare Service
Avatar for 株式会社DELTA delta_tech
1
110
Claude Codeの体系的な理解と知識のフック
Avatar for Oikon oikon48
6
5.7k
Dylib Hijacking on macOS: Dead or Alive?
Avatar for Patrick Wardle patrickwardle
0
120
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
77k
APIセキュリティを組織で実現するには~注力する点と設計・実装に入れたい対策~
Avatar for RiiiM(りむ) riiimparm
1
540
形式手法特論：Hyperproperty とモデル検査 #kernelvm / Kernel VM Study Tokyo 19th
Avatar for y_taka_23 ytaka23
0
860
[ホンマでっか SRE] あなたはなぜ SRE に?
Avatar for _awache _awache
0
280
NANDでも描画したい！
Avatar for nichica nichica906
3
790
「面白い！」を信じ抜け。激動の時代を貫く、オンリーワン・エンジニアの条件
Avatar for t.kizawa kizawa2020
1
310

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
490
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
2
3.8k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.3k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
540
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.4k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.1k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
270
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
290

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