Screen Ruler ວັດແທກເວັບໃນ Chrome ດ້ວຍ OffiDocs

ລາຍລະອຽດ

ວັດແທກຂະໜາດ, ໄລຍະຫ່າງ, ຂອບໃບ ແລະແຜ່ນຮອງຂອງອົງປະກອບໃນໜ້າເວັບໃດນຶ່ງ.

Screen Ruler ແມ່ນຄູ່ທີ່ສົມບູນແບບສໍາລັບນັກພັດທະນາເວັບແລະຜູ້ອອກແບບທີ່ຕ້ອງການກວດສອບການປະຕິບັດເວັບໄຊທ໌ຂອງພວກເຂົາ. ເມື່ອເປີດໃຊ້ງານແລ້ວ, Screen Ruler ອະນຸຍາດໃຫ້ທ່ານເບິ່ງຂະຫນາດ, ຂອບໃບ, paddings, ຊື່ແທັກ, IDs, ແລະຊັ້ນຮຽນໄດ້ງ່າຍໆໂດຍການເລື່ອນໃສ່ອົງປະກອບໃດນຶ່ງ. ນອກນັ້ນທ່ານຍັງສາມາດເລືອກອົງປະກອບເພື່ອວັດແທກໄລຍະຫ່າງຂອງອົງປະກອບອື່ນໆ.

ການນໍາໃຊ້

- ສະຫຼັບໄມ້ບັນທັດໜ້າຈໍໂດຍການຄລິກທີ່ extension ໄອຄອນ, ເລືອກ “ໄມ້ບັນທັດໜ້າຈໍ” ຈາກເມນູບໍລິບົດຄລິກຂວາ, ຫຼືໃຊ້ທາງລັດ `Alt/Option + Shift + R`.
- ເລື່ອນໃສ່ອົງປະກອບເທິງໜ້າເວັບເພື່ອສະແດງຂະໜາດ, ຂອບໃບ, paddings, ຊື່ແທັກ, ID ແລະຊັ້ນຮຽນ.
- ເລືອກອົງປະກອບໂດຍການຄລິກໃສ່ມັນໂດຍກົງ, ນີ້ຈະເຮັດໃຫ້ຈຸດເດັ່ນເປັນສີແດງ. ເພື່ອຍົກເລີກການເລືອກ, ຄລິກອີກຄັ້ງ, ກົດ Escape ຫຼືເລືອກອົງປະກອບອື່ນ.
- ເພື່ອເລືອກແມ່ຂອງອົງປະກອບໃດໜຶ່ງ, ໃຫ້ໃຊ້ `Alt/Option + Up`, ຍ້າຍການເລືອກຂອງເຈົ້າໄປໃສ່ອົງປະກອບຫຼັກແທນ, ໃຊ້ `Alt/Option + Down` ເພື່ອກັບຄືນການເລືອກຂອງເຈົ້າ.
- ເບິ່ງ CSS ທີ່ຖືກຄິດໄລ່ຂອງອົງປະກອບທີ່ເລືອກໃນປັດຈຸບັນຢູ່ໃນແຖບດ້ານຂ້າງ. ຄລິກທີ່ປຸ່ມ "ສຳເນົາ CSS" ເພື່ອສຳເນົາ CSS ທີ່ຄຳນວນຂອງລາຍການທີ່ເລືອກໃນຕອນນີ້ໃສ່ຄລິບບອດຂອງທ່ານ.

ຄຸນ​ລັກ​ສະ​ນະ

- ການ​ວັດ​ແທກ​ຂະ​ຫນາດ pixels ລວງ​ຂອງ​ອົງ​ປະ​ກອບ​ໃດ​ຫນຶ່ງ​.
- ວັດແທກໄລຍະຫ່າງ pixels ລວງລະຫວ່າງສອງອົງປະກອບ.
- ຊື່ໂຄດຄໍາສັ່ງ HTML, ຊື່ຊັ້ນຮຽນແລະ IDs.
- ທາງລັດການເລືອກພໍ່ແມ່/ລູກ.
- ການ​ເລືອກ​ທີ່​ຕອບ​ສະ​ຫນອງ​ປັບ​ຂະ​ຫນາດ​ກັບ​ປ່ອງ​ຢ້ຽມ​ຂອງ​ຕົວ​ທ່ອງ​ເວັບ​ຂອງ​ທ່ານ​.
- ການ​ເຂົ້າ​ເຖິງ​ຈາກ​ເມ​ນູ​ສະ​ພາບ​ການ​.
- ການ​ກວດ​ສອບ CSS ຄອມ​ພິວ​ເຕີ​.
- ຄັດລອກ CSS ໃສ່ clipboard.
- ເຮັດວຽກຢູ່ໃນຫນ້າເວັບໃດນຶ່ງ.
- ປັບແຕ່ງທາງລັດແປ້ນພິມໂດຍການເຂົ້າໄປທີ່ `chrome:// extensions /ທາງລັດ`.

Screen Ruler PRO

