Veb-brauzer ishlab chiquvchi vositalaridan qanday foydalanish kerak

2024 Muallif: Abigail Brown | [email protected]. Oxirgi o'zgartirilgan: 2023-12-17 07:04

Koʻpchilik brauzer ishlab chiqaruvchilari internetda kezmoqchi boʻlgan kundalik foydalanuvchilarga eʼtibor qaratishdan tashqari, ular kuchli veb-saytlarni integratsiyalashgan holda ushbu foydalanuvchilar kirishayotgan ilova va saytlarni yaratishda yordam beradigan veb-ishlab chiquvchilar, dizaynerlar va sifat kafolati boʻyicha mutaxassislarga ham xizmat koʻrsatadilar. asboblarni brauzerlarning oʻzida.

Brauzerda topilgan yagona dasturlash va sinov vositalari sahifaning manba kodini koʻrish imkonini beradigan kunlar oʻtib ketdi. Bugungi brauzerlar JavaScript snippetlarini bajarish va disk raskadrovka qilish, DOM elementlarini tekshirish va tahrirlash, qiyinchiliklarni aniqlash uchun ilova yoki sahifa yuklanayotganda real vaqtda tarmoq trafigini kuzatish, CSS ishlashini tahlil qilish, kodingizning yaxlitligini taʼminlash kabi ishlarni bajarish orqali sizga chuqurroq shoʻngʻin qilish imkonini beradi. juda ko'p xotira yoki juda ko'p protsessor davrlarini ishlatmaslik va boshqalar.

Sinov nuqtai nazaridan, sezgir dizayn va oʻrnatilgan simulyatorlar sehri orqali ilova yoki veb-sahifa turli brauzerlarda, shuningdek, turli qurilmalar va platformalarda qanday koʻrsatilishini takrorlashingiz mumkin. Eng yaxshi tomoni shundaki, bularning barchasini brauzerdan chiqmasdan ham qilishingiz mumkin!

Quyidagi qoʻllanmalar bir nechta mashhur veb-brauzerlarda ushbu dasturchi vositalariga qanday kirishni koʻrsatib beradi.

Google Chrome

Chrome ishlab chiquvchi vositalari sizga kodni tahrirlash va disk raskadrovka qilish, unumdorlik bilan bogʻliq muammolarni aniqlash uchun alohida komponentlarni tekshirish, turli xil qurilmalar ekranlarini, jumladan, Android yoki iOS ishlayotganlarni taqlid qilish va boshqa foydali funksiyalarni bajarish imkonini beradi.

1. Chromening asosiy menyusini tanlang, uchta gorizontal chiziq bilan belgilangan va brauzerning yuqori oʻng burchagida joylashgan.

2. Ochiladigan menyu paydo boʻlganda sichqoncha kursorini Boshqa asboblar opsiyasi ustiga olib boring.

   

3. Endi pastki menyu paydo bo'lishi kerak. Dasturchi vositalari etiketli variantni tanlang. Ushbu menyu bandi oʻrniga quyidagi klaviatura yorliqlaridan ham foydalanishingiz mumkin: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Mana shu skrinshotda koʻrsatilganidek, Chrome Developer Tools interfeysi endi koʻrsatilishi kerak. Chrome versiyasiga qarab, siz ko'rgan dastlabki tartib bu yerda taqdim etilganidan biroz farq qilishi mumkin. Odatda ekranning pastki yoki o‘ng tomonida joylashgan dasturchi vositalarining asosiy markazi quyidagi varaqlarni o‘z ichiga oladi.

5. Ushbu boʻlimlarga qoʻshimcha ravishda siz quyidagi vositalarga >> belgisi orqali kirishingiz mumkin, bu Performance oʻng tomonida joylashgan tab.

   • Xotira: Xotiradan foydalanishni veb-sahifada kuzatib boring va yozib oling. Saytingizdagi JavaScript qanchalik ogʻirligini koʻrishingiz mumkin.
   • Xavfsizlik: faol sahifa yoki ilova bilan sertifikat muammolari va xavfsizlik bilan bogʻliq boshqa muammolarni ajratib koʻrsatadi.
   • Ilova: Veb-ilova tomonidan foydalanilayotgan resurslarni tekshiring. Foydalanilayotgan narsalar haqida toʻliq maʼlumot oling.
   • Audits: sahifa yoki ilovaning yuklanish vaqti va umumiy unumdorligini optimallashtirish usullarini taklif qiladi.

   

