HTML Хэлбэржүүлэгч ба Шахагч

Орооцолдсон HTML-ийг уншихад хялбар болгож цэгцлэх, эсвэл шахаж хэмжээг нь багасгана уу — эвдэрсэн тагуудыг шалгах нэмэлт сонголттой.

HTML оролт

Догол мөр
Баталгаажуулах
page.html
HTML-ийг хэлбэржүүлэх, шахах эсвэл шалгахын тулд энд нааж эсвэл бичнэ үү.

Таны HTML-ийг хөтөч дотор тань хэлбэржүүлж, шахаж, шалгадаг. BroBroGo руу юу ч илгээгдэхгүй.

Түгээмэл асуултууд

Хэлбэржүүлэх (beautify) болон шахах (minify) хоёрын ялгаа юу вэ?

Хэлбэржүүлэх (Beautify) нь кодыг унших, засахад хялбар болгох үүднээс тэмдэглэгээнд догол мөр, зай авдаг. Шахах (Minify) нь эсрэгээрээ — хөтчид шаардлагагүй хоосон зай, тайлбарыг устгаж, файлыг жижиг хэмжээтэй, хурдан ачаалагддаг болгодог. Ажиллах явцдаа хэлбэржүүлж, бэлэн болгохдоо шахна уу.

Баталгаажуулалтыг (validation) идэвхжүүлснээр юуг шалгадаг вэ?

Энэ нь хөтчийн чимээгүй өнгөрөөж болох бүтцийн асуудлуудыг — хаагдаагүй эсвэл зөрүүтэй тагууд, давхардсан ID-нууд, давтагдсан атрибутууд болон эскейп хийгээгүй тэмдэгтүүдийг тухайн мөр, баганын дугаартай нь хамт тэмдэглэдэг. Энэ бол хурдан бүтцийн шалгалт бөгөөд W3C-ийн бүрэн хэмжээний тохирлын тайлан биш юм.

Шахах нь миний хуудасны харагдах байдлыг өөрчлөх үү?

Үгүй — таны хуудас яг ижилхэн харагдаж, ажиллана. Шахах үйл явц нь хоосон зай, тайлбарыг устгаж, дотоод CSS болон JavaScript-ийг нягтруулж, сонголттой атрибутын хашилтуудыг хасдаг бөгөөд зөвхөн хөтчид хуудсыг яг адилхан дүрслэхэд шаардлагатай зүйлсийг л үлдээдэг. Урьдчилан хэлбэржүүлсэн блокууд шиг хоосон зайд мэдрэг текстүүдийг хөндөхгүй үлдээдэг.

HTML-ийг хэлбэржүүлэх болон шахах үйл ажиллагааны ялгаа

Вэб хөгжүүлэлтэд HTML кодыг боловсруулах хоёр өөр зорилго бүхий үндсэн арга байдаг бөгөөд тэдгээр нь хэлбэржүүлэх (beautify) болон шахах (minify) юм. Хэлбэржүүлэх үйл явц нь орооцолдсон кодыг цэгцэлж, бүтцийг нь хүний нүдэнд уншихад хялбар, засварлахад дөхөм болгоход чиглэдэг. Үүний тулд кодын тэмдэглэгээнд догол мөр нэмж, зай авч өгдөг.

Үүний эсрэгээр, шахах үйл явц нь файлын хэмжээг багасгаж, вэб хуудасны ачаалах хурдыг нэмэгдүүлэх зорилготой. Шахах үед хөтчийн үйл ажиллагаанд шаардлагагүй хоосон зай, тайлбаруудыг устгаж, дотоод CSS болон JavaScript кодыг нягтруулан, сонголттой атрибутын хашилтуудыг хасдаг. Энэхүү хоёр үйлдэл нь кодын харагдах байдал болон файлын хэмжээнд харилцан адилгүй нөлөө үзүүлдэг.

Хэлбэржүүлэлт уншигдах чадварыг сайжруулах нь

Код бичих явцад эсвэл бусад эх сурвалжаас хуулж авсан HTML код нь ихэвчлэн замбараагүй, нэг мөрөнд бөөгнөрсөн эсвэл догол мөрний систем нь алдагдсан байдаг. HTML-ийг хэлбэржүүлснээр кодын уншигдах болон арчлахад хялбар байдал эрс сайжирна.

Энэхүү хэрэгсэл нь HTML кодыг хэлбэржүүлэхдээ дараах тохиргоог ашигладаг:

  • Догол мөр: Хэрэглэгч догол мөрний зайг "2/4 spaces or Tab" сонголтуудаас өөрийн хэрэгцээнд тохируулан сонгох боломжтой.
  • Бүтцийн цэгцлэлт: Тэмдэглэгээг шаталсан бүтцэд оруулж, хаягуудын хамаарлыг тодорхой харуулна.

Хэлбэржүүлэх үйлдэл амжилттай дуусахад хэрэгсэлд "Хэлбэржүүлсэн." гэсэн төлөвийн мэдээлэл харагдана.

