Google Chrome DevTools

1. DevTools-un açılması

Google Chrome DevTools — bu, Chrome brauzerində mövcud olan inteqrasiya edilmiş developer alətləri toplusudur. Bu alət veb-səhifələri araşdırmaq və təhlil etmək imkanı verir. Veb-scraper üçün DevTools, səhifələrin strukturunu daha dərindən öyrənmək, seçiciləri müəyyənləşdirmək, dinamik məzmunu və şəbəkə sorğularını təhlil etmək üçün əvəzolunmaz bir alətə çevrilir. Bu məqalədə DevTools-un veb-scraperə məlumat toplamaqda və scraping performansını artırmaqda necə kömək etdiyini nəzərdən keçirəcəyik.

Chrome DevTools-u açmaq üçün:

• F12 və ya Ctrl+Shift+I (Windows) və Cmd+Opt+I (Mac) düymələrinə basın.
• Səhifəyə sağ klik edib Kodu baxmaq və ya Inspect seçin.

Alətlər yeni paneldə açılacaq, adətən brauzer pəncərəsinin aşağısında və ya sağ tərəfində. DevTools paneli bir neçə tabdan ibarətdir və hər biri veb-scraper üçün vacib olan müəyyən tapşırıqları yerinə yetirmək üçün nəzərdə tutulub.

Veb-scraper üçün xüsusilə faydalı olan DevTools tablarına aiddir: Elements, Console, Network, Sources və Application.

2. Elements Tabı

Elements tabı: HTML və CSS öyrənilməsi

Elements tabı — səhifənin strukturunu analiz etmək və elementləri seçmək üçün əsas alətdir. Burada səhifənin HTML və CSS strukturuna baxmaq, onları redaktə etmək və kopyalamaq mümkündür.

Elements tabının əsas funksiyaları:

• Selektorların müəyyən edilməsi. Sol yuxarı küncdəki ox işarəsinə klikləyin və səhifədəki istənilən elementi seçin. DevTools-da həmin elementin HTML kodu açılacaq. Bu, CSS və ya Xpath selektorlarında istifadə edilə bilən id, class və digər atributların təyin edilməsi üçün çox rahatdır.
• HTML və CSS-in real vaxtda redaktəsi. Elementlərin HTML və CSS-lərini dəyişdirə bilərsiniz, bu da vizual test üçün faydalıdır, səhifədəki dəyişikliklərin necə əks olunacağını anlamağa kömək edir. Məsələn, müəyyən elementləri gizlədə və ya rəngini dəyişə bilərsiniz ki, səhifənin hansı hissələrinin sizə lazım olduğunu daha yaxşı anlayasınız.
• Selektorların kopyalanması. Element üzərinə sağ klik edərək "Copy" seçimini edə bilərsiniz və onun CSS selektorunu və ya XPath-ını kopyalaya bilərsiniz, bu xüsusilə web-skrapingdə faydalıdır.

Məsələn: Başlıq <h1> mətnini seçmək lazımdırsa, sadəcə ona klik edin və selektorunu kopyalayın, sonra bu selektordan koddakı məlumatları çıxarmaq üçün istifadə edin.

3. Console Paneli

Console Paneli: Dinamik məzmun üçün JavaScript-in icrası

Console birbaşa səhifədə JavaScript kodunu yazmağa və icra etməyə imkan verir. Bu, dinamik məzmunla qarşılıqlı əlaqə yaratmaq və elementləri idarə edən JavaScript-i analiz etmək üçün faydalıdır.

Veb-scrapping üçün Console tətbiqi:

• JavaScript vasitəsilə məlumatların çıxarılması. Elementlərin seçilməsini sınamaq və selectorun düzgün işlədiyinə əmin olmaq üçün document.querySelector kimi sadə komandaları istifadə etmək olar.
• Elementlərlə qarşılıqlı əlaqə yaratmaq üçün kodun icrası. Məsələn, bir düyməni "klikləmək" və ya məzmunun bir hissəsini "yükləmək" lazımdırsa, Console kodu icra etməyə imkan verir və bununla elementlərin hadisələrə necə reaksiya verdiyini yoxlamaq olar.
• Səhvlərin axtarışı. Əgər scrapping avtomatlaşdırma vasitəsilə həyata keçirilirsə, Console paneli JavaScript və ya şəbəkə sorğuları ilə bağlı səhvləri görməyə və bəzi elementlərin niyə yüklənmədiyini və ya göstərilmədiyini başa düşməyə imkan verir.

Nümunə: Əgər load-more sinfi olan düymənin seçilməsini sınaqdan keçirmək lazımdırsa, Console-da bu komandanı daxil edə bilərsiniz: document.querySelector('.load-more').click() və düymənin bu əmrlərə necə reaksiya verdiyini yoxlayın.

4. Network tabı

Network tabı: şəbəkə sorğularının analizi

Network — səhifənin etdiyi şəbəkə sorğularını analiz etmək üçün vacib tabdır. Bir çox sayt məlumatları asinxron sorğular vasitəsilə yükləyir (məsələn, AJAX), bu da scraping-i çətinləşdirə bilər. Network bütün şəbəkə sorğularını izləməyə, onların nüsxəsini çıxarmağa və serverin cavablarını analiz etməyə imkan verir.

Network tabının əsas funksiyaları:

