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
0
18

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
Web App Performance Optimization
Avatar for Siwat Kaolueng perjerz
0
10
Building Simple Collaborative Online IDE With AngularFire and Firepad
Avatar for Siwat Kaolueng perjerz
0
990
RxJS in Angular
Avatar for Siwat Kaolueng perjerz
0
29
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
110
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
63

Other Decks in Technology

See All in Technology
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
Avatar for emi emiki
0
700
IAMのマニアックな話 2025を執筆して、​ 見えてきたAWSアカウント管理の現在
Avatar for NRI Netcom nrinetcom
PRO
4
660
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
Avatar for Okuto Oyama yamanoku
1
280
In Praise of "Normal" Engineers (LDX3)
Avatar for Charity Majors charity
3
1.2k
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
Avatar for 弁護士ドットコム bengo4com
0
340
生成AIでwebアプリケーションを作ってみた
Avatar for tajimon tajimon
2
120
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
Avatar for Saito Ayumu d120145
0
220
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方（JaSST'25 Kansai）
Avatar for みずのり mizunori
0
130
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
Avatar for Masato Ishigaki / 石垣雅人 i35_267
4
1.4k
Model Mondays S2E02: Model Context Protocol
Avatar for Nitya Narasimhan, PhD nitya
0
180
[TechNight #90-1] 本当に使える？ ZDMの 新機能を実践検証してみた
Avatar for oracle4engineer oracle4engineer
PRO
3
140
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
Avatar for opelab opelab
9
2.2k

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
660
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
4
200
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k

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