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
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
55
Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile
Avatar for Siwat Kaolueng perjerz
0
14
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
19
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
39
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
72

Other Decks in Technology

See All in Technology
マルチアカウント環境での コーディングエージェントを使った障害調査が大変なので AIエージェントにReadOnly権限を付与してみた / ReadOnly AI Agents for Multi-Account AWS Incident Response
Avatar for Takashi Yamaguchi yamaguchitk333
2
110
「勝手に広まる」人気 AI エージェントを爆速で作ろう！（AWS Summit Japan 2026講演資料）
Avatar for みのるん minorun365
PRO
5
1.7k
現地で盛り上がった WWDC26 Keynote
Avatar for ZOZO Developers zozotech
PRO
1
260
就職⽀援サービスにおけるキャリアアドバイザーのシフトスケジューリング
Avatar for Recruit recruitengineers
PRO
1
150
AIネイティブな開発のサプライチェーンリスク対策 〜激動の開発現場でリスクに立ち向かう〜【ZennFes】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
2
140
AI駆動開発を通して感じた、 AI時代のデザイナーの役割変化
Avatar for WHIsaiyo whisaiyo
4
2.3k
AIはどのように 組織のアジリティを変えるのか？
Avatar for J.K junki
4
1k
[AWS Summit Japan 2026]迷っているあなたへ_小さな一歩が、やがて自分を助けてくれる
Avatar for sh_fk2 sh_fk2
1
140
日本 Fintech 未来予測レポート 2027〜2028年（手動編集版）
Avatar for 8maki 8maki
1
2.4k
MUSUBI 田中裕一『AIと共に行う「しごとのリデザイン」- スモールバックオフィス編』AI Ops Lab #4
Avatar for MUSUBI musubi
0
250
新しいUbuntu/GNOMEが使いたいからXからWaylandへ移行頑張ってるの巻 2026-06-20
Avatar for Nobuto Murata nobutomurata
0
150
ACE-Step-1.5で見る 音楽生成AIのしくみと“破綻だけ直す”Retake機能の開発【zennfes spring 2026 登壇資料】
Avatar for asap personabb
1
530

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
320
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
150
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
410
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
200
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.3k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
220
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
610
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
850

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