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
Frontend Engineering with Agentic AI: An MCP-Powered Development Lifecycle
Avatar for Siwat Kaolueng perjerz
0
48
Shipping Mobile Features at Web Speed with Webview: Sharing React Code Across Web and Mobile
Avatar for Siwat Kaolueng perjerz
0
13
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
18
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
38
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
120
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
70

Other Decks in Technology

See All in Technology
Claude Codeを組織で使いこなす— サーバサイドAIエージェント運用の実践知
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
130
GitHub Copilot CLIでWebアクセシビリティを改善した話
Avatar for tomokusaba tomokusaba
0
140
食べログのサーキットブレーカー導入を振り返って
Avatar for atpons atpons
1
150
個人の発見を、組織の知恵に 〜生成AI活用を"探索"から"組織の仕組み"へ〜
Avatar for KintoTech_Dev kintotechdev
2
190
「使われるデータ基盤」を目指してデータアナリストとワークショップをやった話
Avatar for jackojacko_ jackojacko_
2
940
コードレビューを制するチームがソフトウェアデリバリーのフローを制す / Beyond Code Review: Distributing Its Responsibilities Across the SDLC
Avatar for mtx2s mtx2s
3
480
Spring Boot における​ AOT Cache 活用テクニックと​ 起動時間改善事例​
Avatar for NTTドコモソリューションズ　Java担当 ntt_dsol_java
0
180
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.8k
Java正規表現エンジン（NFA）の仕組みと パフォーマンスを維持するための最適化手法
Avatar for 竹内 雅和 takeuchi_132917
0
160
地元にいないローカルオーガナイザーの立ち回り
Avatar for uvb_76 uvb_76
1
390
大学生が本気でDatabricksを活用してDiscordサークルをデータ駆動させてみた
Avatar for Kazuki Date phantomjuju
1
300
電子辞書Brainをネットに繋げてみた(自力編)
Avatar for らすぴー raspython3
0
380

Featured

See All Featured
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
300
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
540
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
180
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
370
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
850
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
160
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
160

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