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
12
Building Simple Collaborative Online IDE With AngularFire and Firepad
Avatar for Siwat Kaolueng perjerz
0
1k
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
浸透しなさいRFC 5322&7208
Avatar for Nonogaki Hiroshi hinono
0
110
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
Avatar for abemii_ abemii
0
180
JOAI発表資料 @ 関東kaggler会
Avatar for 日本人工知能オリンピック joai_committee
1
240
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
Avatar for Kiminori Yokoi nasuvitz
6
410
LLMエージェント時代に適応した開発フロー
Avatar for Yuya Hirayama hiragram
1
390
GCASアップデート（202506-202508）
Avatar for 高橋広和 techniczna
0
240
EKS Pod Identity における推移的な session tags
Avatar for z63d z63d
1
200
Oracle Base Database Service：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
20k
ドキュメントはAIの味方！スタートアップのアジャイルを加速するADR
Avatar for かわうそ kawauso
3
280
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
Avatar for himaratsu himaratsu
0
110
Goでマークダウンの独自記法を実装する
Avatar for lag129 lag129
0
210
Backboneとしてのtimm2025
Avatar for yu4u yu4u
4
1.4k

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
480
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k

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