Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DevTools for ITOPPLUS

Siwat Kaolueng
November 30, 2022
Technology
0
14

DevTools for ITOPPLUS

Edge DevTools overview

Siwat Kaolueng

November 30, 2022
Tweet

More Decks by Siwat Kaolueng

See All by Siwat Kaolueng
Building Simple Collaborative Online IDE With AngularFire and Firepad
perjerz
0
920
RxJS in Angular
perjerz
0
26
What's Angular View?
perjerz
0
120
What's New, What's Next in Angular?
perjerz
0
100
Recap Theory of Ivy
perjerz
0
58

Other Decks in Technology

See All in Technology
How to be an AWS Community Builder | 君もAWS Community Builderになろう！〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
生成AIのガバナンスの全体像と現実解
fnifni
1
180
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
400
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
140
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
110
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
Fanstaの１年を大解剖！ 一人SREはどこまでできるのか！？
syossan27
2
160
ガバメントクラウドのセキュリティ対策事例について
fujisawaryohei
0
530
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
710

Featured

See All Featured
We Have a Design System, Now What?
morganepeng
51
7.3k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
It's Worth the Effort
3n
183
28k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Unsuck your backbone
ammeep
669
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Making Projects Easy
brettharned
116
5.9k
Agile that works and the tools we love
rasmusluckow
328
21k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Optimizing for Happiness
mojombo
376
70k

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