Veb Brauzer Tərtibatçı Alətlərindən Necə İstifadə Edilir

2024 Müəllif: Abigail Brown | [email protected]. Son dəyişdirildi: 2024-01-07 19:00

Vebdə sörf etmək istəyən gündəlik istifadəçiyə diqqət yetirən əksər brauzer istehsalçıları ilə yanaşı, onlar həm də veb tərtibatçılarına, dizaynerlərinə və keyfiyyət təminatı üzrə peşəkarlara da xidmət göstərirlər ki, onlar güclü proqramları inteqrasiya edərək həmin istifadəçilərin daxil olduğu proqram və saytların yaradılmasına kömək edir. alətləri birbaşa brauzerlərin özlərinə daxil edin.

Brauzerdə tapılan yeganə proqramlaşdırma və sınaq alətlərinin səhifənin mənbə koduna baxmaq imkanı verdiyi və başqa heç nə olmadığı günlər geridə qaldı. Bugünkü brauzerlər JavaScript parçalarını yerinə yetirmək və sazlamaq, DOM elementlərini yoxlamaq və redaktə etmək, maneələri müəyyən etmək üçün tətbiq və ya səhifəniz yüklənərkən real vaxt şəbəkə trafikinə nəzarət etmək, CSS performansını təhlil etmək, kodunuzun düzgün işləməsini təmin etmək kimi işlər görməklə sizə daha dərindən getməyə imkan verir. çox yaddaş və ya çox CPU dövründən istifadə etməmək və daha çox.

Sınaq nöqteyi-nəzərindən siz cavab verən dizayn və daxili simulyatorların sehri vasitəsilə tətbiqin və ya veb səhifənin müxtəlif brauzerlərdə, eləcə də müxtəlif cihazlarda və platformalarda necə göstəriləcəyini təkrarlaya bilərsiniz. Ən yaxşı tərəfi odur ki, siz brauzerinizi tərk etmədən bütün bunları edə bilərsiniz!

Aşağıdakı dərsliklər sizə bir neçə məşhur veb brauzerdə bu tərtibatçı alətlərinə necə daxil olmağı öyrədir.

Google Chrome

Chrome developer alətləri sizə kodu redaktə etməyə və sazlamağa, performans problemlərini aşkar etmək üçün fərdi komponentləri yoxlamağa, Android və ya iOS ilə işləyənlər də daxil olmaqla müxtəlif cihaz ekranlarını simulyasiya etməyə və bir sıra digər faydalı funksiyaları yerinə yetirməyə imkan verir.

1. Üç üfüqi xəttlə işarələnmiş və brauzerin yuxarı sağ küncündə yerləşən Chrome-un əsas menyusunu seçin.

2. Açılan menyu görünəndə siçan kursorunu Daha çox alət seçiminin üzərinə gətirin.

   

3. İndi alt menyu görünməlidir. Tərtibatçı alətləri etiketli seçimi seçin. Siz həmçinin bu menyu elementinin əvəzinə aşağıdakı klaviatura qısa yolundan istifadə edə bilərsiniz: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Chrome Developer Alətləri interfeysi indi bu nümunə ekran görüntüsündə göstərildiyi kimi göstərilməlidir. Chrome versiyanızdan asılı olaraq, gördüyünüz ilkin tərtibat burada təqdim olunandan bir qədər fərqli ola bilər. Adətən ekranın aşağı və ya sağ tərəfində yerləşən developer alətlərinin əsas mərkəzi aşağıdakı tablardan ibarətdir.

5. Bu bölmələrə əlavə olaraq, siz həmçinin >> işarəsi vasitəsilə aşağıdakı alətlərə daxil ola bilərsiniz, Performans sağında yerləşir tab.

   • Yaddaş: Veb səhifəsində yaddaş istifadəsinə nəzarət edin və qeyd edin. Saytınızdakı JavaScript-in nə qədər ağır olduğunu görə bilərsiniz.
   • Təhlükəsizlik: Sertifikat problemlərini və aktiv səhifə və ya tətbiq ilə təhlükəsizliklə bağlı digər problemləri vurğulayır.
   • Tətbiq: Veb tətbiqi tərəfindən istifadə edilən resursları yoxlayın. İstifadə olunanların tam icmalını əldə edin.
   • Audits: Səhifənin və ya tətbiqin yükləmə müddətini və ümumi performansını optimallaşdırmağın yollarını təklif edir.

   