Screen Ruler ຍັງໃຫ້ລະດັບ PRO ທີ່ປົດລັອກຄຸນສົມບັດເພີ່ມເຕີມ.

1. Element Inspect: ເບິ່ງຄຸນສົມບັດຂອງອົງປະກອບເມື່ອທ່ານຍ້າຍເມົ້າໄປໃສ່ມັນ. ຮວມເອົາຂໍ້ມູນກ່ຽວກັບຕຳແໜ່ງອົງປະກອບ, ຂະໜາດ, ຕົວອັກສອນທີ່ສະແດງ, ສີ ແລະອື່ນໆອີກ.
2. Layout Grid: ວາງຕາໜ່າງໂຄງຮ່າງຢູ່ເທິງສຸດຂອງເວັບໄຊເພື່ອຮັບປະກັນຄວາມສອດຄ່ອງຂອງການອອກແບບຂອງທ່ານ.
3. ບັນທຶກພາບໜ້າຈໍຂອງພື້ນທີ່ທີ່ຖືກໝາຍໄວ້ໃນປັດຈຸບັນໂດຍການຄລິກທີ່ການຄວບຄຸມພາບໜ້າຈໍ ຫຼືໃຊ້ປຸ່ມລັດແປ້ນພິມ `Ctrl/Command + Shift + S`. ທີ່ສົມບູນແບບສໍາລັບເອກະສານຫຼືຕິດກັບປີ້ Github.
4. ເບິ່ງຄຸນສົມບັດຂັ້ນສູງໃນແຖບດ້ານຂ້າງຂອງຕົວທ່ອງເວັບ ລວມທັງຕົວແບບກ່ອງອົງປະກອບ, ສີການເລືອກ, ຊັບສິນ ແລະອື່ນໆອີກ.

Screen Ruler PRO ຕ້ອງການການຈ່າຍເງິນຄັ້ງດຽວສໍາລັບການເຂົ້າເຖິງຕະຫຼອດຊີວິດ. ເພື່ອອັບເກຣດເປັນ PRO, ຄລິກ "ອັບເກຣດເປັນ PRO" ໃນເມນູສະພາບການ ຫຼືຄລິກຂວາໃສ່ປຸ່ມ extension icon ສໍາ​ລັບ​ທາງ​ເລືອກ​ການ​ຍົກ​ລະ​ດັບ​.

ໄມ້ບັນທັດຫນ້າຈໍແມ່ນເຮັດສໍາລັບ

- ນັກພັດທະນາ: ກໍານົດບັນຫາການຈັດວາງຫຼືກໍານົດບັນຫາການຈັດຕໍາແຫນ່ງ. ບໍ່ວ່າທ່ານກໍາລັງປັບຂອບແລະ paddings, ຫຼືພຽງແຕ່ເຮັດໃຫ້ແນ່ໃຈວ່າທຸກຢ່າງຖືກຈັດໃສ່ຢ່າງຖືກຕ້ອງ, Screen Ruler ກາຍເປັນສິ່ງທີ່ຂາດບໍ່ໄດ້ຂອງຊຸດເຄື່ອງມືການພັດທະນາຂອງທ່ານ.
- ຜູ້ອອກແບບ: ໃຫ້ແນ່ໃຈວ່າການອອກແບບຂອງທ່ານໄດ້ຖືກປະຕິບັດດ້ວຍຄວາມຖືກຕ້ອງທີ່ສົມບູນແບບຂອງ pixels ລວງ. Screen Ruler ເຮັດຫນ້າທີ່ເປັນຂົວລະຫວ່າງການອອກແບບແລະການພັດທະນາ, ຊ່ວຍໃຫ້ທ່ານສາມາດກວດສອບວ່າອົງປະກອບທັງຫມົດສອດຄ່ອງຕາມທີ່ເຈົ້າຕັ້ງໃຈ.

ການຕິດຕັ້ງ

- Screen Ruler ຖືກອອກແບບໂດຍສະເພາະສໍາລັບຄວາມຫມັ້ນຄົງໃນ Google Chrome ປີ 116+.
- ໄມ້ບັນທັດຫນ້າຈໍແມ່ນຕິດຕັ້ງໄດ້ທຸກ Chromium ຢ່າງໃດກໍຕາມ, ສໍາລັບປະສົບການທີ່ດີທີ່ສຸດ, ໃຫ້ແນ່ໃຈວ່າຕົວທ່ອງເວັບຂອງທ່ານສະຫນັບສະຫນູນ APIs ທີ່ຕ້ອງການທັງຫມົດ (ເຊັ່ນ Side Panel ແລະ Offscreen). ຖ້າມີບັນຫາກັບການຕິດຕັ້ງ, ໃຫ້ອັບເດດບຣາວເຊີຂອງທ່ານເປັນເວີຊັນຫຼ້າສຸດແລ້ວລອງໃໝ່ອີກຄັ້ງ.

Screen Ruler ວັດແທກເວັບໄຊຕ໌ extension ປະສົມປະສານກັບ OffiDocs Chromium ອອນໄລນ໌