Faydalı məsləhətlər

Chrome Developer Alətləri üçün bilməli olduğunuz 15 tövsiyə və tövsiyələr

Pin
Send
Share
Send
Send


İnkişaf etdiricilər üçün Chrome Developer Alətləri alətinin gizli xüsusiyyətləri haqqında onlayn olaraq bir çox məqalə var və bu yaxınlarda dizayn yönümlü bir mövzu qeydini tapdım. Onun üstünlüyü çox sadə hərəkətləri təsvir etməsidir: rəngin, siniflərin, səhifədəki mətnin dəyişdirilməsi və s. Mənə elə gəlir ki, bu həm plan qurmağa başlayanlar üçün, həm də onunla müntəzəm işləyənlər üçün daha praktik və faydalı məlumatdır. Şəxsən mən bu nümunələrin 90% -ni fəal şəkildə istifadə edirəm, amma "sirlər" əslində belə deyil. Bugünkü nəşrdə ən yaxşı təcrübələrim və digər faydalı xüsusiyyətlərimi bölüşəcəyəm.

Chrome Devtools istifadə etməzdən əvvəl onu işlətməlisiniz. İnkişaf üçün bir çox digər Chrome genişləndiricilərindən fərqli olaraq, bu vasitə birbaşa brauzerin özündə qurulur. Onu açmağın bir neçə yolu var:

1. Əsas menyudan "Daha çox alətlər" seçin və sonra "Developer Alətləri" açılan siyahıdan.

2. Sizi maraqlandıran veb səhifənin yerindəki kontekst menyusuna zəng edin (mətn / şəkil, menyu və s.) Və "Elementi yoxlayın" linki vurun.

3. İsti düymələr var:

  • Windows üçün bu birləşmə: "Ctrl + Shift + I" və ya "F12" düyməsi.
  • Mac üçün - "Cmd + Opt + I"

HTML / CSS kodunu necə redaktə etmək olar

Prinsipcə, Google Chrome Devtools'dan istifadə etdiyim əsas funksiya, kodu düzəltmək və stil parametrlərini yoxlamaqdır. Bütün daxiletmə seçimlərindən, "Elementi yoxlayın" kontekst menyusunu seçirəm, çünki istədiyiniz obyektə uyğun elementləri açmadan dərhal əvvəl.

Solda HTML, sağda CSS görürsən. Burada yeni etiketlər dəyişdirə və daxil edə, mətn düzəldə, üslubları əlavə edib dəyişdirə bilər və s. Saytdakı bütün dəyişiklikləri dərhal yuxarı pəncərədə görürsən. Faydalı olaraq, yeri gəlmişkən, CSS də müəyyən qaydaların təyin olunduğu sənədləri göstərir - sizə lazım olan kodu tapmaq daha asan olacaq.

1. Tez fayl dəyişikliyi

Əgər Mətn Mətnindən istifadə etmisinizsə, deməli "Heç bir şeyə getmədən" yaşaya bilməzsiniz (Tərcüməçi Qeyd: İdeya istifadəçiləri üçün bu funksiya "Hər yerdə axtarış" adlanır və Shift düyməsini iki dəfə basaraq çağırılır). Bənzər bir funksiyanın geliştirici vasitələrində olduğunu bilməkdən məmnun olacaqsınız. Layihənizdə hər hansı bir faylı tez tapmaq və açmaq üçün geliştirici panel açıq olduqda Ctrl + P (Mac istifadəçiləri üçün Cmd + P) düymələrini basın.

2. Mənbə kodu axtarın

Ancaq mənbə kodunda axtarmaq istəsən nə edərsən? Səhifədəki bütün yüklənmiş fayllarda axtarış aparmaq üçün Ctrl + Shift + F (Cmd + Opt + F) düymələrini basın. Bu axtarış metodu müntəzəm ifadə axtarışlarını da dəstəkləyir.

3. Xəttə getmək

Faylı mənbələr sekmesinde açdıqdan sonra, geliştirici alətlər bu faylı istənilən xəttinə keçməyə imkan verir. Bunu etmək üçün Windows və Linux üçün Ctrl + G düymələrini (və ya Mac üçün Cmd + L) basın və xətt nömrəsini daxil edin.

