Firefox -dagi Inspect Element ishlab chiquvchi vositasi veb -sahifangizda ko'rilgan har bir narsa uchun HTML kodini aniqlash imkonini beradi. HTML va unga qo'shilgan CSS uslublar varag'i ochilganidan keyin to'liq tahrir qilinadi. O'zingiz yoqtirgan har qanday o'zgarishlarni sinab ko'ring, so'ngra veb -sahifaning mo'ljallangan ko'rinishiga qaytish uchun sahifani yangilang.
Qadamlar
2 -qismning 1 -qismi: elementlarni tekshirish
Qadam 1. Har qanday veb-sahifa elementini o'ng tugmasini bosing
Siz rasm, matn, fon yoki boshqa elementni o'ng tugmasini bosishingiz mumkin. Agar sizda ikkita tugmachali sichqoncha bo'lmasa, Control tugmachasini bosib ushlab turing.
Qadam 2. Ochiladigan menyudan elementni tekshirish-ni bosing
Asboblar paneli oynaning pastki qismida paydo bo'lishi kerak. Asboblar paneli ostida, shuningdek, sahifaning HTML kodini ko'rsatadigan panel paydo bo'ladi.
Qadam 3. Asboblar paneli va oynalarni aniqlang
Elementni tekshirish tugmachasini bosganingizda, oynangizning pastki qismida bir nechta oynalar ochiladi. Mana, ularning ishlatilishi va nomlarining tasnifi:
- Yuqori qator - asboblar paneli asboblar paneli. Bu bir nechta ishlab chiquvchi vositalariga ega, lekin bizni chapdagi Inspektor qiziqtiradi. Qo'llanma uchun bu tanlanganni (ko'k rang bilan ajratilgan) saqlang.
- Asboblar paneli ostida HTML elementlarining bitta Breadcrumbs qatori bor, u tanlangan element bilan bog'liq to'liq yo'lni ko'rsatadi.
- Bu satr ostidagi panelda HTML daraxti yoki "Markup ko'rinishi" ko'rsatiladi. Siz tanlagan element uchun HTML ajratilgan va markazlashtirilgan.
- O'ngdagi panel bu sahifaning CSS uslublar jadvalini ko'rsatadi.
Qadam 4. Boshqa elementni tanlang
Asboblar paneli ochilgach, boshqa elementni tanlash oson bo'ladi. Mana buni qilishning uchta usuli:
- Tegishli elementni ajratib ko'rsatish uchun sichqonchani HTML satriga olib boring (Firefox 34+ talab qilinadi). Ushbu elementni tanlash uchun HTML -ni bosing.
- Asboblar panelining chap chetidagi Elementni tanlash asbobini bosing: belgi kvadrat ustida joylashgan kursor. Elementlarni ajratib ko'rsatish uchun kursorni sahifa bo'ylab harakatlantiring, so'ngra elementni tanlang.
Qadam 5. Kod orqali harakatlaning
HTML panelidagi istalgan joyni bosing. Kod orqali o'tish uchun klaviaturadagi chap va o'ng o'qlardan foydalaning (Firefox 39+ talab qilinadi). Bu qo'lda tanlash uchun juda kichik elementlar uchun foydalidir.
- Grey HTML sahifada ko'rsatilmagan elementlarga tegishli. Bunga sharhlar, ba'zi tugunlar va CSS displeyi xususiyati bilan yashirilgan elementlar kiradi.
- Tarkibni kengaytirish yoki yashirish uchun konteynerlarning chap tomonidagi o'qni bosing. Barcha tarkibni kengaytirish uchun bosish paytida alt="Image" yoki variantni bosib turing.
6 -qadam. Elementni qidiring
Breadcrumbs qatorining o'ng burchagida qidirish satrini (kattalashtirish oynasi belgisi) toping. Buni kengaytirish uchun ustiga bosing va kerakli HTML kodini kiriting. Siz kiritganingizda mos keladigan elementlarning ro'yxati paydo bo'ladi. U elementni tanlash uchun birini bosing va HTML panelini uning kodiga o'tkazing.
2 dan 2 qism: HTMLni tahrirlash
Qadam 1. Istalgan vaqtda qayta boshlash uchun sahifani yangilang
Agar siz veb -ishlab chiqaruvchi vositalarida yangi bo'lsangiz, ular doimiy o'zgarishlarni amalga oshirmasligini tushuning. Sizning tahrirlaringiz faqat ekranda ko'rinadi, faqat siz sahifani yopmaguningizcha yoki uni yangilamaguningizcha. Nima bo'lishini bilmasangiz ham, tajriba qilishdan tortinmang.
Qadam 2. Matnni tahrirlash uchun HTML -ni ikki marta bosing
HTML qatorini ikki marta bosing. O'zgarishlarni saqlash uchun yangi matnni kiriting va Enter ni bosing.
Qadam 3. Qo'shimcha variantlar uchun non bo'lagini bosing va ushlab turing
Esingizda bo'lsin, Breadcrumb asboblar paneli to'liq HTML daraxti va yuqori asboblar paneli o'rtasida joylashgan. Keng menyuni ochish uchun ushbu qatordagi elementlardan birini bosing va ushlab turing. Mana bu variantlar uchun to'liq bo'lmagan ko'rsatma:
- "HTML sifatida tahrirlash" tugunni va uning tarkibini har bir satrni alohida tahrir qilishning o'rniga, HTML daraxtida tahrir qilish imkonini beradi.
- "Ichki HTML -ni nusxalash" tugunning barcha tarkibini nusxa ko'chiradi, "Tashqi HTML -ni nusxalash" tugunni ham nusxa ko'chiradi (masalan, yoki
- "Yopish →" qayerga joylashtirish kerakligi haqida bir nechta variantni keltirib chiqaradi, masalan, bu tugunning oldidan yoki tugunning birinchi bolasidan keyin.
- : hover,: active va: focus element foydalanuvchi bilan muloqot qilganda uning ko'rinishini o'zgartiradi. Aniq ta'sir CSS uslublar jadvali bilan belgilanadi (o'ng panelda tahrir qilinadi).
Qadam 4. sudrab tashlang
Koddagi elementlarni qayta tartibga solish uchun HTML tugmachasini bosing va ushlab turing. Daraxtni yuqoriga yoki pastga siljiting va kesilgan chiziq kerakli joyda bo'lganda qo'yib yuboring.
Buning uchun Firefox 39 yoki undan keyingi versiyasi kerak
Qadam 5. Ishlab chiquvchilar asboblar panelini yoping
Bu ajoyib derazalarni yopish uchun CSS panelining yuqori o'ng burchagidagi X tugmachasini bosing.
Maslahatlar
- Siz shuningdek asboblar panelini quyidagi menyu variantlari bilan ochishingiz mumkin:
- Windows: Firefox → Veb -ishlab chiquvchi → Ochish asboblari
- Mac yoki Linux: Asboblar → Veb -ishlab chiquvchi → Asboblarni almashtirish
- Firefox 40 HTML -ni tahrirlashda sizga ko'proq joy berish uchun CSS panelini yashirish imkoniyatini taqdim etdi. Qidiruv satrining o'ng tomonidagi "Breadcrumbs" qatorining o'ng burchagidagi o'q belgisini qidiring. CSS panelini yashirish uchun ushbu belgini bosing va uni yana kengaytirish uchun yana bosing.
- CSS paneli ham tahrirlanishi mumkin, lekin bu qo'llanma doirasidan tashqarida. Ushbu maqola CSS asoslarini o'rgatadi.