6. Cihaz Rejimi sizə aktiv səhifəyə simulyatorda baxmağa imkan verir və onu demək olar ki, bir neçə tanınmış Android də daxil olmaqla, ondan çox cihazdan birində göründüyü kimi göstərir. və iPad, iPhone və Samsung Galaxy kimi iOS modelləri. Sizə həmçinin xüsusi inkişaf və ya sınaq ehtiyaclarınıza uyğunlaşdırmaq üçün xüsusi ekran qətnamələrini təqlid etmək imkanı verilir.

   Cihaz Rejimi funksiyasını yandırmaq və söndürmək üçün birbaşa solunda yerləşən mobil telefon işarəsini seçin Element nişanı.

   

7. Siz həmçinin ilk olaraq menyu düyməsini üç şaquli yerləşdirilmiş nöqtə ilə təmsil etməklə tərtibatçı alətlərinizin görünüşünü və hissini fərdiləşdirə bilərsiniz. və yuxarıda qeyd olunan tabların ən sağ tərəfində yerləşir.

   Bu açılan menyudan siz dokun yerini dəyişdirə, müxtəlif alətləri göstərə və ya gizlədə, həmçinin cihaz müfəttişi kimi daha təkmil elementləri işə sala bilərsiniz. Bu bölmədə tapılan parametrlər vasitəsilə inkişaf alətləri interfeysinin özünün yüksək səviyyədə fərdiləşdirilə biləcəyini görəcəksiniz.

   

Mozilla Firefox

Firefox-un veb tərtibatçı bölməsinə stil redaktoru və piksel hədəfləmə damcısı kimi dizaynerlər, tərtibatçılar və sınaqçılar üçün alətlər daxildir.

1. Firefox-un əsas menyusunu seçin, üç üfüqi xətt ilə təmsil olunur və brauzer pəncərəsinin yuxarı sağ küncündə yerləşir.

2. Açılan menyu görünəndə Veb Developer seçin.

   

3. Aşağıdakı seçimləri ehtiva edən Veb Developer menyusu indi göstərilməlidir. Siz görəcəksiniz ki, əksər menyu elementləri ilə əlaqəli klaviatura qısayolları var.

   • Alətləri dəyişdirin: Adətən brauzer pəncərəsinin aşağı hissəsində yerləşdirilən tərtibatçı alətləri interfeysini göstərir və ya gizlədir. Klaviatura qısayolu: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Müfəttiş: Uzaqdan sazlama vasitəsilə aktiv səhifədə, eləcə də portativ cihazda CSS və HTML kodunu yoxlamağa və/yaxud cızmağa imkan verir. Klaviatura qısayolu: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Sizə aktiv səhifədə JavaScript ifadələrini yerinə yetirməyə, həmçinin təhlükəsizlik xəbərdarlıqları, şəbəkə sorğuları, CSS mesajları və s. daxil olmaqla müxtəlif daxil edilmiş verilənlər toplusunu nəzərdən keçirməyə imkan verir. Klaviatura qısayolu: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger sizə kəsilmə nöqtələrini təyin etməklə, DOM qovşaqlarını yoxlayaraq, qara qutu xarici mənbələri və s. vasitəsilə qüsurları təyin etməyə və düzəltməyə imkan verir. Müfəttişdə olduğu kimi, bu xüsusiyyət də uzaqdan sazlamanı dəstəkləyir. Klaviatura qısayolu: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Stil Redaktoru: Sizə yeni üslub cədvəlləri yaratmağa və onları aktiv veb səhifəyə daxil etməyə və ya mövcud vərəqləri redaktə etməyə və dəyişikliklərinizin yalnız bir kliklə brauzerdə necə göstərildiyini yoxlamağa imkan verir. Klaviatura qısayolu: Mac OS X, Windows (SHIFT+F7)
   • Performans: Aktiv səhifənin şəbəkə performansı, kadr tezliyi datası, JavaScript-in icra müddəti və vəziyyəti, boyanın yanıb-sönməsi və sair haqqında ətraflı məlumat təqdim edir. Klaviatura qısayolu: Mac OS X, Windows (SHIFT+F5)
   • Şəbəkə: Brauzer tərəfindən başlanmış hər bir şəbəkə sorğusunu müvafiq metod, mənşə domeni, növü, ölçüsü və keçən vaxtı sadalayır. Klaviatura qısayolu: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Veb sayt tərəfindən saxlanılan keş və kukilərə nəzər salın. Klaviatura qısayolu: (SHIFT+F9)
   • Developer Toolbar: İnteraktiv komanda xətti tərcüməçisini açır. Bütün mövcud əmrlərin siyahısı və onların düzgün sintaksisi üçün tərcüməçiyə help daxil edin. Klaviatura qısayolu: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Firefox OS ilə işləyən faktiki cihaz və ya Firefox ƏS Simulyatoru vasitəsilə veb proqramları yaratmaq və icra etmək imkanı verir. Klaviatura qısayolu: Mac OS X, Windows (SHIFT+F8)
   • Brauzer Konsolu: Veb Konsolu ilə eyni funksionallığı təmin edir (yuxarıya bax). Bununla belə, geri qaytarılan bütün məlumatlar yalnız aktiv veb səhifədən fərqli olaraq bütün Firefox tətbiqi üçün (genişləndirmələr və brauzer səviyyəli funksiyalar daxil olmaqla) üçündür. Klaviatura qısayolu: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: Planşetlər və smartfonlar da daxil olmaqla birdən çox cihazı təqlid etmək üçün veb-səhifəyə dərhal müxtəlif rezolyusiyada, tərtibatda və ekran ölçülərində baxmağa imkan verir. Klaviatura qısayolu: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Damlalıq: Ayrı-ayrılıqda seçilmiş piksellər üçün hex rəng kodunu göstərir.
   • Scratchpad: Scratchpad sizə açılan Firefox pəncərəsindən JavaScript kodu parçalarını yazmağa, redaktə etməyə, inteqrasiya etməyə və icra etməyə imkan verir. Kodda yazmağa və onu vebsaytda sınamağa imkan verən interaktiv JavaScript sənədini açın. Klaviatura qısayolu: (SHIFT+F4)
   • Xidmət İşçiləri: Xidmət işçiləri veb tətbiqinizi sazlayın. Onların performansı və səhvləri haqqında ətraflı məlumat əldə edin.
   • Səhifə Mənbəsi: Orijinal brauzer əsaslı tərtibatçı aləti, bu seçim sadəcə aktiv səhifə üçün mövcud mənbə kodunu göstərir. Klaviatura qısayolu: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Daha çox alət əldə edin: Mozilla'nın rəsmi əlavələr saytında Veb Tərtibatçının Alətlər Qutusu kolleksiyasını açır. Firebug və Greasemonkey kimi.

   