6. Qurilma rejimi sizga faol sahifani simulyatorda koʻrish imkonini beradi, bu esa uni oʻndan ortiq qurilmalardan birida, jumladan, bir qancha taniqli Android qurilmalarida koʻrinadigandek koʻrsatadi. va iPad, iPhone va Samsung Galaxy kabi iOS modellari. Shuningdek, sizga maxsus ishlab chiqish yoki sinov ehtiyojlaringizga mos keladigan maxsus ekran o'lchamlarini taqlid qilish imkoniyati beriladi.

   Qurilma rejimini yoqish va oʻchirish uchun toʻgʻridan-toʻgʻri chap tomonda joylashgan mobil telefon belgisini tanlang. Elementlar varaq.

   

7. Shuningdek, avval menyu tugmasi uchta vertikal joylashtirilgan nuqta bilan ifodalanganmenyu tugmachasini tanlab, dasturchi vositalarining koʻrinishini ham sozlashingiz mumkin. va yuqorida aytib o'tilgan varaqlarning o'ng tomonida joylashgan.

   Ushbu ochiladigan menyudan siz dokning oʻrnini oʻzgartirishingiz, turli vositalarni koʻrsatishingiz yoki yashirishingiz, shuningdek, qurilma inspektori kabi ilgʻor elementlarni ishga tushirishingiz mumkin. Ishlab chiquvchi asboblar interfeysi ushbu boʻlimda joylashgan sozlamalar orqali juda moslashtirilganligini bilib olasiz.

   

Mozilla Firefox

Firefox veb-ishlab chiquvchilari boʻlimi dizaynerlar, ishlab chiquvchilar va testerlar uchun uslublar muharriri va pikselga moʻljallangan tomchi tomchi kabi vositalarni oʻz ichiga oladi.

1. Firefox-ning bosh menyusini tanlang, u uchta gorizontal chiziq bilan ifodalanadi va brauzer oynasining yuqori oʻng burchagida joylashgan.

2. Ochiladigan menyu paydo boʻlganda, Veb dasturchi-ni tanlang.

   

