"Элементийг шалгах" нь Firefox хөтөч дээр хөгжүүлэгч хэрэгсэл бөгөөд та ямар ч вэб хуудсан дээр HTML кодыг хянах боломжтой. Вэб хуудасны HTML болон CSS загварын хүснэгтийг "Элементийг шалгах" ашиглан засах боломжтой. Та хүссэн хуудсаа засварлаж, засварласан вэб хуудсыг дахин ачаалж, хуучин хэвэндээ оруулахыг оролдож болно.
Алхам
2 -р хэсгийн 1: Элементүүдийг шалгах
Алхам 1. Firefox -ийг шинэчлэх (заавал биш)
Хэрэв та Firefox -ийн хуучин хувилбарыг ашиглаж байгаа бол энэ нийтлэлд дурдсан функцэд хандах боломжгүй болно. Та Firefox -ийн аль хувилбарыг ашиглаж байгааг шалгах үед шинэчлэлт автоматаар суулгагдах болно.
Firefox 9 ба түүнээс өмнөх хувилбаруудад "Элементийг шалгах" хэрэгсэл огт байдаггүй
Алхам 2. Аливаа вэб хуудасны элемент дээр хулганы баруун товчийг дарна уу
Та зураг, текст, дэвсгэр, элемент дээр хулганы баруун товчийг дарж болно. Хэрэв таны хулгана ганцхан товчлууртай бол зүүн товчлуур болон Control товчлууруудын хослол баруун товчлуурыг дарна.
Алхам 3. Унждаг цэснээс "Элементийг шалгах" дээр дарна уу
Цонхны доод хэсэгт toolbar гарч ирнэ. Хэрэгслийн самбарын доорх самбар гарч ирэх бөгөөд HTML хуудсыг идэвхтэй хуудсан дээр харуулна.
Алхам 4. Одоо байгаа багаж самбар, самбартай танилцана уу
"Элементийг шалгах" -ыг ашиглах үед хөтчийн цонхны доор хэд хэдэн самбар нээгдэнэ. "Элементийг шалгах" хэсэгт багажны самбар, самбарын нэр, үүргийг доор тайлбарлав.
- Дээд мөрөнд Toolbox Toolbar байна. Энд хэд хэдэн хэрэгслүүд байгаа боловч бид зүүн талд байгаа Inspector товчлуур дээр анхаарлаа хандуулах болно. Энэхүү гарын авлагад энэ товчлуур идэвхтэй байгаа эсэхийг шалгаарай (идэвхжсэн үед цэнхэр болж хувирдаг товчлуурын өнгөөр харуулав).
- Үүний доор одоогоор сонгосон элементийн байршлыг харуулсан HTML элементүүдийн талхны мөр байна.
- Жолоодлогын хүсэлтийн доорх самбар нь вэб хуудасны HTML мод эсвэл "Тэмдэглэгээний харагдац" -ыг харуулдаг. Сонгосон элементийн HTML нь энэ хэсэгт тэмдэглэгдэж, төвд байх болно.
- Баруун талын самбар нь одоогийн вэб хуудасны CSS загварын хүснэгтийг харуулна.
Алхам 5. Өөр элемент сонгоно уу
Хэрэгслийн самбар нээлттэй байх үед та бусад элементүүдийг хялбархан сонгох боломжтой. Үүнийг хийх гурван арга бий:
- Сонгосон элементийг тэмдэглэхийн тулд HTML мөрөн дээр хулганаа дарна уу (энэ функц нь Firefox 34+ шаарддаг). HTML дээр дарж тухайн элементийг сонгоно уу.
- Хэрэгслийн мөрний зүүн буланд байгаа "Элементийг сонгох" хэрэгслийг дарна уу: хайрцагны дээр курсор хэлбэртэй дүрс байна. Вэб хуудсан дээрх курсорыг хөдөлгөж элементийг тэмдэглээд дарна уу.
Алхам 6. HTML кодыг мөрдөнө үү
HTML самбарын аль ч хэсэгт дарна уу. Кодоос код руу шилжихийн тулд гар дээрх зүүн ба баруун чиглэлийн товчлууруудыг ашиглана уу (энэ функцэд Firefox 39+ шаардлагатай). Энэ арга нь курсороор сонгоход хэт жижиг элементүүдийг сонгоход тохиромжтой.
- Саарал HTML нь хуудсан дээр харагдахгүй элементүүдийг харуулдаг. Үүнд орсон элементүүд нь зангилаа гэх мэт тайлбарууд болон CSS дэлгэцийн шинж чанараар нуугдсан бусад элементүүд юм.
- Агуулгыг харуулах эсвэл нуухын тулд хайрцгийн зүүн талд байгаа сумыг дарна уу. Агуулгыг бүхэлд нь харуулахын тулд alt="Image" эсвэл сонголтыг дарж сумыг дарна уу.
Алхам 7. Элементийг олоорой
Breadcrumbs эгнээний баруун дээд буланд байгаа хайлтын талбарыг (гогцоо хэлбэртэй дүрс) хайна уу. Хайлтын талбарыг өргөжүүлэхийн тулд дарж хайж олохыг хүсч буй HTML кодоо бичнэ үү. Таныг бичиж байх үед тохирох хайлтын үр дүнг харуулах цонх гарч ирнэ. Хайлтын үр дүнгээс нэг элемент дээр дараад HTML самбарыг хайж буй код руу гүйлгэнэ үү.
2 -р хэсгийн 2: HTML засварлах
Алхам 1. Дахин эхлүүлэхийн тулд хуудсыг дахин ачаална уу
Хэрэв та вэбсайт хөгжүүлэх хэрэгслүүдийг шинээр сурч байгаа бол засварлаж буй хуудсандаа байнгын өөрчлөлт оруулахгүй гэдгээ мэдэж аваарай. Таны хуудсыг дахин ачаалах эсвэл хаах хүртэл таны засварууд зөвхөн таны дэлгэц дээр харагдана. Юу болохыг мэдэхгүй байсан ч гэсэн туршилт хийж үзээрэй.
Алхам 2. Засах бол HTML дээр давхар товшино уу
HTML доторх HTML дээр давхар товшино уу. Шинэ текстийг бичээд өөрчлөлтийг хадгалахын тулд enter дарна уу.
Алхам 3. Илүү олон сонголтыг гаргахын тулд талхны талбар дээрх хэрэгслийг дарж барина уу
Breadcrumb toolbar нь HTML мод болон түүний дээрх багажны хооронд байрладаг болохыг анхаарна уу. Илүү олон цэс нээхийн тулд энэ эгнээнд байгаа хэрэгслийг дарж барина уу. Боломжтой сонголтуудын талаархи зөвлөмжийг доор өгөв (бүрэн биш):
- "HTML хэлбэрээр засварлах" нь мөр бүрийг засварлахын оронд HTML модны бүх HTML агуулгыг шууд засах боломжийг танд олгоно.
- "Дотоод HTML -ийг хуулах" нь зангилааны доторх бүх агуулгыг хуулбарладаг бол "Гадаад HTML -ийг хуулах" нь агуулга, зангилааг хуулж (эсвэл
- "Paste →" нь хуулбарыг хаана байрлуулах талаар хэд хэдэн сонголтыг авчирдаг, тухайлбал зангилааны өмнө эсвэл зангилааны анхны хүүхдийн дараа.
- : hover,: active, and: focus нь хэрэглэгч харилцах үед элементийн гадаад төрхийг өөрчилдөг. Өөрчлөгдсөн эффектийг CSS загварын хүснэгтээс тодорхойлдог (Баруун талын самбараас засах боломжтой).
Алхам 4. Зөөж унага
Кодын элементүүдийг дахин цэгцлэхийн тулд HTML дээр дарж, тасархай шугам гарч ирэх хүртэл барина уу. Мөрийг модон дээр дээш, доош нь хөдөлгөж, мөр хүссэн газартаа байх үед хулганы товчийг дарна уу.
Энэ онцлог нь Firefox 39 ба түүнээс хойших хувилбарыг шаарддаг
Алхам 5. Хөгжүүлэгчийн хэрэгслийн самбарыг хаах
Inspect Element цонхыг бүхэлд нь хаахын тулд CSS самбарын дээр байрлах toolbar -ийн баруун дээд буланд байгаа X товчийг дарна уу.
Зөвлөмж
- Та мөн цонхны дээд хэсэгт байрлах цэсийн сонголтуудаас багаж самбарыг нээж болно.
- Windows: Firefox → Вэб хөгжүүлэгч → Багаж хэрэгслийг асаах
- Mac эсвэл Linux: Хэрэгслүүд → Вэб хөгжүүлэгч → Багаж хэрэгслийг асаах
- Firefox 40 нь CSS самбарыг нуух боломжтой тул HTML засварлах илүү их зайтай болно. Breadcrumbs мөрийн баруун дээд буланд болон хайлтын талбайн баруун талд байгаа сумны дүрсийг хайна уу. CSS самбарыг нуухын тулд энэ дүрс дээр дарж дахин дарна уу.
- Та мөн CSS самбарыг засах боломжтой боловч тэдгээрийг энэ нийтлэлд оруулаагүй болно. Та CSS кодыг засварлах зааврыг интернетээс олж болно.