Microsoft Edge/Internet Explorer

Adətən F12 Developer Tools kimi istinad edilir, Internet Explorer-in əvvəlki versiyalarından bəri interfeysi işə salmış klaviatura qısayoluna, IE11 və Microsoft Edge-də inkişaf etdirici alətlər dəstinə hörmətdir. Çox lazımlı monitorlar, sazlayıcılar, emulyatorlar və anında tərtibatçılar qrupunu təklif edərək yarandığı gündən uzun bir yol keçmişdir.

Microsoft artıq Internet Explorer-i dəstəkləmir və daha yeni Edge brauzerinə yeniləməyi tövsiyə edir. Ən yeni versiyanı endirmək üçün onların saytına keçin.

1. Seçin Daha çox əməliyyat, üç nöqtə ilə təmsil olunur və brauzer pəncərəsinin yuxarı sağ küncündə yerləşir.

   

2. Açılan menyu görünəndə Developer Tools etiketli seçimi seçin.

   

3. İnkişaf interfeysi indi adətən brauzer pəncərəsinin aşağı hissəsində göstərilməlidir. Aşağıdakı alətlər mövcuddur, onların hər birinə müvafiq tab başlığına klikləməklə və ya müşayiət olunan klaviatura qısa yolundan istifadə etməklə daxil olmaq mümkündür.

   

   • DOM Explorer: Siz getdikcə dəyişdirilmiş nəticələri göstərərək, aktiv səhifədə üslub cədvəllərini və HTML-ni redaktə etməyə imkan verir. Mümkün olduqda kodu avtomatik tamamlamaq üçün IntelliSense funksionallığından istifadə edir. Klaviatura qısayolu: (CTRL+1)
   • Konsol: İnteqrasiya edilmiş API vasitəsilə sayğaclar, taymerlər, izlər və fərdiləşdirilmiş mesajlar daxil olmaqla sazlama məlumatlarını təqdim etmək imkanı verir. Həmçinin, aktiv veb səhifəyə kodu daxil etməyə və real vaxt rejimində fərdi dəyişənlərə təyin edilmiş dəyərləri dəyişdirməyə imkan verir. Klaviatura qısayolu: (CTRL+2)
   • Debugger: Sizə kəsilmə nöqtələri təyin etməyə və kodunuzu icra edərkən, lazım gələrsə, sətir-sətirdə sazlamağa imkan verir. Klaviatura qısayolu: (CTRL+3)
   • Şəbəkə: Səhifənin yüklənməsi və icrası zamanı brauzer tərəfindən başlanmış hər bir şəbəkə sorğusunu sadalayır, o cümlədən protokol təfərrüatları, məzmun növü, bant genişliyi istifadəsi və s. Klaviatura qısayolu: (CTRL+4)
   • Performans: Səhifənin yüklənmə vaxtını və digər fəaliyyətləri sürətləndirməyə kömək etmək üçün kadr dərəcələri, CPU istifadəsi və digər performansla bağlı göstəriciləri təfərrüatlı şəkildə təqdim edir. Klaviatura qısayolu: (CTRL+5)
   • Yaddaş: Yaddaşdan istifadə qrafiki və müxtəlif vaxt intervallarından çəkilmiş görüntülər göstərməklə cari veb-səhifədə potensial yaddaş sızmalarını təcrid etməyə və düzəltməyə kömək edir. Klaviatura qısayolu: (CTRL+6)
   • Emulyasiya: Aktiv səhifənin smartfonlar, planşetlər və digər cihazları təqlid edərək müxtəlif rezolyusiyalarda və ekran ölçülərində necə göstəriləcəyini göstərir. O, həmçinin istifadəçi agentini və səhifə oriyentasiyasını dəyişdirmək, həmçinin enlik və uzunluq daxil etməklə müxtəlif geolokasiyaları simulyasiya etmək imkanı verir. Klaviatura qısayolu: (CTRL+7)

