Biz Chrome DevTools-dan foydalanmoqdamiz

  1. HTML elementlarini tez tahrir qiling
  2. Barcha bolalar elementlarini ochish
  3. Inspektorni ko'chirish
  4. DOM elementlarini qidirish
  5. Paletkalar
  6. Ko'p kursor
  7. Base64 tasvirini kodlash
  8. Pseudo-sinfni almashtirish
  9. Ustunni tanlash
  10. CURL uchun so'rovni nusxalash
  11. Ekran klaviaturasi
  12. Butun sahifaning ekrani
  13. Sensorli qurilmalarning taqlid qilishlari
  14. Foydali xususiyatlar

Nomidan kelib chiqqanidek, Chrome DevTools yoki veb-inspektor veb-ishlab chiquvchilar va u bilan bog'liq odamlar uchun mo'ljallangan vositadir. Veb-inspektor quyidagilarni bajarishga imkon beradi:

  • Displeyning to'g'riligini tekshiring.
  • Skriptlarning bajarilishini JavaScript-da kuzatib boring.
  • Tarmoq faoliyatini ko'rish.

Ushbu maqolani yozishda men foydalanar edim Kanareykalar - yangi xususiyatlar sinab ko'rilgan Chrome brauzerining versiyasi, keyin Chrome-ning barqaror versiyasiga tushadi.

Tekshirgichni boshlash uchun sahifadagi istalgan joyni o'ng tugmasini bosib, "View item code" ni tanlab, Ctrl + Shift + C ni bosishingiz mumkin.

HTML elementlarini tez tahrir qiling

Eng oddiy: tartibga solish elementlaridan boshlaylik.

Eng oddiy: tartibga solish elementlaridan boshlaylik

Qanday tekshirish mumkin:

  • Elementlar yorlig'ini tanlang.
  • Panel ichidagi har qanday HTML elementni tanlang.
  • Yorliqni ikki marta bosish va o'zgartirish, masalan, teg nomi.

Tahrirlash tugallangandan so'ng, yakunlovchi yorliq avtomatik ravishda yangilanadi.

Barcha bolalar elementlarini ochish

Qanday tekshirish mumkin:

  • Elementlar paneliga o'ting.
  • Elementni tanlang va Alt ushlab turganda elementning chap tomonidagi o'qni bosing.

Inspektorni ko'chirish

Inspektor panelini brauzer oynasining pastki qismiga va o'ng tomoniga bosish mumkin. Masalan, keng ekran monitorlarida ishlaydigan panelning o'ng tomonidagi joylashuvi qulay. Bundan tashqari, inspektor paneli alohida oynaga joylashtirilishi va masalan, boshqa monitorga o'tkazilishi mumkin.

Bundan tashqari, inspektor paneli alohida oynaga joylashtirilishi va masalan, boshqa monitorga o'tkazilishi mumkin

Qanday tekshirish mumkin:

  • Ctrl + Shift + D - Manzilni almashtirish

DOM elementlarini qidirish

Ehtimol, bu ko'pchilik uchun kashfiyot bo'ladi, lekin "Elements" tabida siz DOM tomonidan qo'ng'iroq qilishingiz mumkin.

Ehtimol, bu ko'pchilik uchun kashfiyot bo'ladi, lekin Elements tabida siz DOM tomonidan qo'ng'iroq qilishingiz mumkin

Qanday tekshirish mumkin:

  • Ctrl + F tugmalarini bosing va taklif qilingan qidiruv so'rovini kiriting.

Paletkalar

Paletdan rangni tanlang

Chrome brauzerining so'nggi versiyalarida rang tanlovi ba'zi o'zgarishlarga uchradi: rangni tanlash uchun ikki palet qo'shildi.

Ko'p kursor

Kursorni siljiting va Ctrl ni ushlab turib, kursorni qo'shish uchun kerakli maydonni bosing. Ushbu amalni Ctrl + U. yordamida bekor qilishingiz mumkin. Shaxsan men hech qachon foydalandim.

Base64 tasvirini kodlash

Qanday tekshirish mumkin:

  • Tarmoq paneliga o'ting.
  • Rasmni tanlang
  • Tasvir ustida o'ng tugmasini bosing va ""

Pseudo-sinfni almashtirish

Pseudo-sinflar elementlarning holati va ularning nisbiy pozitsiyalarini aks ettiradi.

