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
60
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
Mastraエージェント、どのクラウドにデプロイする？
Avatar for みのるん minorun365
PRO
2
180
Kaggleで成長するために意識したこと
Avatar for Chikuwabu prgckwb
2
330
プロダクトだけじゃない、社内プロセスにおける自動化・省力化ノススメ
Avatar for KAKEHASHI kakehashi
PRO
1
3.7k
cccccc
Avatar for moznion moznion
0
1.9k
関数型の考えを TypeScript に持ち込んで、テストしやすい純粋関数を増やす / Pure at the Core, Effects at the Edge: Bringing Functional Thinking into TypeScript
Avatar for 株式会社カミナシ kaminashi
1
110
ポストモーテム！ DDoSからサイトは守れた。 でもビジネスは守れなかった。
Avatar for 弁護士ドットコム bengo4com
1
2.9k
Empower GenAI with Agile - あなたのアジャイルが生成AIのバフになる仕組み
Avatar for Hiroyuki Ito (TheHiro) hageyahhoo
1
180
公式ドキュメントの歩き方etc
Avatar for あべ coco_se
0
100
誤解だらけの開発生産性 / Myths and Misconceptions about Developer Productivity
Avatar for Masato Ishigaki / 石垣雅人 i35_267
1
250
CSに"SLO"は要らない、経営層に"99.9%"は伝わらない - SREを全社に"翻訳"する3原則
Avatar for サイバーセキュリティクラウド cscengineer
PRO
1
4.5k
最適な自走を最小限の支援で — M&Aで拡大する組織で少人数SREが挑んだ1年 / SRE NEXT 2026
Avatar for GENDA genda
0
1.1k
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする～デザインシステム運用に学ぶ組織レバレッジ～ 渡辺 凌央
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
0
120

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
370
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
260
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Done Done
Avatar for chrislema chrislema
186
16k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
550
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
750
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
220

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