Sovuq Chrome DevTools-ga oid maslahatlar va fokuslar

JavaScript-ni o'rganishga qiziqasizmi? Bepul elektron kitobimni jshandbook.com saytidan oling

Agar siz ushbu ajoyib brauzer xususiyatiga ega bo'lsangiz, Chrome DevTool-lar haqida umumiy ma'lumotni ko'rib chiqing!

1. Elementlar panelida harakatlantiring

Elementlar panelida istalgan HTML elementini sudrab tashlashingiz va sahifadagi o'rnini o'zgartirishingiz mumkin

Elementlar panelida harakatlantiring

2. Konsolda tanlangan elementga murojaat qiling

Elementlar panelida tugunni tanlang va unga murojaat qilish uchun konsolda $ 0 yozing.

Agar siz jQuery-dan foydalanayotgan bo'lsangiz, ushbu elementdagi jQuery API-ga kirish uchun $ ($ 0) raqamini kiritishingiz mumkin.

Konsolda tanlangan elementga murojaat qiling

3. Konsolda oxirgi operatsiya qiymatidan foydalaning

Konsolda bajarilgan avvalgi operatsiyani qaytarish qiymatiga murojaat qilish uchun $ _ dan foydalaning

Konsolda oxirgi operatsiya qiymatidan foydalaning

4. CSS-ni qo'shing va elementlar holatini tahrirlang

Elementlar panelida ikkita foydali foydali tugma mavjud.

Birinchisi sizga istalgan selektor bilan yangi CSS xususiyatini qo'shishga imkon beradi, ammo tanlangan elementni oldindan to'ldirish:

CSS qoidalarini qo'shing

Ikkinchisi tanlangan elementning holatini ishga tushirishga imkon beradi, shu bilan siz faol, yuqori yoki diqqat markazida bo'lganda qo'llaniladigan uslublarni ko'rishingiz mumkin.

Element holatini tahrirlang

5. O'zgartirilgan CSS faylini saqlash uchun saqlang

Siz tahrir qilgan CSS fayl nomini bosing. Nazoratchi uni Manbalar panelida ochadi va u erdan siz murojaat qilgan jonli tahrirlar bilan saqlashingiz mumkin.

Ushbu hiyla +, yoki element.style xususiyatlariga qo'shilgan yangi tanlanganlar uchun ishlamaydi, faqat o'zgartirilgan va mavjud bo'lganlar uchun ishlaydi.

O'zgartirilgan CSS-ni saqlash uchun saqlash

6. Skrinshot bitta element

Elementni tanlang va buyruqlar menyusini ochish uchun cmd-shift-p (yoki Windows-dagi ctrl-shift-p) tugmachasini bosing va Capture tugunining skrinshotini tanlang.

Skrinshot bitta element

7. CSS-ni tanlang

Cmd-f (Windows-dagi ctrl-f) tugmachasini bosish "Element" panelida qidirish oynasini ochadi.

Siz manba kodiga mos keladigan har qanday satrni terishingiz mumkin, yoki Chrome sizga rasm yaratishi uchun CSS tanlagichlaridan ham foydalanishingiz mumkin:

CSS-ni tanlang

8. Konsolda Shift-kiritish

Konsolda bir nechta satrlarni bosib o'tgan buyruqlarni yozish uchun shift-Enter ni bosing.

Tayyor bo'lganingizdan so'ng uni bajarish uchun skriptning oxiridagi Enter ni bosing:

Ko‘p darajali buyruqlarni yozish uchun Konsolda Shift-kiriting

Siz konsolni yuqori chap tomonidagi "Clear" tugmachasi yordamida yoki ctrl-l yoki cmd-k tugmalarini bosib tozalashingiz mumkin.

9.… ga o'ting

Manbalar panelida:

  • cmd-o (Windows-dagi ctrl-o) sahifangiz tomonidan yuklangan barcha fayllarni ko'rsatadi.
  • cmd-shift-o (Windows-dagi ctrl-shift-o) joriy fayldagi belgilar (xususiyatlar, funktsiyalar, sinflar) ni ko'rsatadi.
  • ctrl-g ma'lum bir qatorga o'tadi.
Faylga o'ting

10. Tomosha iborasi

Debug sessiyasida ko'p narsalarni tekshirib ko'rmoqchi bo'lgan o'zgaruvchan nom yoki iborani qayta-qayta yozish o'rniga, uni "Ko'rgazmali so'zlar" ro'yxatiga qo'shing.

Ifodani tomosha qiling

11. XHR / Fetch disk raskadrovka

Tuzatuvchidan XHR / Fetch Breakpoints panelini oching.

Siz uni har qanday XHR / Fetch qo'ng'irog'i yoki faqat ma'lum qo'ng'iroqlarni yuboradigan vaqtni o'chirib qo'yishingiz mumkin:

XHR / Fetch disk raskadrovka

12. DOM modifikatsiyasini tuzatish

Elementga sichqonchaning o'ng tugmasi bilan bosing va "Break on Subtree Moditions" ni yoqing. Har doim biron bir skript ushbu elementning bolalarini chetlab o'tib, ularni o'zgartirsa, tuzatuvchi avtomatik ravishda to'xtaydi, nima bo'layotganini tekshirishga imkon beradi.

DOM modifikatsiyasini tuzatish
JavaScript-ni o'rganishga qiziqasizmi? Bepul elektron kitobimni jshandbook.com saytidan oling