3. Endi Veb dasturchi menyusi koʻrsatilishi kerak, unda quyidagi parametrlar mavjud. Koʻpgina menyu bandlarida ular bilan bogʻlangan klaviatura yorliqlari borligini koʻrasiz.

   • Toggle Tools: Odatda brauzer oynasining pastki qismida joylashgan dasturchi vositalari interfeysini koʻrsatadi yoki yashiradi. Tezkor klaviatura: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspektor: Masofaviy disk raskadrovka orqali faol sahifadagi hamda portativ qurilmadagi CSS va HTML kodlarini tekshirish va/yoki sozlash imkonini beradi. Tezkor klaviatura: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Faol sahifada JavaScript ifodalarini bajarish, shuningdek, xavfsizlik ogohlantirishlari, tarmoq soʻrovlari, CSS xabarlari va boshqalarni oʻz ichiga olgan turli xil jurnal maʼlumotlarini koʻrib chiqish imkonini beradi.. Tezkor klaviatura: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript tuzatuvchisi uzilish nuqtalarini oʻrnatish, DOM tugunlarini tekshirish, qora boks tashqi manbalarini tekshirish va boshqalar orqali kamchiliklarni aniqlash va tuzatish imkonini beradi. Inspektorda bo'lgani kabi, bu xususiyat ham masofadan tuzatishni qo'llab-quvvatlaydi. Tezkor klaviatura: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Uslublar muharriri: Bir marta bosish bilan yangi uslublar jadvallarini yaratish va ularni faol veb-sahifaga qoʻshish yoki mavjud varaqlarni tahrirlash va oʻzgartirishlaringiz brauzerda qanday koʻrsatilishini tekshirish imkonini beradi.. Tezkor klaviatura: Mac OS X, Windows (SHIFT+F7)
   • Performance: Faol sahifaning tarmoq unumdorligi, kadrlar tezligi ma'lumotlari, JavaScript-ni bajarish vaqti va holati, bo'yoqning miltillashi va boshqa ko'p narsalar haqida batafsil ma'lumot beradi. Tezkor klaviatura: Mac OS X, Windows (SHIFT+F5)
   • Tarmoq: Brauzer tomonidan boshlangan har bir tarmoq soʻrovini tegishli usul, kelib chiqish domeni, turi, oʻlchami va oʻtgan vaqt bilan roʻyxatlaydi. Tezkor klaviatura: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Saqlash inspektori: Veb-sayt tomonidan saqlanayotgan kesh va cookie-fayllarni ko'rib chiqing. Tezkor klaviatura: (SHIFT+F9)
   • Tuzuvchi asboblar paneli: Interaktiv buyruq qatori tarjimonini ochadi. Barcha mavjud buyruqlar roʻyxati va ularning toʻgʻri sintaksisi uchun tarjimonga help kiriting. Tezkor klaviatura: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Firefox OS ishlaydigan haqiqiy qurilma yoki Firefox OS Simulator orqali veb-ilovalarni yaratish va bajarish imkoniyatini beradi. Tezkor klaviatura: Mac OS X, Windows (SHIFT+F8)
   • Brauzer konsoli: Veb-konsol bilan bir xil funksiyalarni ta'minlaydi (yuqoriga qarang). Biroq, qaytarilgan barcha ma'lumotlar faqat faol veb-sahifadan farqli o'laroq, butun Firefox ilovasi (shu jumladan kengaytmalar va brauzer darajasidagi funktsiyalar) uchundir. Tezkor klaviatura: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: Bir nechta qurilmalar, jumladan, planshetlar va smartfonlarga taqlid qilish uchun veb-sahifani turli ruxsatlar, tartiblar va ekran oʻlchamlarida bir zumda koʻrish imkonini beradi. Tezkor klaviatura: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Damlalik: Alohida tanlangan piksellar uchun olti burchakli rang kodini koʻrsatadi.
   • Scratchpad: Scratchpad sizga Firefox-ning qalqib chiquvchi oynasidan JavaScript kodining parchalarini yozish, tahrirlash, integratsiya qilish va bajarish imkonini beradi. Kodda yozish va uni veb-saytda sinab ko'rish imkonini beruvchi interaktiv JavaScript hujjatini oching. Klaviatura yorlig‘i: (SHIFT+F4)
   • Xizmat xodimlari: Veb-ilovangizdagi nosozliklarni tuzatish xizmati xodimlari. Ularning ishlashi va xatolari haqida batafsil maʼlumot oling.
   • Sahifa manbasi: Asl brauzerga asoslangan dasturchi vositasi, bu parametr faol sahifa uchun mavjud manba kodini koʻrsatadi. Tezkor klaviatura: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Qoʻshimcha asboblarni oling: Mozilla’ning rasmiy qoʻshimchalar saytida veb-ishlab chiquvchi asboblar qutisi toʻplamini ochadi, unda oʻnga yaqin mashhur kengaytmalar mavjud. Firebug va Greasemonkey sifatida.

   

Microsoft Edge/Internet Explorer

Odatda F12 Developer Tools deb ataladi, bu Internet Explorer-ning oldingi versiyalaridan boshlab interfeysni ishga tushirgan klaviatura yorlig'i, IE11 va Microsoft Edge-dagi ishlab chiquvchi asboblar to'plamiga hurmat. yaratilganidan beri juda qulay monitorlar, tuzatuvchilar, emulyatorlar va tez kompilyatorlar guruhini taklif qilish orqali uzoq yo'lni bosib o'tdi.

Microsoft endi Internet Explorer-ni qo'llab-quvvatlamaydi va yangiroq Edge brauzeriga yangilashni tavsiya qiladi. Eng yangi versiyani yuklab olish uchun ularning saytiga kiring.

1. Brauzer oynasining yuqori oʻng burchagida joylashgan va uch nuqta bilan ifodalangan Boshqa amallar ni tanlang.

   

2. Ochiladigan menyu paydo boʻlganda, Developer Tools deb nomlangan variantni tanlang.

   