Başqa bir yol, Ctrl + O düyməsini basmaqdır, ancaq axtarılan mətn əvəzinə ":" və sətir nömrəsini (Tərcüməçi Qeyd: lakin daha da irəli gedə və fayl adını və sətir nömrəsini ":" istifadə edərək aralarındakı bir ayrıcı olaraq daxil edə bilərsiniz, fayl adını daxil edərkən tamamilə istəksizdir, bu bir axtarışdır).

4. Konsoldan istifadə edərək DOM elementləri alınır

Geliştirici alət konsolu DOM'un alınması üçün bir neçə faydalı "sehrli" funksiya və dəyişənə dəstək verir:

  • $ () - document.querySelector () - a bərabərdir. CSS seçicisinə uyğun ilk elementi qaytarır, məsələn, $ ('DIV') səhifədəki ilk div elementini qaytaracaqdır.
  • $$ () - sənədə bərabərdir.querySelectorAll (). Elementlərin siyahısını qaytarır (Tərcüməçi Qeyd: yəni Code seçicisinə uyğun NodeList).
  • $ 0 - $ 4, Elementlər sekmesinde seçdiyiniz son beş DOM elementinin tarixidir, burada $ 0 son olacaq.

Daha çox konsol funksiyalarını burada tapa bilərsiniz.

5. Çoxlu vaqon və seçimlərdən istifadə

Bir fayl redaktə edərkən Ctrl (Cmd for Mac) düyməsini tutaraq ehtiyac duyduğunuz yerə vuraraq birdən çox vaqona quraşdıra bilərsiniz.

6. Giriş qorumaq

Konsol sekmesinde Giriş Giriş seçimini aktivləşdirdiyiniz zaman, səhifələr yükləndikdə nəticələr silinməyəcəkdir. Səhifəni tərk etməzdən əvvəl ortaya çıxan səhvlərin tarixçəsini görmək istəyirsinizsə bu rahatdır.

(Tərcüməçi Qeyd: Bənzər bir xüsusiyyət Şəbəkə sekmesinde. Açıldıqda, səhifələr arasında gedərkən sorğu tarixi silinmir. Ancaq səhifə JavaScript istifadə edərək yönlendirileceksə və başqa bir istək yerinə yetirilmişsə, bu sorğunun nəticəsini görmək demək olar ki, həmişə mümkün olmur. Uzun çəkişmə zamanı bu xassələri aradan qaldırmağı unutmayın! Geliştirici alətlər, demək olar ki, həmişə səhifənin özündən daha çox sistem ehtiyatı istehlak edir!)

7. Minimallaşdırılmış mənbələrin səliqəsizliyi

Chrome Developer Vasitələrində oxunaqlı görünüşə qədər azaldılmış mənbə kodlarının daxili "iddiaçı" var. Düymə, hazırda mənbələr sekmesinde açılan faylın aşağı sol küncündə yerləşir.

(Tərcüməçi Qeyd: bəzən bu əmlakı avtomatik olaraq işə salmaq mümkün deyil, məsələn, FireFox-da edilir)

8. Cihaz rejimi

Geliştirici alətlər, mobil qurğular üçün optimallaşdırılmış səhifələrin inkişafı üçün güclü bir rejimi ehtiva edir. Google'dan gələn bu video, ekranın qətnaməsini dəyişdirmək, toxunma ekranına toxunma və aşağı keyfiyyətli şəbəkə bağlantısını təqlid etmək kimi inkişaf etmiş xüsusiyyətlərinin əksəriyyətini nümayiş etdirir.

9. Cihaz sensorlarının emulyasiyası

Cihaz rejiminin başqa bir xoş xüsusiyyəti toxunma ekranları və akselerometrlər kimi mobil cihazların sensorlarını simulyasiya etməkdir. Coğrafi koordinatlarınızı göstərə bilərsiniz. Obyekt Emulsiya -> Sensorlardakı Elementlər sekmesinin altındakı yerdədir.

10. Rəng seçimi