Шахалтын вэб гүйцэтгэлд үзүүлэх нөлөө

Вэб хуудасны ачаалах хурд нь хэрэглэгчийн сэтгэл ханамж болон хайлтын системийн үнэлгээнд шууд нөлөөлдөг. HTML кодыг шахсанаар файлын хэмжээг багасгаж, сүлжээгээр дамжих өгөгдлийн хэмжээг цөөрүүлдэг.

Шахах үйл явц нь дараах дүрмээр ажилладаг:

  1. Хоосон зай ба тайлбар устгах: Код доторх илүүдэл зай, шинэ мөр шилжилт болон хөгжүүлэгчийн бичсэн тайлбаруудыг бүрэн устгана.
  2. Атрибутын хашилт хасах: HTML-ийн заавал шаардагдахгүй атрибутын хашилтуудыг хасаж тэмдэгтийн тоог хэмнэнэ.
  3. Дотоод код нягтруулах: HTML дотор бичигдсэн inline CSS болон JavaScript кодыг шахаж нягтруулна.
  4. Мэдрэг текстийг хамгаалах: Урьдчилан хэлбэржүүлсэн блок (жишээ нь <pre> таг) зэрэг хоосон зайд мэдрэг текстийг шахалтын явцад хөндөхгүй, хэвээр үлдээдэг.

Шахалт хийгдсэний дараа хэрэгсэл нь "Шахсан." эсвэл хэмнэгдсэн хувийг тооцоолж "Шахсан — {pct}% жижиг болсон." гэсэн төлөвийг харуулдаг.

HTML бүтцийн алдааг баталгаажуулалтаар илрүүлэх

Вэб хөтчүүд нь HTML кодын зарим алдааг чимээгүй өнгөрөөж, хуудсыг алдаатай ч хамаагүй дүрслэхийг оролддог. Энэ нь хуудасны бүтэц болон харагдах байдалд сөргөөр нөлөөлж болзошгүй тул бүтцийн алдааг урьдчилан шалгах шаардлагатай. Баталгаажуулах сонголтыг "Идэвхтэй" болгосноор хэрэгсэл нь кодыг боловсруулах явцдаа бүтцийн асуудлуудыг давхар шалгадаг.

Баталгаажуулалтаар дараах нийтлэг алдаануудыг илрүүлнэ:

  • Хаагдаагүй эсвэл зөрүүтэй тагууд
  • Давхардсан ID-нууд
  • Давтагдсан атрибутууд
  • Эскейп хийгээгүй тэмдэгтүүд

Энэхүү шалгалт нь хурдан бүтцийн шалгалт бөгөөд W3C-ийн бүрэн хэмжээний тохирлын тайлан биш гэдгийг анхаарах хэрэгтэй. Шалгалт ажиллаж байх үед "Шалгаж байна…" төлөв харагдах бөгөөд алдаагүй тохиолдолд "Асуудал олдсонгүй." гэж гарна. Хэрэв алдаа илэрвэл "Баталгаажуулалт" гэсэн гарчиг доор "{count} асуудал олдлоо." гэж заагаад, алдаа тус бүрийн байршлыг "Мөр {line}:{col}" форматаар тодорхой харуулдаг.

Хэрэглэгчийн нууцлал ба техникийн хязгаарлалт

Энэхүү хэрэгсэл нь хэрэглэгчийн нууцлалыг бүрэн хангаж ажилладаг. Таны оруулсан HTML кодыг хэлбэржүүлэх, шахах болон шалгах үйл явц нь зөвхөн таны хөтөч дотор хийгддэг бөгөөд BroBroGo сервер рүү ямар нэгэн өгөгдөл илгээгдэж, хуулагдахгүй.

Хэрэгслийг ашиглахад дараах техникийн хязгаарлалт болон алдааны мэдэгдлүүд анхаарагдах ёстой:

  • Хэмжээний хязгаар: Хэрэгсэл нь хамгийн ихдээ 500,000 тэмдэгт хүртэлх хэмжээтэй HTML кодыг боловсруулах чадвартай. Хэрэв оруулсан баримт бичиг энэ хязгаараас хэтэрвэл "Энэ баримт бичиг боловсруулахад хэтэрхий том байна. Жижиг файл сонгоно уу." гэсэн алдааг заана.
  • Боловсруулалтын алдаа: Хэрэв оруулсан HTML кодыг ямар нэгэн шалтгаанаар боловсруулах боломжгүй бол "Энэ HTML-ийг боловсруулж чадсангүй." гэсэн алдааны мэдэгдэл гарна.
  • Цэвэрлэх үйлдэл: Оролтын талбарыг цэвэрлэх үед "Цэвэрлэсэн." гэсэн төлөв идэвхжинэ.

Боловсруулалтын дараа хэрэгсэл нь үр дүнгийн статистик мэдээлэл болох "Мөр", "Тэмдэгт", болон "Хэмжээ" (байтаар) зэргийг бодит хугацаанд тооцож харуулдаг.