Veb-dizaynerlar, ishlab chiquvchilar va sinovchilar uchun o'rnatilgan asboblar
Internetdan foydalanishni xohlaydigan har kungi foydalanuvchi haqida o'ylaydigan brauzerlarning ko'pchiligiga qo'shimcha ravishda, ular veb-ishlab chiquvchilar, dizaynerlar va sifat kafolati mutaxassislariga kuchli foydalanuvchilarni brauzerlar ichiga integratsiya qilish orqali ushbu foydalanuvchilarga kiradigan ilovalar va saytlarni yaratishda yordam beradi. o'zlarini.
Bir brauzerda topilgan yagona dasturiy va sinov vositalari sahifaning kodini ko`rish va boshqa hech narsa bo`lmagan kunlar bo`ldi. Bugungi brauzerlar JavaScript qismlarini bajarish va disk raskadrovka qilish, DOM elementlarini tekshirish va tahrir qilish, ilovalar yoki sahifalar yuklangani kabi daraxtlarni aniqlash, CSS ishlashini tahlil qilish, kodingizning ishonchli bo'lishini ta'minlash kabi juda ko'p chuqur sho'ng'in qilishiga imkon beradi. juda ko'p xotira yoki juda ko'p CPU aylanishidan foydalanmasdan va yana ko'p narsalar. Sinov nuqtai nazaridan, ilovani yoki veb-sahifani turli xil brauzerlarda, shuningdek turli qurilma va platformalarda qanday ta'sirchan dizaynerlik seansi va o'rnatilgan simulyatorlar yordamida amalga oshirishi mumkin. Eng muhimi, bularning barchasini brauzeringizni tark etmasdan qilishingiz mumkin!
Quyidagi darsliklar sizga bir nechta mashhur veb-brauzerlarda ushbu ishlab chiquvchi vositalariga qanday kira olishingiz mumkinligi haqida ma'lumot beradi.
Gugl xrom
Chrome ishlab chiquvchi vositalari sizga kodni tahrirlash va disk raskadrovka qilish, ishlash komponentlarini tekshirish, turli xil qurilma ekranlarini simulyatsiya qilish, jumladan Android yoki iOS ishlaydiganlarni simulyatsiya qilish va boshqa foydali vazifalarni bajarishga imkon beradi.
- Brauzerning yuqori o'ng burchagida joylashgan va uchta gorizontal chiziq bilan belgilangan Chrome asosiy menyu tugmasiga bosing.
- Ochilgan menyuni ko'rsangiz, sichqonchaning kursorini Boshqa uskunalar-ga o'ting .
- Endi quyi menyu ko'rsatilishi kerak. Tuzuvchi vositalari etiketli variantni tanlang. Ushbu menyu elementining o'rniga quyidagi klaviatura yorliqlarini ishlatishingiz mumkin: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Chrome dasturchilar interfeysi interfeysi endi ushbu misolda ko'rsatilgandek ko'rsatilishi kerak. Chrome versiyasiga qarab, ko'rgan dastlabki tartib bu erda taqdim etilganidan bir oz farq qilishi mumkin. Odatda ekranning pastki yoki o'ng tomonida joylashgan ishlab chiquvchi asboblar asosiy qismi quyidagi yorliqlarni o'z ichiga oladi.
Elementlar: CSS-ni va HTML-kodni tekshirish, shuningdek, haqiqiy vaqtda CSS-ni tahrir qilish, o'zgarishlarning ta'sirini ko'rish imkoniyatini beradi.
Konsol: Chrome JavaScript konsoli to'g'ridan-to'g'ri buyruq kiritish va diagnostika disk raskadrovka uchun ruxsat beradi.
Manbalar: JavaScript kodini kuchli grafik interfeys orqali disk raskadrovka qilish imkonini beradi.
Tarmoq: Tegishli so'rov va javob sarlavhalari va ilg'or vaqt metrikalari, shu jumladan faol dastur yoki sahifada har bir bog'liq operatsiya haqida batafsil ma'lumotlarni tasniflaydi va ko'rsatadi.
Vaqt jadvalini: sahifa yoki ilova yuklash so'rovi boshlanganidan so'ng brauzerda sodir bo'lgan har bir faoliyatni chuqur tahlil qilish imkonini beradi. - Ushbu bo'limlarga qo'shimcha ravishda, Timeline tabining o'ng tomonida joylashgan >> belgisi orqali quyidagi vositalarga ham kirishingiz mumkin.
Foydalanuvchining profili: CPU profiler va Heap profiler bo'limlariga ajratilgan, faol dastur yoki sahifaning keng qamrovli xotira foydalanish va umumiy ijro muddati beradi.
Xavfsizlik: sertifikat muammolarini va faol sahifa yoki ilovaga ega bo'lgan xavfsizlikka oid boshqa muammolarni ta'kidlaydi.
Resurslar: Bu yerda cookie-fayllarni, mahalliy saqlash, ilova keshini va joriy veb-sahifa yoki ilovadan foydalanadigan boshqa mahalliy manbalarni tekshirishingiz mumkin.
Tekshiruvlar: Bir sahifani yoki ilovaning yuklanish vaqtini va umumiy ishlashni optimallashtirish usullarini taklif qiladi. - Device rejimi , faol sahifani xuddi iPad, iPhone va Samsung Galaxy kabi bir qancha mashhur Android va iOS modellari, jumladan, o'nlab qurilmalardan birida paydo bo'ladigan simulyatorda ko'rish imkonini beradi. Bundan tashqari, siz maxsus ishlab chiqish yoki sinov ehtiyojlaringizga mos keladigan maxsus ekran ruxsatlarini taqlid qilish qobiliyati berilgan. Qurilma rejimini yoqish va o'chirish uchun Elements yorlig'ining chap tomonida joylashgan mobil telefon tasvirini tanlang.
- Shuningdek, dastlab vertikal joylarda joylashtirilgan va yuqorida keltirilgan yorliqlarning eng o'ng tomonida joylashgan menyu tugmachasini bosish orqali ishlab chiquvchi vositalaringizning ko'rinishini va hisini sozlashingiz mumkin. Ushbu ochilgan menyuda siz turli xil vositalarni ko'rsatish, shuningdek, qurilma inspektori kabi yanada rivojlangan narsalarni ishga tushirishingiz mumkin. Dev asbob interfeysining o'zi ushbu bo'limda keltirilgan sozlamalar orqali yuqori moslashuvchan bo'lishi mumkinligini topasiz.
Mozilla Firefox
Firefox-ning veb-Geliştiricisi qismida uslublar muharriri va pikselli maqsadli tomoshabop kabi dizaynerlar, ishlab chiquvchilar va sinovchilar uchun vositalar mavjud.
Tavsiya etilgan o'qish: Top 25 Greasemonkey va Tampermonkey User Scripts
- Firefox asosiy menyu tugmachasini bosib, gorizontal chiziqlar bilan ko'rsatilgan va brauzer oynasining yuqori o'ng burchagida joylashgan.
- Ochilgan menyuni ko'rsangiz, Geliştirici deb belgilangan belgini tanlang. Quyidagi variantlarni o'z ichiga olgan Web Developer menyusi ko'rsatilishi kerak. Ko'p menyu elementlari ular bilan biriktirilgan klaviatura yorliqlari mavjudligini ko'rasiz.
Toggle Tools (Tools Toggle: Toggle Tools (Tools Toggle: Toggle Tools (Tools Toggle): brauzer oynasining pastki qismida joylashtirilgan, ishlab chiquvchi vositalari interfeysini ko'rsatadi yoki yashiradi. Qisqa klavishalar: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Nazoratchi: Siz faol sahifada va uzoqdan disk raskadrovka orqali ko'chma qurilmada CSS va HTML kodini tekshirish va / yoki o'zgartirishingiz mumkin. Klaviatura tugmasi : Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Veb konsoli: Siz faol sahifada JavaScript-ni ifodalaydi, shuningdek xavfsizlik ma'lumotlari, tarmoq so'rovlari, CSS xabarlari va boshqalar kabi turli xil tizimga kirilgan ma'lumotlarni ko'rib chiqishni ta'minlaydi. Klaviatura yorlig'i: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Xato aylantiruvchi: JavaScript tuzatuvchi nuqtali nuqtali belgilash, DOM tugunlarini tekshirish, tashqi manbalardan qora qutilarini tekshirish va boshqa ko'plab nuqsonlarni aniqlash va tuzatishga imkon beradi. Inspektorda bo'lgani kabi, bu xususiyat uzoqdan tuzatishni ham qo'llab-quvvatlaydi. Klaviatura yorlig'i: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Style tahrirlovchisi: Siz yangi uslub sahifalarini yaratishga va ularni faol veb-sahifasi bilan birlashtirishga, mavjud varaqlarni tahrirlashga va o'zgarishlarni faqat bir marta bosish bilan brauzerda qanday ishlashini tekshirishga imkon beradi. Klaviatura tugmasi : Mac OS X, Windows ( SHIFT + F7 )
Ishlash: Faol sahifaning tarmoq ishlashi, kvadrat tezligi ma'lumotlari, JavaScript-ni bajarish vaqti va holati, bo'yashning porlashi va boshqa ko'p narsalarni batafsil yoritib beradi. Klaviatura tugmasi : Mac OS X, Windows ( SHIFT + F5 )
Tarmoq: Brauzer tomonidan boshlangan har bir tarmoq so'rovini tegishli usul bilan, boshlang'ich domeni, turi, o'lchami va o'tgan vaqtni ro'yxatlaydi. Klaviatura yorlig'i: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Dasturchi asboblar paneli: Interaktiv buyruqlar qatorini tarjimonini ochadi. Barcha mavjud buyruqlar ro'yxati va ularning to'g'ri sintaksisi uchun tarjimonga yordam bering . Klaviatura tugmasi : Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Firefox OS yoki Firefox OS simulyatori yordamida ishlaydigan haqiqiy qurilma orqali veb-ilovalarni yaratish va amalga oshirish qobiliyatini beradi. Klaviatura tugmasi : Mac OS X, Windows ( SHIFT + F8 )
Brauzer konsoli: Veb konsolida (yuqoriga qarang) bir xil funksionallikni ta'minlaydi. Ammo qaytarilgan barcha ma'lumotlar faqat faol veb-sahifaga qarama-qarshi bo'lgan barcha Firefox ilovasi ( kengaytmalarni va brauzer darajasidagi funktsiyalarni o'z ichiga oladi) uchun. Qisqa klavishalar: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Ta'sirchan Ustasi ko'rinishi: Veb-sahifani darhol planshet va smartfonlar, jumladan, bir nechta qurilmalarni taqqoslash uchun turli ruxsatlarda, tartiblar va ekran o'lchamlarida ko'rish imkonini beradi. Klaviatura tugmasi : Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Damlacık: Har bir tanlangan piksel uchun hex rang kodini ko'rsatadi.
Scratchpad : Sizga Firefox pop-up oynasida JavaScript kodining parchalarini yozish, tahrir qilish, integratsiya qilish va amalga oshirish imkonini beradi. Klaviatura tugmasi : Mac OS X, Windows ( SHIFT + F4 )
Sahifa manbai: Original brauzer-asosidagi ishlab chiquvchi vositasi, ushbu parametr faqat faol sahifada mavjud bo'lgan manba kodini ko'rsatadi. Klaviatura yorliqlari: Mac OS X ( Buyruq + U ), Windows ( CTRL + U )
Ko'proq Asboblar: Mozilla-ning rasmiy plaginlari saytida Web Developer-ning Toolbox to'plamini ochadi, Firebug va Greasemonkey kabi o'nlab mashhur kengaytmalari mavjud.
Microsoft Edge / Internet Explorer
Odatda F12 Tuzuvchi asboblari deb nomlangan, Internet Explorerning avvalgi versiyalaridan boshlab interfeysni ishga tushirgan klaviatura yorlig'iga hurmat, IE11 va Microsoft Edge qurilmalaridagi yirik asboblar juda qadimdan juda qulay bo'lgan guruhni taklif qildilar. monitorlar, disk raskadrovchilar, emulyatorlar va samolyotda kompilyatorlar.
- Uch nuqta bilan tasvirlangan va brauzer oynasining yuqori o'ng burchagida joylashgan Yana harakatlar menyusini bosing. Ochilgan menyuni ko'rsangiz, F12 Developer Tools deb nomlangan variantni tanlang. Yuqorida aytib o'tganimdek, F12 klaviaturasi orqali vositalarga ham kirishingiz mumkin.
- Rivojlanish interfeysi, odatda brauzer oynasining pastki qismida ko'rsatilishi kerak. Quyidagi vositalar mavjud, ularning har biri mos keladigan yorliq sarlavhasini bosish yoki unga biriktirilgan klaviatura yorlig'ini bosish orqali mavjud bo'ladi.
DOM Explorer: Siz faol sahifadagi uslublar jadvallari va HTMLni tahrirlashingiz, o'zgartirilgan natijalarni ko'rsatgan holda ko'rsatishingiz mumkin. Mavjud hollarda kodni avtomatik yakunlash uchun IntelliSense funksiyasidan foydalanish. Klaviatura tugmasi : (CTRL + 1)
Konsol: Integratsiyalangan API orqali taymerlar, taymerlar, izlar va moslashtirilgan xabarlarni o'z ichiga olgan disk raskadrovka ma'lumotlarini taqdim etish imkoniyatini beradi. Bundan tashqari, kodni faol veb-sahifaga joylashtirish va individual o'zgaruvchiga tayinlangan qiymatlarni real vaqtda o'zgartiring. Klaviatura tugmasi : (CTRL + 2)
Debugger: Siz chiqib ketish nuqtalarini o'rnatsangiz va bajarilayotganda kodingizni disk raskadrovka qilishga ruxsat berasiz Klaviatura tugmasi : (CTRL + 3)
Tarmoq: Sahifaning yuklanishida va protokol ma'lumotlari, kontent turi, tarmoqli kengligi foydalanish va boshqa ko'p narsalar, jumladan, brauzer tomonidan boshlangan har bir tarmoq so'rovini ko'rsatadi. Klaviatura tugmasi : (CTRL + 4)
Ishlash: sahifa yuklanish vaqtlarini va boshqa faoliyatni tezlashtirishga yordam berish uchun tafsilotlarni ko'rish, CPU foydalanish va boshqa ishlashga bog'liq o'lchovlar. Klaviatura tugmasi : (CTRL + 5)
Xotira: turli xil vaqt oralig'idagi oniy tasvirlar bilan birga xotira foydalanish jadvali ko'rsatilib, mavjud veb-sahifada mumkin bo'lgan xotira sızıntılarını yalıtmanıza va düzeltmenize yordam beradi. Klaviatura tugmasi : (CTRL + 6)
Emulation: Sizga faol sahifaning smartfonlar, planshetlar va boshqa qurilmalarni aks ettiruvchi turli rezolyutsiyalarda va ekranning o'lchamlarida qanday ishlashini ko'rsatadi. Bundan tashqari, foydalanuvchi agentini va sahifa yo'nalishini o'zgartirib, kenglik va uzunlik kiritish orqali turli geologik joylashuvlarni simulyatsiya qilish imkoniyatini beradi. Klaviatura tugmasi : (CTRL + 7) - Konsolni boshqa asboblar ichida ko'rish uchun, brauzerni o'ng burchagidagi kvadrat tugmachani bosish va rivojlantirish vositasi interfeysi yuqori o'ng burchagida joylashgan.
- Ishlab chiquvchining interfeyslari ochish uchun alohida oyna ochiladi, ikkita kaskadli to'rtburchak ko'rinadigan tugmani bosing yoki quyidagi klaviatura yorliqlarini tanlang: CTRL + P. Avtomobillarni asl holatiga qaytarish uchun CTRL + P tugmasini yana bir marta bosishingiz mumkin.
Apple Safari (faqat OS X)
Safarining turli xil asboblari o'zlarining dizayni va dasturiy ehtiyojlari uchun Macdan foydalanadigan yirik ishlab chiquvchi jamiyatni aks ettiradi. Kuchli konsol va an'anaviy yozish va disk raskadrovka xususiyatlaridan tashqari, qulay foydalanishga qulay dizayn rejimi va o'z brauzer kengaytmalari yaratish uchun vosita ham taqdim etiladi.
- Ekraningizning yuqorisida joylashgan brauzer menyusida Safari- ni bosing. Ochilgan menyuni ko'rsatsangiz, Preferences-ni tanlang. Siz ushbu menyu elementining o'rniga quyidagi klaviatura yorliqlarini ishlatishingiz mumkin: COMMAND + COMMA (,)
- Safari-ning afzalliklari interfeysi endi brauzer oynasini joylashtirishingiz kerak. Üstbilginin o'ng tomonida joylashgan Kengaytirilgan belgisini bosing.
- Murakkab imtiyozlar hozir ko'rinishi kerak. Ushbu ekranning pastki qismida, menyu panelidagi Show Show menyusiga yorliq bilan birga ko'rsatiladigan parametr mavjud . Qutida ko'rsatilgan tasdiq belgisi bo'lmasa, u erga joylashtirish uchun bir marta bosing.
- Yuqori chap burchakdagi qizil "x" belgisini bosish orqali Tercihlar interfeyini yoping.
- " Bookmark" va " Window" o'rtasida joylashgan " Develop" nomli brauzer menyusida yangi variantni ko'rasiz. Ushbu menyu elementini bosing. Quyidagi variantlarni o'z ichiga olgan ochiladigan menyuni ko'rsatish kerak.
Quyidagi bilan ochish: Faol veb-sahifani Mac-da o'rnatilgan boshqa brauzerlardan birida ochishga imkon beradi.
User Agent: Siz Chrome, Firefox va Internet Explorer-ning bir nechta versiyalari, shuningdek, o'zingizning maxsus stratingingizni belgilaydigan o'nlabroq oldindan belgilangan foydalanuvchi vositachiligini tanlashingiz mumkin.
Ta'sirchan Ustoz rejimiga o'tish : Joriy sahifani turli xil qurilmalarda va turli ekran ruxsatlarida aks ettiradigan tarzda taqdim etadi.
Veb-inspektorni ko'rsatish: Safari-ning dev asboblari uchun asosiy interfeysni ochadi, odatda brauzer ekranining pastki qismiga joylashadi va quyidagi qismlarni o'z ichiga oladi: Elements , Network , Resources , Timeline , Debugger , Storage , Console .
Xato konsolini ko'rsatish: Bundan tashqari, to'g'ridan-to'g'ri xatolar, ogohlantirishlar va boshqa izlanadigan log ma'lumotlarini ko'rsatadigan Konsol ilovasiga to'g'ridan-to'g'ri dev asbob interfeysini ishga tushiradi.
Sahifa ma`lumotini ko'rsatish: Hujjatga toifalarga kiritilgan faol sahifaning manba kodini ko'rsatadigan manbalar yorlig'ini ochadi.
Sahifa resurslarini ko`rsatish : Sahifa ma`lumotlarini ko'rsatish vazifasi bilan bir xil vazifani bajaradi.
Snippet tahrirlovchisini ko'rsating: CSS-ni va HTML kodini kiritishingiz mumkin bo'lgan yangi oynani ochadi.
Extension Builder dasturini ko'rsatish: Safari kengaytmasini CSS, HTML va JavaScript yordamida yaratish yoki tahrir qilish imkoniyatini beradi.
Vaqt jadvalini yozishni ko'rsatish: vaqt jadvalini yorlig'ini ochadi va tarmoq so'rovlarini, tartibini va renderlash ma'lumotlarini va ayni vaqtda JavaScript-ni ijro etilishini real vaqtda ko'rsatishga kirishadi.
Bo'sh keshlarni bo'shatish: hozirda qattiq diskda saqlanadigan barcha keshni o'chiradi.
Keshlarni o'chirib qo'yish: Safari-ni keshlashdan to'xtatadi, shuning uchun barcha tarkiblar har bir sahifa yukida serverdan olinadi.
Rasmlarni o'chirib qo'yish: Tasvirlarni barcha veb-sahifalarda ko'rsatishdan saqlaydi.
Uslublarni o'chirib qo'yish: sahifa yuklanganida CSS xususiyatlarini e'tiborsiz qoldiradi.
JavaScriptni o'chirib qo'yish: Barcha sahifalarda JavaScript-ni bajarilishini cheklaydi.
Kengaytmalarni o'chirib qo'yish: Barcha o'rnatilgan kengaytmalarni brauzerda ishlashni taqiqlaydi.
Saytga xos xarakatlarni o'chirib qo'yish: Safari faol veb-sahifasiga xos muammolar aniq ifodalash uchun o'zgartirilgan bo'lsa, ushbu parametr ushbu o'zgarishlarni oldini olish uchun sahifani yuklamasdan avvalgi kabi yuklaydi.
Mahalliy fayl cheklovlarini o'chirib qo'yish: Brauzer mahalliy disklardagi fayllarga kirish huquqini beradi, chunki bu xavfsizlik sababli sukut bo'yicha cheklangan.
Chorvachilikning cheklovlarini bekor qilish: XSS va boshqa potentsial xavflarning oldini olish uchun bu cheklovlar sukut bo'yicha amalga oshiriladi. Biroq, ular ko'pincha rivojlanish maqsadlarida vaqtinchalik o'chirib qo'yish kerak.
Matnni qidirish maydonidan JavaScript'ga ruxsat berish: yoqilganda, manzillarni to'g'ridan to'g'ri qo'shilgan javascript bilan URL manzillarini kiritish imkoniyatini beradi.
SHA-1 sertifikatlarini xavfli deb hisoblang: SHA-1 algoritmidan foydalangan holda SSL sertifikatlari keng miqyosda eskirgan va himoyasizdir.