Stil redaktorunda bir rəng seçərkən rəng dəyişdiricisini vura bilərsiniz və rəng seçimi pəncərəsi görünəcək. Bu pəncərə açıq olduqda, siçan kursorunuz, səhifədəki rəngini bir pikselə doğru seçmək üçün böyüdücü loupe halına gəlir.

12. Kölgə DOM göstərin

Giriş sahələri və düymələr, brauzerlər kimi elementlər ümumiyyətlə gizli olan digər əsas elementlərdən yaradır. Bununla birlikdə Parametrlər -> Ümumi bölməsinə keçə və Elementlər sekmesinde bu əsas elementləri göstərə bilmək üçün istifadəçi agent kölgəsi DOM göstərə bilərsiniz. Bu, onları ayrı-ayrılıqda təşkil etmək imkanı verəcəkdir.

14. Rəng formatını dəyişdirin

Shift + CSS tənzimləmə panelindəki rəng dəyişdiricisini vuraraq rəng formatı RGBA, HSL altıbucaqlı olaraq dəyişdiriləcək (Tərcüməçi Qeyd: eyni zamanda, altıbucaqlı qısaldılmış forma ilə və tam şəklində, hətta paytaxt reyestrində. Bu sizə uyğun deyilsə, brauzer standart rəng sabitləri siyahısında verilmiş rəngi tapmağa çalışacaqdır. Bu xüsusiyyətin yeganə çatışmazlığı ondan ibarətdir ki, istədiyiniz formatı seçmək üçün bütün mümkün variantları tez-tez “çatlamalısan”.

15. İş yerində yerli faylları redaktə etmək

İş sahələri, inkişaf etdirici alətləri IDE-yə çevirən bir inkişaf etdirici panel üçün güclü bir alət çubuğudur. İş sahəsi yerli layihənizin quruluşuna görə mənbələr sekmesinde fayl quruluşunu ehtiva edir, buna görə dəyişiklikləri xarici mətn redaktoruna kopyalamadan və yapışdırmadan birbaşa düzəldə və saxlaya bilərsiniz.

İş sahələrini qurmaq üçün mənbələr sekmesine (Tərcüməçi Qeyd: Gizli olduqda naviqasiya çubuğunu açın, bunun üçün nişanın yuxarı sol küncündəki Naviqatoru göstər düyməsini vurun) və naviqator panelinin hər hansı bir yerində sağ vurun və ya bütün layihə sekmesini geliştirici panelə sürükləyin. İndi seçilmiş qovluq, onun alt qovluqları və ondakı bütün fayllar hansı səhifədə olmağınızdan asılı olmayaraq redaktə ediləcəkdir. Daha da rahatlığı üçün bu səhifədə istifadə olunan sənədləri istifadə edə bilərsiniz ki, bu da onları redaktə edib saxlamağa imkan verəcəkdir.

UPD. Tərcüməçi Qeyd:

Əlavə edilmiş qovluğa bütün sekmələrdən daxil olmaq mümkündür. Buna görə, layihənizdə birdən çox HTML faylı varsa, onda qonşu bir brauzer nişanında açmaq kifayətdir.

Buradakı iş sahələri haqqında daha çox məlumat əldə edə bilərsiniz.

Ekran ölçülərinin, cihazların emulyasiyası

Saytı fərqli ekran qətnamələrində nəzərdən keçirmək barədə məqalədə mövzu ilə əlaqədar bir neçə xidmətdən bəhs etdim, baxmayaraq ki, məsələ daha asan həll olunur - Google Chrome Devtools geliştirici alətindən istifadə etməklə.

Aşağı sol küncdə ekranın mobil / çevik versiyasına keçid üçün bir düymə var, burada brauzer pəncərəsinin ölçüsünü təyin edə bilərsiniz. Rahatlıq üçün, smartfonların (Pixel, iPhone) və planşetlərin (iPad) parametrləri avtomatik olaraq orada verilmişdir, lakin istənilən genişlik / boy dəyərlərini təyin edə bilərsiniz. Bu şeylə ümumiyyətlə inkişaf zamanı cavab dizaynında səhvlər axtarıram.

Tez məzmunu redaktə etmək (dizaynMode)

Müasir şablonlardakı məzmun ümumiyyətlə dinamikdir, buna görə onların dizaynı müxtəlif vəziyyətlərə və mətnlərin uzunluğuna düzgün uyğunlaşmalıdır. Bəzən kifayət qədər böyük bir xətt girmək, səhifənin görünüşünü poza bilər.

Hər şeyin yaxşı olub olmadığını yoxlamaq üçün məzmunu / başlıqları birbaşa brauzerdə düzəldə bilərsiniz - bunun üçün sənəd yazdığınız "Console" sekmesine gedin və direktivi yazın.

Bundan sonra yuxarı pəncərədəki məzmun səhifəsini redaktə edə biləcəksiniz. Əslində bənzər bir hiylə istifadə etdim, amma HTML sekmesinde hər şeyi etdim, amma nəyəsə təbii ki daha vizual və təsirli olur.

Əşyaları gizlədir

Bu üsul heç bir obyekt olmadan necə görünəcəyini görmək istədikdə nizamın görünüşünü tez dəyişdirmək üçün faydalıdır. Şablonun bir və ya digər hissəsini çıxartdığım ikinci səbəb, onsuz bir ekran görüntüsünün alınmasıdır. Əvvəllər cismani HTML-dən sadəcə sildim, amma daha yaxşı bir metodun olduğu ortaya çıxdı - elementi seçin və "h" düyməsini basın. Əslində, bu hərəkət görünmə CSS xüsusiyyətini aktivləşdirir.

Sürətli sinif kommutasiyası

Bir neçə dizayn seçimini müqayisə etməlisinizsə, onda Google Chrome Devtools vasitəsilə bunu çox dəqiq şəkildə həyata keçirə bilərsiniz. Bunu etmək üçün əvvəlcə uyğun üslublara sahib olmalısınız. Sonra, ya HTML koduna birbaşa dəyişiklik edin və ya daha gözəl bir həll istifadə edin:

Bu nümunədə Codepen ilə sınaqdan keçirə bilərsiniz. Sağ pəncərədə ".cls" seçimini aktivləşdirin və sonra sətirdə istədiyiniz sinifin adını yazın və Enter düyməsini basın - keçid siyahısına əlavə olunacaq. Sonra müvafiq qutuları işarələyin / yoxlayın.

CSS vizual redaktoru

CSS üslublarının bəzi xüsusiyyətləri üçün, Chrome Developer Tool təcrübəsiz istifadəçilərin həyatını çox asanlaşdıracaq parametrləri olan xüsusi informasiya qutularına malikdir. Siçan imlecini sağ alt küncünə köçürsəniz, üç nöqtəli bir işarə orada görünəcək və üzərində funksiyaların əlavə menyusu görünür.

Bunlar aşağıdakı variantları idarə etməyə imkan verir:

  • mətn kölgəsi - mətnin kölgəsi,
  • box-shadow - blokun kölgəsi,
  • rəng - məzmun rəngi
  • background-color - fon rəngi.

Budur, bu köməkçi vasitələrin görünüşü:

Onlar yalnız xüsusiyyətləri yaratmaq üçün deyil, həm də onları redaktə edərkən çağırılırlar. Bütün dəyərlər səhifədə dərhal görünür, bu da müxtəlif dizayn seçimlərini real vaxtda sınamağa imkan verir. Başlanğıc veb ustaları / dizaynerləri yararlı vəziyyətə gəlir.

Sonda mövzuya dair faydalı bir video:

Cəmi Chrome üçün bu genişləndirmə daha çox faydalı funksiyanı ehtiva edir, buna görə gələcəkdə məqaləni daha bir neçə həyat qolu ilə əlavə etməyi düşünürəm. Bütün variantların və təlim kitablarının izahı olan rəsmi sənədləri oxumağı da məsləhət görürəm.

Google Chrome Developer Alətlərinizi işinizdə istifadə edirsiniz? Yəqin ki, bundan istifadə üçün başqa maraqlı üsulları bilirsiniz?

Pin
Send
Share
Send
Send