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

DevTools for ITOPPLUS

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Siwat Kaolueng Siwat Kaolueng
November 30, 2022
Technology
0
19

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
16
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
35
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
120
Recap Theory of Ivy
Avatar for Siwat Kaolueng perjerz
0
65

Other Decks in Technology

See All in Technology
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
1
180
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
3
440
なぜ今、コスト最適化（倹約）が必要なのか？ ～AWSでのコスト最適化の進め方「目的編」～
Avatar for Hayato Tan htan
1
110
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
Avatar for nihonbuson nihonbuson
PRO
2
220
Embedded SREの終わりを設計する　「なんとなく」から計画的な自立支援へ
Avatar for SansanTech sansantech
PRO
3
2.2k
Context Engineeringが企業で不可欠になる理由
Avatar for Hirosato Gamo hirosatogamo
PRO
3
470
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
420
日本の85%が使う公共SaaSは、どう育ったのか
Avatar for たけだ taketakekaho
1
140
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
1.2k
顧客の言葉を、そのまま信じない勇気
Avatar for yamatai12 yamatai1212
1
340
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
130
仕様書駆動AI開発の実践： Issue→Skill→PRテンプレで 再現性を作る
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
2
610

Featured

See All Featured
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
190
It's Worth the Effort
Avatar for 3n 3n
188
29k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
690
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
320
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
3
220
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
730
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
200

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