[ΠΡΡΠ΅Π½ΠΈΠΉ ΠΠ°ΡΡΡΠΎΠ²] Chrome DevTools: ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΠ°
[ΠΡΡΠ΅Π½ΠΈΠΉ ΠΠ°ΡΡΡΠΎΠ²] Chrome DevTools: ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΠ°
https://www.youtube.com/watch?v=ub9VDHMeRbc
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΡΡΡΠ°:
Chrome DevTools: ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΠ°
Π’Π΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊ Π²ΡΠ΅Π³Π΄Π° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΡΠ»ΠΎΠ²ΠΈΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ° Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ: Π±Π΅ΠΊΠ»ΠΎΠ³ Π½Π΅ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ, ΡΠ΅Π»ΠΈΠ· Π½Π° Π½ΠΎΡΡ, Π° ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΡΠΆΠ½ΠΎ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠ΅. Π§ΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΏΠΎΠ²ΡΡΠ°ΡΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ. ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² - ΠΎΡΠ²ΠΎΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΎΠ±Π»Π΅Π³ΡΠ°ΡΡΠΈΠ΅ ΡΡΡΠΈΠ½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ.
Π Π²Π΅Π±-ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ°ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΈΠ·Π½Π°Π½ΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ: ΡΠΌΠΎΡΡΠ΅ΡΡ Π»ΠΎΠΊΠ°ΡΠΎΡΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, Π²ΡΠ΄Π΅Π»ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ΅-ΡΠ°ΠΊΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ Π² ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ ΡΡΠ°Π» ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Chrome DevTools, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΏΡΡΠΌΠΎ Π² Π±ΡΠ°ΡΠ·Π΅Ρ Chrome. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΠΎΡΠ»Π°Π΄ΠΊΠΈ ΠΊΠΎΠ΄Π°, Π½ΠΎ ΡΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠΈΡΠΎΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ ΠΈ Π² ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΠ°ΡΡΠ΅ΡΠ½Ρ ΡΠ°Π±ΠΎΡΡ, supersliv.biz Π·Π°Π΄Π°Π½Π½ΡΠ΅ Chrome DevTools, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΊΠ°ΠΊ Π² Π΄ΡΡΠ³ΠΈΡ Π²Π΅Π±-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°Ρ , ΡΠ°ΠΊ ΠΈ Π² ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ. ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, Ρ ΠΎΡΠΎΡΠ΅Π΅ Π·Π½Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΎΠΉ ΡΡΠΈΠ»ΠΈΡΡ Π±ΡΠ΄Π΅Ρ ΠΏΠ»ΡΡΠΎΠΌ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΠ°.
ΠΡΡΡ Β«Chrome DevTools: ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΠ°Β» ΡΠΎΠ·Π΄Π°Π½ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΡ Π² Π½Π°Π²ΡΠΊΠΈ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΡ. Π’Π΅ΠΎΡΠΈΡ Π΄Π°Π΅ΡΡΡ Π² ΠΎΠ±ΡΠ΅ΠΌΠ΅, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠΌ Π΄Π»Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ. ΠΠ½Π°Π½ΠΈΡ ΠΈ Π½Π°Π²ΡΠΊΠΈ, ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΠ΅Π½Π½ΡΠ΅ Π½Π° ΡΡΠΎΠΌ ΠΊΡΡΡΠ΅, ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Chrome DevTools ΡΡΠ°Π·Ρ ΠΏΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠΈ Π·Π°Π½ΡΡΠΈΠΉ.
ΠΠ° ΡΡΠΎΠΌ ΠΊΡΡΡΠ΅ Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ:
ΠΠΈΡΠ°ΡΡ CSS ΠΈ XPath Π»ΠΎΠΊΠ°ΡΠΎΡΡ;
ΠΠΎΠ²ΠΈΡΡ JS-ΠΎΡΠΈΠ±ΠΊΠΈ;
ΠΡΠ»ΠΈΡΠ°ΡΡ ΡΠΈΠΏΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π°;
ΠΡΠΎΠ²Π΅ΡΡΡΡ ΡΠ°ΠΉΡ ΠΏΠΎΠ΄ Π½Π°Π³ΡΡΠ·ΠΊΠΎΠΉ;
ΠΠΌΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΊΡΠ°Π½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²;
ΠΠ΅Π½ΡΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ;
ΠΡΠΎΠ²Π΅ΡΡΡΡ ΡΠ΅ΡΡΠΈΡΠΈΠΊΠ°ΡΡ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ.
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΡΡΠ΅Π½ΠΈΠ½Π³Π°
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Chrome DevTools.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ Chrome DevTools
Elements. Π Π°Π±ΠΎΡΠ° Ρ DOM ΡΡΡΠ°Π½ΠΈΡΡ
ΠΡΠ°ΡΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ HTML:
ΡΠ΅Π³
Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π°
ΡΠ΅Π³ΠΈ html
head
body
script
Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ HTML ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π»Π΅ΡΡ
ΠΡΠ°ΡΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ CSS - ΡΡΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅
Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ CSS ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π»Π΅ΡΡ
Π Π°Π±ΠΎΡΠ° Ρ Π»ΠΎΠΊΠ°ΡΠΎΡΠ°ΠΌΠΈ - CSS ΠΈ XPath
Console. Π Π°Π±ΠΎΡΠ° Ρ JavaScript
JS-ΠΎΡΠΈΠ±ΠΊΠΈ
JS-Π΄Π΅Π±Π°Π³ ΠΈ JS-Π»ΠΎΠ³ΠΈ
ΠΡΠΎΡΡΠΎΠΉ JS ΡΠ²ΠΎΠΈΠΌΠΈ ΡΡΠΊΠ°ΠΌΠΈ
Sources. Π Π°Π±ΠΎΡΠ° Ρ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°Π΅ΠΌΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ
ΠΠ°Π³ΡΡΠΆΠ΅Π½Π½ΡΠ΅ CSS-ΡΡΠΈΠ»ΠΈ
ΠΠ°Π³ΡΡΠΆΠ΅Π½Π½ΡΠΉ JS-ΠΊΠΎΠ΄
ΠΠ°Π³ΡΡΠΆΠ΅Π½Π½ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
Π€Π°ΠΉΠ»Ρ ΡΠΎ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ²
CDN
NetWork. Π Π°Π±ΠΎΡΠ° Ρ Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ
Π’ΠΈΠΏΡ Π·Π°ΠΏΡΠΎΡΠΎΠ²: HAR, JS, CSS, Img
HAR-Π·Π°ΠΏΡΠΎΡΡ. ΠΠ°ΠΊ ΡΡΡΡΠΎΠ΅Π½ HTTP-ΠΏΡΠΎΡΠΎΠΊΠΎΠ»
AJAX-Π·Π°ΠΏΡΠΎΡΡ
Π Π°Π±ΠΎΡΠ° Ρ ΡΠΈΠ»ΡΡΡΠ°ΠΌΠΈ
Π Π°Π±ΠΎΡΠ° Ρ ΠΊΠ΅ΡΠ΅ΠΌ ΠΈ Π»ΠΎΠ³Π°ΠΌΠΈ ΠΈ ΠΏΡΠΎΡΠΈΠΌ.
Performance. Π’Π΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ
JS Heap
Π¦ΠΠ£
ΠΠΎΠ΄Ρ, Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π²ΠΈΠ΄Ρ Π½Π°Π³ΡΡΠ·ΠΊΠΈ
Application. Π Π°Π±ΠΎΡΠ° Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ
Storage ΠΈ Π΅Π³ΠΎ Π²ΠΈΠ΄Ρ
Π Π°Π±ΠΎΡΠ° Ρ Cookie
Π Π°Π±ΠΎΡΠ° Ρ Cache
Security. Π Π°Π±ΠΎΡΠ° Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΌ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ΠΌ
HTTPS ΠΈ TLS
ΠΠ°ΡΠ΅ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠ΅ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅
ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠ΅ΡΡΠΈΡΠΈΠΊΠ°ΡΠΎΠ²
Device bar. ΠΠΌΠΈΡΠΈΡΡΠ΅ΠΌ ΡΠ°Π±ΠΎΡΡ Ρ Π΄Π΅Π²Π°ΠΉΡΠ°ΠΌΠΈ
ΠΡΠ»ΠΈΡΠΈΡ Desktop Web ΠΈ Mobile Web
Π Π°Π±ΠΎΡΠ° Ρ ΠΎΠ±ΡΠ°Π·Π°ΠΌΠΈ
Network conditions. Π Π°Π±ΠΎΡΠ° Ρ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ΠΌ
ΠΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ
User agent
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅:
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΡΡΡΠ°:
Chrome DevTools: ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΠ°
Π’Π΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊ Π²ΡΠ΅Π³Π΄Π° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΡΠ»ΠΎΠ²ΠΈΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ° Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ: Π±Π΅ΠΊΠ»ΠΎΠ³ Π½Π΅ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ, ΡΠ΅Π»ΠΈΠ· Π½Π° Π½ΠΎΡΡ, Π° ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΡΠΆΠ½ΠΎ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠ΅. Π§ΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΏΠΎΠ²ΡΡΠ°ΡΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ. ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² - ΠΎΡΠ²ΠΎΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΎΠ±Π»Π΅Π³ΡΠ°ΡΡΠΈΠ΅ ΡΡΡΠΈΠ½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ.
Π Π²Π΅Π±-ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ°ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΈΠ·Π½Π°Π½ΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ: ΡΠΌΠΎΡΡΠ΅ΡΡ Π»ΠΎΠΊΠ°ΡΠΎΡΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, Π²ΡΠ΄Π΅Π»ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ΅-ΡΠ°ΠΊΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ Π² ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ ΡΡΠ°Π» ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Chrome DevTools, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΏΡΡΠΌΠΎ Π² Π±ΡΠ°ΡΠ·Π΅Ρ Chrome. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΠΎΡΠ»Π°Π΄ΠΊΠΈ ΠΊΠΎΠ΄Π°, Π½ΠΎ ΡΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠΈΡΠΎΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ ΠΈ Π² ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΠ°ΡΡΠ΅ΡΠ½Ρ ΡΠ°Π±ΠΎΡΡ, supersliv.biz Π·Π°Π΄Π°Π½Π½ΡΠ΅ Chrome DevTools, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΊΠ°ΠΊ Π² Π΄ΡΡΠ³ΠΈΡ Π²Π΅Π±-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°Ρ , ΡΠ°ΠΊ ΠΈ Π² ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ. ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, Ρ ΠΎΡΠΎΡΠ΅Π΅ Π·Π½Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΎΠΉ ΡΡΠΈΠ»ΠΈΡΡ Π±ΡΠ΄Π΅Ρ ΠΏΠ»ΡΡΠΎΠΌ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΠ°.
ΠΡΡΡ Β«Chrome DevTools: ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΠ°Β» ΡΠΎΠ·Π΄Π°Π½ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΡ Π² Π½Π°Π²ΡΠΊΠΈ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²ΡΠΈΠΊΡ. Π’Π΅ΠΎΡΠΈΡ Π΄Π°Π΅ΡΡΡ Π² ΠΎΠ±ΡΠ΅ΠΌΠ΅, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠΌ Π΄Π»Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ. ΠΠ½Π°Π½ΠΈΡ ΠΈ Π½Π°Π²ΡΠΊΠΈ, ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΠ΅Π½Π½ΡΠ΅ Π½Π° ΡΡΠΎΠΌ ΠΊΡΡΡΠ΅, ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Chrome DevTools ΡΡΠ°Π·Ρ ΠΏΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠΈ Π·Π°Π½ΡΡΠΈΠΉ.
ΠΠ° ΡΡΠΎΠΌ ΠΊΡΡΡΠ΅ Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ:
ΠΠΈΡΠ°ΡΡ CSS ΠΈ XPath Π»ΠΎΠΊΠ°ΡΠΎΡΡ;
ΠΠΎΠ²ΠΈΡΡ JS-ΠΎΡΠΈΠ±ΠΊΠΈ;
ΠΡΠ»ΠΈΡΠ°ΡΡ ΡΠΈΠΏΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π°;
ΠΡΠΎΠ²Π΅ΡΡΡΡ ΡΠ°ΠΉΡ ΠΏΠΎΠ΄ Π½Π°Π³ΡΡΠ·ΠΊΠΎΠΉ;
ΠΠΌΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΊΡΠ°Π½ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²;
ΠΠ΅Π½ΡΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ;
ΠΡΠΎΠ²Π΅ΡΡΡΡ ΡΠ΅ΡΡΠΈΡΠΈΠΊΠ°ΡΡ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ.
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΡΡΠ΅Π½ΠΈΠ½Π³Π°
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Chrome DevTools.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ Chrome DevTools
Elements. Π Π°Π±ΠΎΡΠ° Ρ DOM ΡΡΡΠ°Π½ΠΈΡΡ
ΠΡΠ°ΡΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ HTML:
ΡΠ΅Π³
Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π°
ΡΠ΅Π³ΠΈ html
head
body
script
Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ HTML ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π»Π΅ΡΡ
ΠΡΠ°ΡΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ CSS - ΡΡΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅
Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ CSS ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π»Π΅ΡΡ
Π Π°Π±ΠΎΡΠ° Ρ Π»ΠΎΠΊΠ°ΡΠΎΡΠ°ΠΌΠΈ - CSS ΠΈ XPath
Console. Π Π°Π±ΠΎΡΠ° Ρ JavaScript
JS-ΠΎΡΠΈΠ±ΠΊΠΈ
JS-Π΄Π΅Π±Π°Π³ ΠΈ JS-Π»ΠΎΠ³ΠΈ
ΠΡΠΎΡΡΠΎΠΉ JS ΡΠ²ΠΎΠΈΠΌΠΈ ΡΡΠΊΠ°ΠΌΠΈ
Sources. Π Π°Π±ΠΎΡΠ° Ρ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°Π΅ΠΌΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ
ΠΠ°Π³ΡΡΠΆΠ΅Π½Π½ΡΠ΅ CSS-ΡΡΠΈΠ»ΠΈ
ΠΠ°Π³ΡΡΠΆΠ΅Π½Π½ΡΠΉ JS-ΠΊΠΎΠ΄
ΠΠ°Π³ΡΡΠΆΠ΅Π½Π½ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
Π€Π°ΠΉΠ»Ρ ΡΠΎ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ²
CDN
NetWork. Π Π°Π±ΠΎΡΠ° Ρ Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ
Π’ΠΈΠΏΡ Π·Π°ΠΏΡΠΎΡΠΎΠ²: HAR, JS, CSS, Img
HAR-Π·Π°ΠΏΡΠΎΡΡ. ΠΠ°ΠΊ ΡΡΡΡΠΎΠ΅Π½ HTTP-ΠΏΡΠΎΡΠΎΠΊΠΎΠ»
AJAX-Π·Π°ΠΏΡΠΎΡΡ
Π Π°Π±ΠΎΡΠ° Ρ ΡΠΈΠ»ΡΡΡΠ°ΠΌΠΈ
Π Π°Π±ΠΎΡΠ° Ρ ΠΊΠ΅ΡΠ΅ΠΌ ΠΈ Π»ΠΎΠ³Π°ΠΌΠΈ ΠΈ ΠΏΡΠΎΡΠΈΠΌ.
Performance. Π’Π΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ
JS Heap
Π¦ΠΠ£
ΠΠΎΠ΄Ρ, Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π²ΠΈΠ΄Ρ Π½Π°Π³ΡΡΠ·ΠΊΠΈ
Application. Π Π°Π±ΠΎΡΠ° Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ
Storage ΠΈ Π΅Π³ΠΎ Π²ΠΈΠ΄Ρ
Π Π°Π±ΠΎΡΠ° Ρ Cookie
Π Π°Π±ΠΎΡΠ° Ρ Cache
Security. Π Π°Π±ΠΎΡΠ° Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΌ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ΠΌ
HTTPS ΠΈ TLS
ΠΠ°ΡΠ΅ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠ΅ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅
ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠ΅ΡΡΠΈΡΠΈΠΊΠ°ΡΠΎΠ²
Device bar. ΠΠΌΠΈΡΠΈΡΡΠ΅ΠΌ ΡΠ°Π±ΠΎΡΡ Ρ Π΄Π΅Π²Π°ΠΉΡΠ°ΠΌΠΈ
ΠΡΠ»ΠΈΡΠΈΡ Desktop Web ΠΈ Mobile Web
Π Π°Π±ΠΎΡΠ° Ρ ΠΎΠ±ΡΠ°Π·Π°ΠΌΠΈ
Network conditions. Π Π°Π±ΠΎΡΠ° Ρ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ΠΌ
ΠΠ°ΡΡΠΎΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ
User agent
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅:
favorite
0
star
0