3. Endi ishlab chiqish interfeysi odatda brauzer oynasining pastki qismida koʻrsatilishi kerak. Quyidagi vositalar mavjud boʻlib, ularning har biriga tegishli yorliq sarlavhasini bosish yoki ilovadagi klaviatura yorligʻidan foydalanish mumkin.

   

   • DOM Explorer: Faol sahifadagi uslublar jadvallari va HTMLni tahrirlash, oʻzgartirilgan natijalarni oʻzgartirish imkonini beradi. Kerakli hollarda kodni avtomatik to'ldirish uchun IntelliSense funksiyasidan foydalanadi. Tezkor klaviatura: (CTRL+1)
   • Console: Integratsiyalashgan API orqali hisoblagichlar, taymerlar, izlar va moslashtirilgan xabarlar kabi nosozliklarni tuzatish ma'lumotlarini yuborish imkoniyatini beradi. Shuningdek, faol veb-sahifaga kod kiritish va real vaqtda alohida o'zgaruvchilarga tayinlangan qiymatlarni o'zgartirish imkonini beradi. Tezkor klaviatura: (CTRL+2)
   • Debugger: Agar kerak boʻlsa, toʻxtash nuqtalarini oʻrnatish va kodni bajarilayotganda disk raskadrovka qilish imkonini beradi. Tezkor klaviatura: (CTRL+3)
   • Tarmoq: Sahifani yuklash va bajarish vaqtida brauzer tomonidan boshlangan har bir tarmoq soʻrovini roʻyxatlaydi, jumladan protokol tafsilotlari, kontent turi, tarmoqli kengligidan foydalanish va boshqalar. Tezkor klaviatura: (CTRL+4)
   • Performance: Sahifani yuklash vaqtlari va boshqa harakatlarni tezlashtirishga yordam berish uchun kadr tezligi, protsessordan foydalanish va boshqa unumdorlikka oid koʻrsatkichlar haqida maʼlumot beradi. Tezkor klaviatura: (CTRL+5)
   • Xotira: Joriy veb-sahifadagi mumkin boʻlgan xotira sizib chiqishini ajratish va tuzatishga yordam beradi va turli vaqt oraligʻidagi xotiradan foydalanish xronologiyasini koʻrsatadi. Tezkor klaviatura: (CTRL+6)
   • Emulyatsiya: Faol sahifa smartfonlar, planshetlar va boshqa qurilmalarga taqlid qilib, turli ruxsat va ekran oʻlchamlarida qanday koʻrsatilishini koʻrsatadi. Shuningdek, u foydalanuvchi agenti va sahifa yoʻnalishini oʻzgartirish, shuningdek, kenglik va uzunlikni kiritish orqali turli geolokatsiyalarni simulyatsiya qilish imkoniyatini beradi. Klaviatura yorlig‘i: (CTRL+7)

4. Konsol ni boshqa asboblar ichida koʻrsatish uchun ichida joylashgan oʻng qavsli kvadrat tugmani bosing. ishlab chiqish vositalari interfeysining yuqori oʻng burchagi.

   

5. Dasturchi vositalari interfeysini alohida oynaga aylantirish uchun oʻchirish uchun ikki kaskadli toʻrtburchaklar ni tanlang yoki quyidagi klaviatura yorliqlaridan foydalaning: CTRL+P. CTRL+P tugmalarini ikkinchi marta bosib, asboblarni asl joyiga qaytarishingiz mumkin.

   

Apple Safari (faqat Mac uchun)

Safari-ning turli ishlab chiquvchilar to'plami o'zlarining dizayn va dasturlash ehtiyojlari uchun Mac-dan foydalanadigan yirik dasturchilar hamjamiyatini aks ettiradi. Kuchli konsol va anʼanaviy jurnalga yozish va disk raskadrovka funksiyalariga qoʻshimcha ravishda foydalanish uchun qulay dizayn rejimi va oʻz brauzeringiz kengaytmalarini yaratish vositasi ham taqdim etilgan.

1. Ekraningizning yuqori qismida joylashgan brauzer menyusida Safari ni tanlang. Ochiladigan menyu paydo bo'lganda Preferences ni tanlang. Ushbu menyu bandi oʻrniga quyidagi klaviatura yorligʻidan ham foydalanishingiz mumkin: COMMAND+COMMA(,)

   

2. Safari-ning Preferences interfeysi endi brauzer oynasi ustida koʻrsatilishi kerak. Sarlavhaning eng o‘ng tomonida joylashgan Kengaytirilgan belgisini tanlang.

   

3. Kengaytirilgan sozlamalari endi koʻrinishi kerak. Ushbu ekranning pastki qismida menyu satrida Rivojlanish menyusini koʻrsatish yorligʻi bilan belgi qoʻyilgan variant mavjud. Agar katakchada hech qanday tasdiq belgisi ko'rsatilmagan bo'lsa, uni bir marta bosing.

   

4. Preferences interfeysini yoping.

