Web dizaynerləri, inkişaf etdiriciləri və test cihazları üçün inteqrasiya edilmiş alətlər
Vebdə sörf etmək istəyən gündəlik istifadəçiyə diqqət yetirən ən çox brauzer istehsalçılarından əlavə, həm də istifadəçilərə güclü vasitələrin brauzerlərə daxil edilməsi ilə daxil olan apps və saytların yaradılmasına kömək edən veb inkişafçıları, dizaynerləri və keyfiyyət təminatı mütəxəssisləri ilə əlaqə saxlayırlar özləri.
Bir brauzerin içindəki yeganə proqramlaşdırma və test alətlərinin bir səhifənin mənbə kodunu və daha çox başqa bir şeyə baxmaq üçün icazə verdiyi günlər var. Bugünün brauzerləri JavaScript elementlərini icra və yoxlama, DOM elementlərini yoxlama və düzəltmə, tətbiqin və ya səhifənin yüklənməsini darboğazları müəyyənləşdirmək, CSS performansını təhlil etmək, kodunuzun təmin edilməsi kimi real vaxt şəbəkə trafikini izləmək kimi şeylər etməklə daha dərin bir dalğıc almağa imkan verir. çox yaddaş və ya çox CPU dövründən istifadə etmədi və daha çox. Test baxımından, tətbiqin və ya veb-səhifənin fərqli brauzerlərdə, eləcə də müxtəlif qurğularda və platformalarda necə təsirli dizayn və quraşdırılmış simulyatorlar sehrində göstərəcəyini köçürə bilərsiniz. Ən yaxşı hissəsi sizin brauzerinizi tərk etməmədən bütün bunları edə bilərsiniz!
Aşağıdakı Dərsliklər, bir neçə populyar veb brauzerində bu geliştirici vasitələrinə necə giriş əldə etməklə sizi gəzdirir.
Google Chrome
Chrome-un geliştirici alətləri, kodunuzu redaktə etmək və kodlaşdırmaq, performans problemlərini ifşa etmək üçün ayrı-ayrı komponentləri yoxlamaq, Android və ya iOS ilə çalışan müxtəlif cihazların simülasyonlarını simulyasiya etmək və digər faydalı funksiyaları yerinə yetirmək üçün imkan verir.
- Üç üfüqi xətlə qeyd olunan və brauzerin yuxarı sağ küncündə yerləşən Chrome əsas menyu düyməsini basın.
- Açılır menyuda göründüyündə, Siçan imlecini Daha çox alətlər seçimi üzərinə sürüşdürün.
- İndi bir alt menyu görünməlidir. Developer tools etiketli seçimi seçin. Bu menyu elementinin yerinə aşağıdakı klaviatura kısayolunu da istifadə edə bilərsiniz: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Chrome İnkişaf Vasitələri interfeysi bu nümunə ekranında göstərildiyi kimi indi göstərilməlidir. Chrome versiyanızdan asılı olaraq, gördüyünüz ilk layout burada təqdim olunanlardan bir az fərqli ola bilər. Ekranın alt və ya sağ tərəfində yerləşən, geliştirici alətlərinin əsas mərkəzi aşağıdakı sekmləri ehtiva edir.
Elements: CSS-i və HTML-kodunuzu yoxlamaq və həmçinin real vaxt rejimində dəyişikliklərinizin təsirlərini görən, CSS-də redaktə etmək imkanı verir.
Konsol: Chrome'un JavaScript konsolu, birbaşa komanda girişinin yanı sıra diaqnostik hata ayıklamasına imkan verir.
Mənbələr: JavaScript kodunu güclü bir qrafik interfeys vasitəsi ilə debug etməyə imkan verir.
Şəbəkə: Tam sorğu və cavab başlıqları və qabaqcıl vaxt metrikləri də daxil olmaqla, aktiv tətbiqdə və ya səhifədə hər bir əlaqəli əməliyyat haqqında ətraflı məlumatı təsnifləşdirir və göstərir.
Zaman Çizelgesi: Bir səhifə və ya tətbiq yük tələbi başlamazdan sonra brauzerin içində baş verən hər bir fəaliyyətin dərin təhlilinə imkan verir. - Bu bölmələrə əlavə olaraq, Timeline seksiyasının sağ tərəfində yerləşən >> simvolu vasitəsilə aşağıdakı vasitələrə də daxil ola bilərsiniz.
Profil: CPU profiler və Heap profiler bölmələrinə yığıldıqda , aktiv proqram və ya səhifənin hərtərəfli yaddaş istifadə və ümumi icra müddəti təmin edir.
Təhlükəsizlik: Sertifikat problemləri və digər səhifələrdə və ya proqramda təhlükəsizlik ilə bağlı olan digər məsələləri özündə əks etdirir.
Kaynaklar: Çerezleri, yerli depolamayı, tətbiqin önbelleğini və mövcud veb-səhifə və ya tətbiq tərəfindən istifadə olunan digər yerli məlumat mənbələrini yoxlamaq üçün buradasınız.
Auditlər: Bir səhifə və ya tətbiqin yükləmə vaxtını və ümumi performansını optimallaşdırma yollarını təklif edir. - Aygıt rejimi , bir çox simulyatorda, iPad, iPhone və Samsung Galaxy kimi məşhur Android və iOS modelləri də daxil olmaqla, bir çox düzəldilmiş cihazlardan birində göründüyü kimi, demək olar ki, tam olaraq göstərən aktiv səhifəni görmək imkanı verir. Xüsusi inkişafınıza və ya test ehtiyaclarına uyğun olaraq xüsusi ekran qətnamələrini öykünmək imkanı da verilir. Qurğu rejimi aktiv və söndürmək üçün, elementlər sekmesinin sol tərəfində yerləşən mobil telefon simgesini seçin.
- Daha əvvəl, yuxarıda qeyd olunan sekmelerin sağ tərəfində yerləşən və yuxarıya doğru yerləşdirilən üç nöqtə ilə təmsil olunan menyu düyməsini basaraq, geliştirici vasitələrinizin görünüşünü və hissini dəyişə bilərsiniz. Bu açılan menudan, dokunuzu yenidən yerləşdirə bilərsiniz, müxtəlif vasitələrin göstərilməsi və ya gizlədilməsi, eləcə də cihaz müfəttişi kimi daha qabaqcıl elementləri işə sala bilərsiniz. Dev alətlər interfeyinin özü bu bölmədə olan parametrlər vasitəsilə yüksək səviyyədə özelleştirilebilir olduğunu görəcəksiniz.
Mozilla Firefox
Firefox'un Web Developer bölməsində, stil redaktoru və pixel-targeted eyedropper kimi, dizaynerlər, inkişafçılar və testçilər üçün alətlər daxildir.
Təklif olunan oxu: Ən yaxşı 25 Greasemonkey və Tampermonkey İstifadəçi Komutları
- Üç üfüqi xəttlə təmsil olunan və brauzer pəncərəsinin yuxarı sağ küncündə yerləşən Firefox-un əsas menyu düyməsini basın.
- Açılır menyuda göründükdə, Geliştirici etiketli simgeyi seçin. Aşağıdakı variantları ehtiva edən Web Developer menyusu indi göstərilməlidir. Çox menyuda elementlərin onlarla əlaqəli klaviatura qısayollarına sahib olduğunu görürsünüz.
Toggle Tools (Tools Toggle): brauzer pəncərəsinin altındakı yerləşdiyi, geliştirici vasitələrinin interfeysini göstərir və ya gizlədir. Keyboard kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Müfəttiş: Siz uzaqdan ayıklama vasitəsi ilə effektiv səhifədə və həmçinin taşınabilir cihazda CSS və HTML kodunu yoxlaya və / və ya tweak etməyə imkan verir. Klaviatura kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web Konsolu: JavaScript ifadələrini aktiv səhifənin içərisində yerinə yetirməklə yanaşı, təhlükəsizlik xəbərdarlıqları, şəbəkə istəkləri, CSS mesajları və daha çox daxil olmaqla daxil olan müxtəlif məlumatları nəzərdən keçirmək üçün imkan verir. Klaviatura kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: JavaScript Debugger , breakpoints ayarlayarak, DOM düğümlerini inceleyerek, qara boks xarici kaynaklar ve daha çox sayıda hataları belirleyip düzeltmenize imkan verir. Müfəttiş kimi olduğu kimi, bu xüsusiyyət də uzaqdan ayıklamayı dəstəkləyir. Keyboard kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Style Redaktor: Yeni üslublar yaratmaq və onları aktiv veb səhifəsi ilə birləşdirmək və ya mövcud səhifələri düzəltmək və dəyişikliklərinizi bir klik ilə brauzerdə necə göstərdiyini test etməyə imkan verir. Keyboard kısayolu: Mac OS X, Windows ( SHIFT + F7 )
Performans: Aktiv səhifənin şəbəkə performansının, kvadrat dərəcəsi məlumatlarının, JavaScript icrasının vaxtı və vəziyyəti, boya işıqlarının yanıb-sönməsi və s. Keyboard kısayolu: Mac OS X, Windows ( SHIFT + F5 )
Şəbəkə: Brauzer tərəfindən başlanan hər bir şəbəkə tələbini müvafiq üsulla, mənşə domenini, növü, ölçüsü və keçmiş vaxtı əks etdirir. Keyboard kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Developer Toolbar: Interaktiv bir komanda satırı çeviricisi açır. Bütün mövcud əmrlər və onların müvafiq sintaksislərinin siyahısı üçün tərcüməyə köməkçi daxil edin. Klaviatura kısayolu: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Firefox OS və ya Firefox OS Simulatoru vasitəsilə çalışan faktiki cihaz vasitəsilə Web tətbiqlərini yaratmaq və yerinə yetirmək imkanı verir. Keyboard kısayolu: Mac OS X, Windows ( SHIFT + F8 )
Brauzer Konsolu: Veb Konsolu ilə eyni funksiyanı təmin edir (yuxarıda bax). Lakin, geri qaytarılan bütün məlumatlar bütün Firefox proqramı ( uzantıları və brauzer səviyyələri funksiyaları daxil olmaqla) üçün yalnız fəal Veb səhifəsinə qarşıdır. Keyboard kısayolu: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Həssas Tasarım Görünüşü: tablet və smartfonlar da daxil olmaqla, birdən çox cihazı təqlid etmək üçün müxtəlif qətnamələr, düzəlişlər və ekran ölçüləri ilə birbaşa Web səhifəsini dərhal görüntüləməyə imkan verir. Keyboard kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Damlacıq: Fərdi seçilmiş piksellər üçün hex rəng kodunu göstərir.
Scratchpad : Bir pop-up Firefox pəncərəsindən JavaScript kodunun parçaları yazmaq, redaktə etmək, inteqrasiya etmək və icra etməyə imkan verir. Keyboard kısayolu: Mac OS X, Windows ( SHIFT + F4 )
Page Source: Orijinal brauzerin əsaslı geliştirici aləti, bu seçim sadəcə aktiv səhifənin mövcud mənbə kodunu göstərir. Klaviatura kısayolu: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Daha çox Alətlər Alın: Mozilla'nın rəsmi əlavələr saytında Web Developer'in Toolbox kolleksiyasını açan Firebug və Greasemonkey kimi bir çox məşhur genişləndirməni təqdim edir.
Microsoft Edge / Internet Explorer
Tez-tez F12 Developer Tools , Internet Explorer-in əvvəlki versiyalarından bəri interfeysə başladığı klaviatura kısayoluna hörmət göstərən, IE11 və Microsoft Edge-də hazırlanmış alətlər, qurulduğu gündən etibarən çox rahat bir qrup monitorlar, debuggers, emulators və on-the-fly derleyiciler.
- Üç nöqtə ilə təmsil olunan və brauzer pəncərəsinin yuxarı sağ küncündə yerləşən Daha çox fəaliyyətlər menyusuna vurun. Açılır menyu göründüyü zaman, F12 Developer Tools etiketli seçimi seçin. Artıq qeyd etdiyim kimi, alətlər F12 klaviatura qısayolundan da istifadə edə bilərsiniz.
- İnkişafın interfeysi indi, brauzer pəncərəsinin altındakı adətən göstərilməlidir. Aşağıdakı alətlər mövcuddur, hər biri öz müvafiq sekmesinin başlığını tıklayaraq və ya müşayiət olunan klaviatura qısayolundan istifadə etmək üçün əlçatan olur.
DOM Explorer: Sizə getdiyinizdə, dəyişdirilmiş nəticələri göstərən, aktiv səhifədə stil və HTML redaktə etməyə imkan verir. Tətbiq edildikdə kodunu tamamlamaq üçün IntelliSense funksiyasını istifadə edir. Klaviatura kısayolu: (CTRL + 1)
Konsol: İnteqrasiya edilmiş API vasitəsi ilə sayğaclar, taymerlər, izlər və xüsusi mesajlar daxil olmaqla diskussiya məlumatı təqdim etməyə imkan verir. Ayrıca, kodu aktif bir Web sayfasına daxil etmenize və fərdi dəyişənlərə təyin edilmiş dəyərləri real vaxtda dəyişməyə imkan verir. Klaviatura kısayolu: (CTRL + 2)
Hata ayıklayıcısı: Kestirme noktaları belirlemenizi ve kodu çalıştırdığınızda hata ayıklamanızı təmin edir, lazım gələrsə satırla satır. Klaviatura kısayolu: (CTRL + 3)
Şəbəkə: səhifə yüklənməsi və protokol məlumatları, məzmun növü, bant genişliyi istifadəsi və daha çox daxil olmaqla icrası zamanı brauzer tərəfindən başlanan hər bir şəbəkə tələbini siyahıları. Klaviatura kısayolu: (CTRL + 4)
Performans: Səhifə yüklənmə vaxtı və digər fəaliyyətlərin sürətləndirilməsinə kömək etmək üçün kvadrat dərəcələri, CPU istifadə və digər performansla əlaqəli ölçülər. Klaviatura kısayolu: (CTRL + 5)
Yaddaş: Müxtəlif vaxt aralıklarından anlar ilə birgə yaddaş istifadə müddətini göstərməklə mövcud Web səhifəsində potensial yaddaş sızmalarını təcrid etməyə və düzəltməyə kömək edir. Klaviatura kısayolu: (CTRL + 6)
Emulation: Aktiv səhifənin smartfonlar, tabletlər və digər cihazları təqlid edən müxtəlif qətnamələr və ekran ölçüləri ilə necə göstərəcəyini göstərir. Həmçinin, istifadəçi agenti və səhifə yönümünü dəyişdirmək, eləcə də genişlik və uzunluq daxil edərək müxtəlif coğrafi yerləşmə simulyasiya etmək imkanını təmin edir. Klaviatura kısayolu: (CTRL + 7) - Digər vasitələrdən biri içərisində olan Konsolu göstərmək üçün, inkişaf vasitələrinin interfeysinin yuxarı sağ küncündə yerləşən sağ kran ilə kvadrat düyməni basın.
- Çıxarmaq üçün, geliştirici vasitələrinin interfeysi ayrı bir pəncərə olur, iki basamaklı düzbucaqlılar tərəfindən göstərilən düyməni basın və ya aşağıdakı klaviatura kısayolunu istifadə edin: CTRL + P. CTRL + P düyməsini ikinci dəfə basaraq alətləri orijinal yerdə yerləşdirə bilərsiniz.
Apple Safari (yalnız OS X)
Safari'nin müxtəlif alətlər qrupu, onların dizayn və proqramlaşdırma ehtiyacları üçün Mac istifadə edən böyük inkişaf cəmiyyətini əks etdirir. Güclü bir konsol və ənənəvi giriş və hata ayıklama xüsusiyyətləri ilə yanaşı asan istifadə rahat dizayn rejimi və öz brauzerinizin uzantısını yaratmaq üçün bir vasitə də təmin edilir.
- Ekranınızın yuxarısında yerləşən brauzer menyusundan Safari üzərinə basın. Açılır menyudan göründükdə Tercihlər seçin. Bu menyu elementinin yerinə aşağıdakı klaviatura qısa istifadə edə bilərsiniz: COMMAND + COMMA (,)
- Safari-nin Preferences interfeysi indi brauzerinizin pəncərəsini örtməklə nümayiş etdirilməlidir. Başlığın ən uzaq sağ tərəfində yerləşən Ətraflı icon vurun.
- Ətraflı seçimlər artıq görünən olmalıdır. Bu ekranın altındakı menyu çubuğunda " Show Show" menyusunu etiketli bir seçim qutusu ilə müşayiət olunur. Qutuda göstərilən heç bir onay işareti yoxdursa, orada bir dəfə yerləşdirmək üçün bir dəfə basın.
- Üstün sol küncdə olan qırmızı x 'düyməsinə basaraq Tercihlər interfeysini bağlayın.
- Bookmark və Pencereler arasında yerləşdirilən " İnkişaf" adlı brauzer menyusundan yeni bir seçim gözləyin . Bu menyu elementinə basın. Aşağıdakı variantları ehtiva edən bir açılan menyuda indi göstərilməlidir.
Açıq Sehife ile: Etkin Web sayfasını Mac'te yüklü diğer tarayıcılardan birinde açmanıza imkan verir.
İstifadəçi Agenti: Chrome, Firefox və Internet Explorer-ın bir neçə versiyası daxil olmaqla, bir çox əvvəlcədən müəyyən edilmiş istifadəçi agent dəyərlərindən birini seçə və öz xüsusi simninizi müəyyən etməyə imkan verir.
Təsirli Tasarım rejimi daxil edin: Müxtəlif qurğularda və müxtəlif ekran qətnamələrində görünəcək şəkildə cari səhifəni təqdim edir.
Web Inspector Göstər: Safari nin dev alətləri üçün əsas interfeysini açır, adətən brauzerinizin ekranının altındakı yerləşdirilir və Elements , Network , Resources , Timeline , Debugger , Storage , Console .
Hata Konsolunu Göstər: Həmçinin, dev alətlər interfeysini, səhvləri, xəbərdarlıqları və digər axtarış məlumatlarını əks etdirən Konsol seksiyasını birbaşa həyata keçirir.
Page Kaynağını Göstər : Sənəd tərəfindən təsnif olunan aktiv səhifənin mənbə kodunu göstərən Sərvətlər sekmesini açır.
Page Sərvətlərini Göstər: Baxış Sahəsini göstərməklə eyni funksiyanı yerinə yetirir.
Snippet Redaktorunu Göstər: Yeni bir pəncərə açır, burada CSS-i və HTML kodunu daxil edə bilərsiniz.
Extension Builder'ı göstər: Safari uzantılarını CSS, HTML və JavaScript ilə yaratmaq və ya redaktə etmək imkanı verir.
Timeline Recording Göstər: Timeline tabını açır və real vaxt rejimində, həmçinin şəbəkə istəklərini, yerləşdirmə və məlumatların göstərilməsinə başlayır.
Boş Önbellekler: Hazırda sabit diskinizdə saxlanılan bütün yaddaşını silir.
Önbellekleri aradan bırak: Safari'nin bütün içeriklerin hər bir səhifə yükü üzerine sunucudan alınması üçün önbelleğe alınmasını durdurur.
Şəkilləri kəsin: Bütün Web səhifələrində göstərilən şəkilləri qarşısını alır.
Stillərin aradan qaldırılması: Bir səhifə yüklənərkən CSS xüsusiyyətlərinə əl atmaz.
JavaScript'yi aradan bırak: Bütün səhifələrdə JavaScript proqramını məhdudlaşdırır.
Uzantıları aradan qaldırın: Bütün quraşdırılmış uzantıları brauzerin içərisində qaçırmağa qadağan edir.
Site-spesifik Hacks'ları söndürün: Safari aktiv veb-səhifəyə həssas məsələləri həll etmək üçün redaktə edildikdə, bu seçim bu dəyişiklikləri əvvəlcədən bu dəyişikliklərdən əvvəl olduğu kimi yükləməsi üçün bu dəyişiklikləri maneə törədir.
Yerli faylların məhdudiyyətlərini ləğv et: brauzerinizin yerli disklərdəki fayllara, təhlükəsizlik səbəbləri üçün suala görə məhdudlaşdırılan bir hərəkətə icazə verə bilər.
Çapraz mənşəli məhdudiyyətləri aradan buraxın: Bu məhdudiyyət XSS və digər potensial təhlükələrin qarşısını almaq üçün sui-istifadə halında qoyulur. Ancaq inkişaf məqsədləri üçün tez-tez müvəqqəti olaraq əlil olması lazımdır.
JavaScript Smart Search Alanından icazə verin: effektiv olduqda, javascript ilə URL'leri daxil etmək imkanı verir : birbaşa ünvan çubuğuna daxil edilir.
SHA-1 Sertifikatlarını təhlükə ilə müalicə edin: SHA-1 alqoritmindən istifadə edərək SSL sertifikatları geniş yayılmışdır və həssasdır.