4. Konsolu göstərmək üçün digər alətlərdən hər hansı birində olarkən içərisində sağ mötərizə ilə kvadrat düyməni basın. inkişaf alətləri interfeysinin yuxarı sağ küncü.

   

5. Tərtibatçı alətləri interfeysini ayrıca pəncərəyə çevirmək üçün iki sıralı düzbucaqlı seçin və ya aşağıdakı klaviatura qısa yolundan istifadə edin: CTRL+P. Siz CTRL+P düymələrinə ikinci dəfə basmaqla alətləri orijinal yerinə qaytara bilərsiniz.

   

Apple Safari (Yalnız Mac)

Safari-nin müxtəlif tərtibat alətləri dəsti dizayn və proqramlaşdırma ehtiyacları üçün Mac-dan istifadə edən böyük tərtibatçı icmasını əks etdirir. Güclü konsol və ənənəvi giriş və sazlama funksiyalarına əlavə olaraq, istifadəsi asan cavab verən dizayn rejimi və öz brauzerinizin genişləndirmələrini yaratmaq üçün alət də təqdim olunur.

1. Ekranın yuxarısında yerləşən brauzer menyusunda Safari seçin. Açılan menyu görünəndə Preferences seçin. Siz həmçinin bu menyu elementinin yerinə aşağıdakı klaviatura qısa yolundan istifadə edə bilərsiniz: COMMAND+COMMA(,)

   

2. Safari-nin Preferences interfeysi indi brauzerinizin pəncərəsini üst-üstə qoyaraq göstərilməlidir. Başlığın ən sağ tərəfində yerləşən Qabaqcıl ikona seçin.

   

3. Qabaqcıl tərcihləri indi görünməlidir. Bu ekranın aşağı hissəsində menyu sətrində İnkişaf menyusunu göstər etiketli seçim var və qeyd qutusu ilə müşayiət olunur. Qutuda heç bir qeyd işarəsi yoxdursa, ora yerləşdirmək üçün üzərinə bir dəfə klikləyin.

   

4. Tercihlər interfeysini bağlayın.