5. Siz endi brauzer menyusida Develop nomli yangi variantni ko'rishingiz kerak, u Xatcho'plar va Oyna orasida joylashgan. Ushbu menyu elementini bosing. Endi quyidagi parametrlarni o'z ichiga olgan ochiladigan menyu ko'rinishi kerak.

   • Sahifani bilan ochish: Faol veb-sahifani Mac kompyuteringizda oʻrnatilgan boshqa brauzerlardan birida ochish imkonini beradi.
   • Foydalanuvchi agenti: Chrome, Firefox va Internet Explorer-ning bir nechta versiyalarini oʻz ichiga olgan oʻndan ortiq oldindan belgilangan foydalanuvchi agenti qiymatlari orasidan tanlash hamda oʻz shaxsiy shaxsiy sozlamalaringizni belgilash imkonini beradi. string.
   • Responsive dizayn rejimiga kiring: Joriy sahifani turli qurilmalarda va turli ekran oʻlchamlarida koʻrinadigandek koʻrsatadi.
   • Show Web Inspector: Safari-ning ishlab chiquvchi vositalari uchun asosiy interfeysni ishga tushiradi, odatda brauzer ekranining pastki qismida joylashgan va quyidagi bo'limlarni o'z ichiga oladi: Elementlar, Tarmoq, Resurslar, Xronologiya, tuzatuvchi, xotira, konsol.
   • Xatolik konsolini koʻrsatish: Shuningdek, toʻgʻridan-toʻgʻri Konsol yorligʻiga boʻlgan, xatolar, ogohlantirishlar va boshqa qidirish mumkin boʻlgan boshqa qurilmalar interfeysini ishga tushiradi. jurnal maʼlumotlari.
   • Sahifa manbasini koʻrsatish: Resurslar sahifasini ochadi, hujjat boʻyicha turkumlangan faol sahifaning manba kodini koʻrsatadi.
   • Sahifa manbalarini koʻrsatish: Sahifa manbasini koʻrsatish opsiyasi bilan bir xil funktsiyani bajaradi.
   • Snippet muharririni koʻrsatish: CSS va HTML kodini kiritishingiz mumkin boʻlgan yangi oyna ochiladi va uning chiqishini tez koʻrish mumkin.
   • Kengaytma yaratuvchisini koʻrsatish: CSS, HTML va JavaScript yordamida Safari kengaytmalarini yaratish yoki tahrirlash imkoniyatini beradi.
   • Xronologiya yozuvini koʻrsatish: Xronologiya yorligʻini ochadi va tarmoq soʻrovlari, joylashuvi va maʼlumotlarini koʻrsatish hamda real vaqtda JavaScript-ni bajarishni boshlaydi.
   • Keshlarni bo'sh: qattiq diskda saqlanayotgan butun keshni o'chiradi.
   • Keshlarni oʻchirish: Safari-ni keshlashdan toʻxtatib, har bir sahifa yuklanganda barcha kontent serverdan olinadi.
   • Rasmlarni oʻchirish: Tasvirlarning barcha veb-sahifalarda koʻrsatilishini oldini oladi.
   • Uslublarni oʻchirish: sahifa yuklanganda CSS xususiyatlarini eʼtiborsiz qoldiradi.
   • JavaScript-ni oʻchirib qoʻyish: Barcha sahifalarda JavaScript bajarilishini cheklaydi.
   • Kengaytmalarni oʻchirish: Oʻrnatilgan barcha kengaytmalarning brauzerda ishlashini taqiqlaydi.
   • Saytga xos xakerlarni oʻchirib qoʻyish: Agar Safari faol veb-sahifaga xos muammolarni(lar)ni aniq koʻrib chiqish uchun oʻzgartirilgan boʻlsa, bu parametr ushbu oʻzgarishlarni bloklaydi, shunda sahifa bu oʻzgartirishlar kiritilgunga qadar yuklangan.
   • Mahalliy fayl cheklovlarini oʻchirish: Brauzerga mahalliy disklaringizdagi fayllarga kirishga ruxsat beradi, bu xavfsizlik sababli sukut boʻyicha cheklangan.
   • Oʻzaro kelib chiqish cheklovlarini oʻchirib qoʻyish: XSS va boshqa ehtimoliy xavflarni oldini olish uchun bu cheklovlar sukut boʻyicha oʻrnatiladi. Biroq, tez-tez ishlab chiqish maqsadida ular vaqtincha o‘chirib qo‘yilishi kerak.
   • Aqlli qidiruv maydonidan JavaScript-ga ruxsat berish: yoqilganda, u javascript bilan URL-manzillarni kiritish imkoniyatini beradi: toʻgʻridan-toʻgʻri manzil satriga kiritilgan.
   • SHA-1 sertifikatlarini xavfsiz deb hisoblang: SHA-1 algoritmidan foydalanadigan SSL sertifikatlari eskirgan va zaif deb hisoblanadi.