• AJAX sorğularının izlənməsi. Səhifə yüklənərkən edilən bütün sorğuları, eləcə də onların cavablarını görə bilərsiniz. Bu, xüsusilə məlumatlar dinamik olaraq yükləndikdə faydalıdır. Lazım olan məlumatları qaytaran sorğuları izləyə və sonra onları kodunuzda istifadə edərək birbaşa məlumat əldə edə bilərsiniz.
• Sorğuların kopyalanması. Sorğuya sağ klik edərək onu cURL və ya fetch şəklində kopyalaya bilərsiniz. Bu, məlumatları birbaşa serverdən almaq üçün sorğuları təkrar etməyə imkan verir.
• Sorğu parametrlərinin analizi. Network başlıqları, parametrləri və cookies-ləri sorğu ilə birlikdə göstərir. Bu, serverin sorğunun icrası üçün hansı məlumatlara ehtiyacı olduğunu anlamağa kömək edir. Məsələn, bir çox sayt məlumatları qorumaq üçün identifikasiya tokenlərindən istifadə edir və sorğu başlıqlarını analiz etmək bu məhdudiyyətləri necə keçmək lazım olduğunu anlamağa imkan verir.

Nümunə: Əgər məlumatlar dinamik olaraq AJAX sorğu vasitəsilə yüklənirsə, Network-da uyğun sorğunu seçib, onun URL-ni və cavabını görə və bu sorğudan birbaşa məlumat əldə etmək üçün istifadə edə bilərsiniz.

5. Sources Tab

Sources Tab: JavaScript və dinamik kontentin öyrənilməsi

Sources — budur tab, burada JavaScript, CSS, şəkillər və səhifənin digər resurslarını araşdırmaq olar. Veb-skrapper onun köməyi ilə saytın məntiqini analiz edə və dinamik kontenti emal edə bilər.

Sources tab-ın əsas imkanları:

• JavaScript-faylların axtarışı. Bir çox səhifələrdə məlumatlar və ya funksionallıq JavaScript vasitəsilə yüklənir. Sources-da bu JavaScript-faylları tapıb aça bilərsiniz, bu fayllar məlumatların göstərilməsinə və yüklənməsinə cavabdehdir.
• Breakpoint-lərin təyin edilməsi. Bu, kodun müəyyən bir sətirdə icrasını dayandırmağa və məlumatların necə yükləndiyini həmçinin müxtəlif elementlərin qarşılıqlı əlaqədə olmasını izləməyə imkan verir. Bu, xüsusilə kompleks JavaScript-dən istifadə edən səhifələrin analizində faydalıdır.
• Dəyişənlərin dəyərlərinin baxışı. Dəyişənlərdə olan dəyişiklikləri izləmək və saytın məntiqini daha yaxşı anlamaq olar, bu da dinamik kontentin mürəkkəb JavaScript funksiyaları ilə yüklənməsi zamanı yardımçı olur.

6. Application tabı

Application tabı: cookies və Local Storage ilə iş

Application — bu tab, harada ki, cookies, Local Storage və digər müştəri tərəfindən saxlanılan məlumatları araşdırmaq mümkündür. Bu məlumatlar, autentikasiya tələb edən və ya istifadəçinin fəaliyyətini izləyən saytlarda iş zamanı faydalı ola bilər.

Veb-scrapper üçün Application tabının əsas imkanları:

• Cookieslərin analizi. Bir çox saytlar autentikasiya və ya istifadəçilərin izlənilməsi üçün cookieslərdən istifadə edir. Autentikasiya ilə sorğuları analiz edərkən, Application tabı hansı cookieslərin kontentə çıxış üçün lazım olduğunu görməyə imkan verir.
• Local Storage və Session Storage öyrənilməsi. Bu saxlama yerləri, müştəri tərəfində məlumatların saxlanılması üçün istifadə olunur. Əgər sayt məlumatları və ya sazlamaları Local Storage-dan yükləyirsə, bu məlumatları çıxarıb scrapping kodunda istifadə etmək mümkündür.
• Autentikasiya tokenləri ilə iş. Bəzi saytlar tokenləri Local Storage və ya cookies-də saxlayır. Tokeni və onun yenilənməsini bilərək, API və ya AJAX sorğular vasitəsilə məlumat əldə etmək mümkündür.

Məsələn: əgər sayt autentikasiya tələb edirsə, Application tabı lazımı cookiesləri və ya tokenləri çıxarıb, sorğular üçün istifadə etməyə imkan verir.

7. Praktiki məsləhətlər

Web-scraping üçün DevTools-dan istifadə ilə bağlı praktiki məsləhətlər

• Network-də məlumatları axtarın. Əgər content asinxron yüklənirsə, Network-dən lazımlı request-i tapın və onun URL, parametrlər və başlıqlarını öyrənin.
• Selector-ları Console-da test edin. Scraping kodunu yazmazdan əvvəl selector-ları Console-da document.querySelector və ya document.querySelectorAll kimi əmrlərlə test edə bilərsiniz.
• API üçün fetch-request-ləri kopyalayın. Əgər sayt API istifadə edirsə, Network request-i kopyalamağa və onu skript vasitəsilə test etməyə imkan verir ki, məlumatları birbaşa əldə edəsiniz, HTML strukturu keçilmədən.
• Məzmunu idarə edən skriptləri axtarın. Sources bölməsində dinamik məzmunu idarə edən JavaScript fayllarını tapa və onların necə işlədiyini öyrənə bilərsiniz, sonra isə scraping üçün onların məntiqini adaptasiya edə bilərsiniz.
• Authentication token-ləri və cookies-i öyrənin. Bəzi saytlar məlumatları cookies və ya token-lərlə qoruyur, buna görə bu məlumatları saxlayıb request-lərdə ötürmək faydalıdır.