5. Siz indi brauzer menyusunda İnkişaf adlı yeni seçim görməlisiniz, Əlfəcinlər və Pəncərə arasında yerləşir. Bu menyu elementinə klikləyin. Aşağıdakı seçimləri ehtiva edən açılan menyu indi göstərilməlidir.

   • ilə Açıq Səhifə: Sizə hazırda Mac-da quraşdırılmış digər brauzerlərdən birində aktiv veb səhifəni açmağa imkan verir.
   • İstifadəçi Agenti: Sizə Chrome, Firefox və Internet Explorer-in bir neçə versiyası daxil olmaqla onlarla əvvəlcədən müəyyən edilmiş istifadəçi agenti dəyərlərindən seçim etməyə, həmçinin öz fərdinizi təyin etməyə imkan verir. sətir.
   • Cavablı Dizayn Rejiminə Daxil Olun: Cari səhifəni müxtəlif cihazlarda və müxtəlif ekran ayırdetmələrində göründüyü kimi göstərir.
   • Show Web Inspector: Safari-nin tərtibat alətləri üçün əsas interfeysi işə salır, adətən brauzerinizin ekranının aşağı hissəsində yerləşdirilir və aşağıdakı bölmələri ehtiva edir: Elementlər, Şəbəkə, Resurslar, Zaman qrafikləri, Sazlayıcı, Yaddaş, Konsol.
   • Səhv Konsolunu Göstər: Həmçinin səhvləri, xəbərdarlıqları və digər axtarış edilə bilənləri göstərən Konsol tab üçün proqram alətləri interfeysini işə salır. log data.
   • Səhifə Mənbəsini Göstər: Sənəd üzrə kateqoriyalara ayrılmış aktiv səhifə üçün mənbə kodunu göstərən Resurslar tabınıaçır.
   • Səhifə Resurslarını Göstər: Səhifə Mənbəsini Göstər seçimi ilə eyni funksiyanı yerinə yetirir.
   • Snippet Redaktorunu Göstər: CSS və HTML kodunu daxil edə biləcəyiniz yeni pəncərə açır, onun çıxışını anında nəzərdən keçirə bilərsiniz.
   • Extension Builder-i Göstər: CSS, HTML və JavaScript ilə Safari genişləndirmələri yaratmaq və ya redaktə etmək imkanı verir.
   • Taymlayn qeydini göstər: Zaman qrafiki tabını açır və real vaxt rejimində şəbəkə sorğularını, tərtibatı və məlumatı göstərməyə, o cümlədən JavaScript icrasını göstərməyə başlayır.
   • Empty Caches: Hazırda sabit diskinizdə saxlanılan bütün keşi silir.
   • Keşləri deaktiv edin: Safari-ni keşləməni dayandırır ki, hər səhifə yükləndikdə bütün məzmun serverdən alınsın.
   • Şəkilləri deaktiv edin: Şəkillərin bütün veb səhifələrdə göstərilməsinin qarşısını alır.
   • Üslubları deaktiv edin: Səhifə yükləndikdə CSS xassələrinə məhəl qoymur.
   • JavaScript-i deaktiv edin: Bütün səhifələrdə JavaScript icrasını məhdudlaşdırır.
   • Uzantıları deaktiv edin: Bütün quraşdırılmış artırmaların brauzerdə işləməsini qadağan edir.
   • Sayt-xüsusi Hackləri Deaktiv edin: Safari aktiv veb-səhifəyə xas olan məsələlərin açıq şəkildə həlli üçün dəyişdirilibsə, bu seçim həmin dəyişiklikləri bloklayacaq ki, səhifə bu dəyişikliklərin tətbiqindən əvvəl olduğu kimi yüklənir.
   • Yerli Fayl Məhdudiyyətlərini Deaktiv Edin: Brauzerə yerli disklərinizdəki fayllara daxil olmaq imkanı verir, bu, təhlükəsizlik səbəbi ilə defolt olaraq məhdudlaşdırılmışdır.
   • Çox Mənşəli Məhdudiyyətləri Deaktiv Edin: Bu məhdudiyyətlər XSS və digər potensial təhlükələrin qarşısını almaq üçün defolt olaraq tətbiq edilir. Lakin, onlar tez-tez inkişaf məqsədləri üçün müvəqqəti olaraq deaktiv edilməlidir.
   • Ağıllı Axtarış sahəsindən JavaScript-ə icazə verin: Aktivləşdirildikdə, o, javascript ilə URL-ləri daxil etmək imkanı verir: birbaşa ünvan çubuğuna daxil edilmişdir.
   • SHA-1 Sertifikatlarını Təhlükəsiz kimi qiymətləndirin: SHA-1 alqoritmindən istifadə edən SSL sertifikatları çox vaxt köhnəlmiş və həssas sayılır.