Окно Π΄Π΅Ρ€Π΅Π²Π° элСмСнтов

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°Π½Π°Π»ΠΈΠ·Π° HTML ΠΊΠΎΠ΄Π° страницы.

ΠšΡ€Π°Ρ‚ΠΊΠΎ ΠΎ построСниС страницы

ΠŸΡ€ΠΈ запросС страницы сайта, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ (ΠΎΡ‚ Π°Π½Π³Π». browser, Π²Π΅Π±-ΠΎΠ±ΠΎΠ·Ρ€Π΅Π²Π°Ρ‚Π΅Π»ΡŒ) Π² ΠΎΡ‚Π²Π΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ исходный HTML-ΠΊΠΎΠ΄, Π½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°Ρ‡Π°Π»ΠΎΠΌ отрисовки Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΡƒΠ΅Ρ‚ этап Π°Π½Π°Π»ΠΈΠ·Π° ΠΊΠΎΠ΄Π° ΠΈ Π΅Π³ΠΎ построСниС Π² Π²ΠΈΠ΄Π΅ Π΄Π΅Ρ€Π΅Π²Π° ΡƒΠ·Π»ΠΎΠ² (render tree). Π’ Ρ€Π°ΠΌΠΊΠ°Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, со структурой HTML, Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ приходится постоянно. Для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ удобства, Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ ZennoPoster, Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°Π½Π°Π»ΠΈΠ·Π° Π΄Π΅Ρ€Π΅Π²Π° элСмСнтов.

ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π΄Π°Π½Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ ProjectMaker, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ мСню Π½Π°ΠΆΠ°Ρ‚ΡŒ:

Π“Π»Π°Π²Π½ΠΎΠ΅ мСню: β€œΠžΠΊΠ½ΠΎβ€ β†’ β€œΠ”Π΅Ρ€Π΅Π²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ‚ΠΎΠ²β€œ

Π”Π΅Ρ€Π΅Π²ΠΎ элСмСнтов ZennoPoster

Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ элСмСнтам страницы, Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΌΠΎΠΆΠ½ΠΎ наглядно Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.

Π€ΠΈΠ»ΡŒΡ‚Ρ€ Π΄Π΅Ρ€Π΅Π²Π° элСмСнтов

Π’ ΠΎΠΊΠ½Π΅ Π΄Π΅Ρ€Π΅Π²Π° элСмСнтов, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ², освободив сСбя, Ρ‚Π΅ΠΌ самым ΠΎΡ‚ Π»ΠΈΡˆΠ½ΠΈΡ… элСмСнтов, Ρ‡Ρ‚ΠΎ упростит Π°Π½Π°Π»ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ Π² Ρ€Π°Π·Ρ‹ сократит врСмя поиска Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Π²Π°ΠΌ Ρ‚Π΅Π³Π°.

Π€ΠΈΠ»ΡŒΡ‚Ρ€ ΠΎΠΊΠ½Π° Π΄Π΅Ρ€Π΅Π²ΠΎ элСмСнтов

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΠΊΠ½Π°, Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ:

  • ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°ΠΆΠ½Ρ‹Π΅ элСмСнты - автоматичСски оставит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ (Π²Π°ΠΆΠ½Ρ‹Π΅) часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Ρ‚Π΅Π³ΠΈ.

  • Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Ρ‚Π΅Π³ΠΈ - ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ элСмСнты, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… списком ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π Π°Π±ΠΎΡ‚Π° с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ страницы

Β 

ΠŸΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ (ПКМ) Π½Π° Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌ элСмСнтС, Π²Ρ‹Π·Π²Π°Π² контСкстноС мСню, ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π» для дальнСйшСй Ρ€Π°Π±ΠΎΡ‚Ρ‹ с элСмСнтом, ΠΊΠ°ΠΊ с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ.

  • Π˜ΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ элСмСнт - Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠΊΠ½ΠΎ β€œΠ‘Π²ΠΎΠΉΡΡ‚Π²Π° элСмСнта”, для Π±ΠΎΠ»Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°Π½Π°Π»ΠΈΠ·Π° свойств, Ρƒ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ Π²Π°ΠΌΠΈ элСмСнта.

  • Π’ конструктор дСйствий - инструмСнт, позволяСт Ρ‚ΠΎΠ½ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ поиска элСмСнта, ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ тСстируя дСйствия Π½Π°Π΄ Π½ΠΈΠΌ.

  • Поиск ΠΏΠΎ XPath - автоматичСски строит ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ элСмСнта, Π² прСдставлСниС XML Path Language, для ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² конструкторС дСйствий.

  • ΠŸΠ°Ρ€ΡΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ - инструмСнт, позволяСт с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ количСством ΠΊΠ»ΠΈΠΊΠΎΠ², Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ условия сбора Π΄Π°Π½Π½Ρ‹Ρ…, с ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π²Ρ‹Π²ΠΎΠ΄ΠΎΠΌ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°, Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΎΠΊΠ½Π΅.

  • Π­Ρ‚ΠΎ ΠΊΠ°ΠΏΡ‚Ρ‡Π° - добавляСт Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Π²Π²ΠΎΠ΄Π° ΠΊΠ°ΠΏΡ‚Ρ‡ΠΈ Π² Ρ€ΡƒΡ‡Π½ΡƒΡŽ.

  • Поиск ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ - инструмСнт, для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… дСйствий ΠΌΡ‹ΡˆΡŒΡŽ Π½Π°Π΄ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌ участком.

Β 

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ инструмСнты для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с исходным ΠΊΠΎΠ΄ΠΎΠΌ страницы

ПанСль для Π°Π½Π°Π»ΠΈΠ·Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² HTML элСмСнта

ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ β€œΠ‘Π²ΠΎΠΉΡΡ‚Π²Π° элСмСнта”

β€œΠžΠΊΠ½ΠΎβ€ β†’ β€œΠ‘Π²ΠΎΠΉΡΡ‚Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Π°β€œ

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚, для Π°Π½Π°Π»ΠΈΠ·Π°: DOM-ΠΌΠΎΠ΄Π΅Π»ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, исходного HTML-ΠΊΠΎΠ΄, тСкстового содСрТимого страницы.

ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ β€œΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π° тСкста страницы”

β€œΠ‘Ρ€Π°ΡƒΠ·Π΅Ρ€β€ β†’ β€œΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ исходного ΠΊΠΎΠ΄Π°, DOM ΠΈ тСкста ΡΡ‚Ρ€Π°Π½ΠΈΡ†Ρ‹β€œ

Β 

ΠžΠ±Π»Π°ΡΡ‚ΡŒ примСнСния

Помимо Π°Π½Π°Π»ΠΈΠ·Π° исходного ΠΊΠΎΠ΄Π° Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницы, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ поиск ΠΏΠΎ рСгулярному Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, для этого, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ β€œΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² конструктор Ρ€Π΅Π³. выраТСний” ΠΈ содСрТимоС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² ΠΎΠ±Π»Π°ΡΡ‚ΡŒ β€œΠ’Π΅ΠΊΡΡ‚ для обработки”, для дальнСйшСго создания /тСстирования рСгулярного выраТСния.

Developer tools ΠΈΠ»ΠΈ сокращённо β€” DevTools, Π½Π°Π±ΠΎΡ€ инструмСнтов ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΎΡ‚Π»Π°ΠΆΠΈΠ²Π°Ρ‚ΡŒ, ΠΏΡ€ΠΎΡ„ΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ ΠΊΠΎΠ΄ Π½Π° соотвСтствиС Ρ‚Π΅ΠΌ ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹ΠΌ стандартам ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, Π°ΠΊΡ‚ΠΈΠ²Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Google Chrome.

ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ β€œΠ˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Π²Π΅Π±-разработчика”

β€œΠ‘Ρ€Π°ΡƒΠ·Π΅Ρ€β€ β†’ β€œΠ˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° для Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈβ€œ

Данная ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ, Π°ΠΊΡ‚ΠΈΠ²Π½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Google Chrome.

Β 

Β