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
Genie Ontologyは銀の弾丸かを考える / Is Genie Ontology a Silver Bullet?
Avatar for NTT docomo Business nttcom
0
240
ZOZOTOWNの進化と信頼性を両立する負荷試験
Avatar for ZOZO Developers zozotech
PRO
2
160
Gen3R: 3D Scene Generation Meets Feed-Forward Reconstruction
Avatar for Spatial AI Network spatial_ai_network
0
110
Terraform共通モジュールをチーム横断で“変えられる”運用へ ― リリースと適用の分離
Avatar for kekke-n kekke_n
1
2.7k
ボーイスカウトルールでメモリやスキルを改善しよう
Avatar for azukiazusa azukiazusa1
1
340
AI時代のエンジニアキャリアについて今一度考える
Avatar for Sakamoto sakamoto_582
2
1.5k
AIと共生する開発者プラットフォーム：バクラクのモノレポ×マイクロサービス基盤
Avatar for sakajunquality sakajunquality
2
3.4k
Claude Codeとハーネスについて考えてみる
Avatar for Oikon oikon48
18
9.3k
AI Driven AI Governance
Avatar for Yutaka Hiroyama pict3
0
330
Kaggleで成長するために意識したこと
Avatar for Chikuwabu prgckwb
1
260
Amazon EVS で VCF 9.0 / 9.1 のサポート開始まとめ
Avatar for mtoyoda mtoyoda
0
290
完全自律ロボットを作りたくて、先に開発を自律させた話(ROS Japan UG #63 LT)
Avatar for ありさん ( ari-san ) rryz09
0
440

Featured

See All Featured
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
170
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
280
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
9.5k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k

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