Pseudo-sinflar elementlarning holati va ularning nisbiy pozitsiyalarini aks ettiradi

Qanday tekshirish mumkin:

  • Element panelidagi elementni o'ng birini tanlab, kuchlar elementlari ro'yxatida pseudo-sinfni tanlang.
  • Elementlar panelining o'ng tomonida pseudo-sinfni tanlashingiz mumkin.

Ustunni tanlash

Qanday tekshirish mumkin:

  • "Manbalar" paneliga o'ting.
  • Har qanday faylni tanlang.
  • Alt ushlab turgan matnni tanlang.

Ustun tanlash HTML elementlari Element panelida tahrir qilinganida ham ishlaydi.

CURL uchun so'rovni nusxalash

Tarmoq yorlig'idagi har qanday so'rovni nusxalash va kalladan foydalanib bajarish uchun terminalga joylashtirilishi mumkin.

Ekran klaviaturasi

Agar Nexus 5X profili tanlansa, ekrandagi klaviatura yoqilganida sayt qanday ko'rinishini ko'rishingiz mumkin.

Chrome DevTools: Ekran klaviaturasi Chrome DevTools: Ekran klaviaturasi

Butun sahifaning ekrani

Butun sahifa tasvirini olish juda oddiy. Faqat kerak ...

  1. Ochiq inspektor.
  2. Konsolga o'ting.
  3. Ctrl + Shift + R tugmalarini bosing
  4. "Ekran tasvirini"
  5. "To'liq o'lchamdagi ekran tasvirini yozib olish" -ni tanlang
Butun sahifaning ekrani

Sensorli qurilmalarning taqlid qilishlari

Siz shuningdek ba'zi sensorlar simüle qilishingiz mumkin:

  • Sensorli ekran
  • Joylashtirish koordinatalari
  • Accelerometer

Qanday qilib sinash kerak:

  • Elementlar panelini tanlang.
  • "Esc" tugmasini bosing va "Emulation> Sensors" -ni tanlang.

Foydali xususiyatlar

kalitlari va qiymatlari

Kalitlar va funktsiyalar funktsiyalari ob'ektning tugma yoki qiymatlarini konsolga chiqarishga imkon beradi. Kalitlar va funktsiyalar funktsiyalari ob'ektning tugma yoki qiymatlarini konsolga chiqarishga imkon beradi Tugmalar va ob'ektlar qiymatlarini alohida ko'rsatish

Новости

Как сбалансировать юзабилити и дизайн при создании сайта — User House
Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные

Чем лучше юзабилити сайта – тем больше лояльных клиентов


Знакомство с юзабилити-тестированием сайта. // webknowledge.ru
Перевод статьи:   An Introduction To Website Usability Testing. Автор:   Thomas Churm. При создании нового сайта необходимо учитывать множество факторов. Для того чтобы у посетителей возникло

Специалист по web-usability – боец невидимого фронта
Ярослав Перевалов Что такое usability engineering? Часто ли вы, бродя по Сети, обращаете внимание на то, насколько качественно структурирована информация на сайте и насколько удобно устроена навигация?

Гид по UX исследованиям для начинающих
В индустрии, в основе которой лежит использование людьми наших продуктов, услуг и приложений, исследования просто необходимы. Мы задаем вопросы. Мы делаем пометки. Мы стараемся узнать все, что возможно,

25 советов как улучшить юзабилити (usability) вашего сайта. | Блог об интернет деятельности и трудовых буднях Максима Вячеславовича
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила.

Что такое юзабилити и зачем оно нужно
Юзабилити включает простоту, удобство в пользовании, тестирование, проведение аудита проекта. Юзабилити сайтов, интернет-магазинов — это неотъемлимая часть выгодного ведения бизнеса. Задача юзабилити

Юзабилити тестирование сайта турагентства
«Когда информации много и она дешева, дорогим становится внимание». James Gleick Представим сайт, владелец которого считает его достаточно хорошим, удобным и привлекательным. Он размещает рекламные объявления

Юзабилити
Юзабилити (от англ. слова «usability» – практичность, простота использования) – это весьма распространенное ныне понятие объединяет максимальное удобство использования сайта и полезность информации, на

5 шагов для успешного юзабилити-тестирования приложения
Представьте: вы придумали и разработали мобильное приложение с приятным, на ваш взгляд, дизайном, удобным функционалом, полезными опциями, выпустили релиз продукта, но… Несмотря на мощную маркетинговую

Карта