CSS Undefined Variable Checker in Chrome ກັບ OffiDocs

ລາຍລະອຽດ

ທ່ານຂຽນ CSS ໂດຍໃຊ້ຄຸນສົມບັດ / ຕົວແປທີ່ກໍາຫນົດເອງບໍ? ເຈົ້າເຄີຍສະກົດຜິດອັນໜຶ່ງບໍ, ແລະພຽງແຕ່ສັງເກດເຫັນໃນພາຍຫຼັງວ່າສີນັ້ນບໍ່ໄດ້ມາຢ່າງຖືກຕ້ອງຕາມຜົນ? ທ່ານເຄີຍປາດຖະຫນາສໍາລັບເຄື່ອງມືທີ່ຈະຊ່ວຍໃຫ້ທ່ານຕິດຕາມການນໍາໃຊ້ຕົວແປ CSS ທີ່ບໍ່ໄດ້ກໍານົດ? ຫຼັງຈາກນັ້ນ, ທ່ານກໍາລັງຢູ່ໃນໂຊກ, ເພາະວ່ານີ້ແມ່ນພຽງແຕ່ເຄື່ອງມືດັ່ງກ່າວ! ສ່ວນຂະຫຍາຍນີ້ເພີ່ມແຖບໃສ່ເຄື່ອງມືຜູ້ພັດທະນາ Chrome ທີ່ສາມາດກວດເບິ່ງໜ້າປັດຈຸບັນສໍາລັບຕົວແປ CSS ທີ່ບໍ່ໄດ້ກໍານົດໃດໆທີ່ໃຊ້ພາຍໃນ "var()" expressions.

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

ເພື່ອໃຊ້ສ່ວນຂະຫຍາຍນີ້, ເມື່ອມັນຖືກຕິດຕັ້ງໃຫ້ເປີດເວັບໄຊທ໌ທີ່ທ່ານເລືອກໃນ Google Chrome, ແລະຫຼັງຈາກນັ້ນເປີດເຄື່ອງມືນັກພັດທະນາ.

ທ່ານຈະເຫັນແຖບໃຫມ່ຢູ່ເທິງສຸດຂອງເຄື່ອງມືນັກພັດທະນາທີ່ມີຫົວຂໍ້ "CSS Undefined Variable Checker".

ແຖບນັ້ນຈະນໍາທ່ານໄປຫາ UI ຂອງສ່ວນຂະຫຍາຍນີ້.

ໃນເບື້ອງຕົ້ນ, ທ່ານຈະເຫັນພຽງແຕ່ປຸ່ມທີ່ມີຫົວຂໍ້ "ກວດເບິ່ງຕົວແປທີ່ບໍ່ໄດ້ກໍານົດ" ແລະຕາຕະລາງຫວ່າງເປົ່າ.

ການຄລິກໃສ່ປຸ່ມຈະເລີ່ມການວິເຄາະໃນຫນ້າທີ່ devtools ເຊື່ອມຕໍ່ແລະຈະລາຍງານຜົນໄດ້ຮັບໃດໆພາຍໃນຕາຕະລາງ.

ຖ້າບໍ່ພົບຕົວແປ CSS ທີ່ບໍ່ໄດ້ກໍານົດ, ຕາຕະລາງຈະຖືກຕື່ມຂໍ້ມູນດ້ວຍຂໍ້ຄວາມທີ່ຊີ້ບອກເຊັ່ນນັ້ນ.

ຜົນໄດ້ຮັບພາຍໃນຕາຕະລາງມີສາມຖັນ.

ຖັນທໍາອິດຊີ້ໃຫ້ເຫັນຊື່ຂອງຕົວແປທີ່ບໍ່ໄດ້ກໍານົດ.

ຖັນຖັດໄປຊີ້ໃຫ້ເຫັນຮູບແບບຊີດທີ່ມັນພົບເຫັນ, ແລະຄໍລໍາທີສາມຊີ້ບອກວ່າອົງປະກອບໃດຢູ່ໃນຫນ້າທີ່ພົບຕົວແປທີ່ບໍ່ໄດ້ກໍານົດ.

ຖັນທີສາມນີ້ອ້າງອີງອົງປະກອບໂດຍຕົວເລືອກ CSS.

ຖ້າຕົວແປທີ່ບໍ່ໄດ້ກໍານົດຖືກພົບເຫັນຢູ່ໃນ stylesheet, ຖັນ Selector ຈະຖືກຕື່ມຂໍ້ມູນໃສ່ກັບຕົວເລືອກສໍາລັບການປະກາດຮູບແບບ CSS ບ່ອນທີ່ຕົວແປໄດ້ພົບເຫັນ.

ໃນທາງກົງກັນຂ້າມ, ຖ້າຕົວແປທີ່ບໍ່ໄດ້ກໍານົດຖືກພົບເຫັນຢູ່ໃນຮູບແບບ inline, ຕົວເລືອກແມ່ນຖືກສ້າງຂຶ້ນໂດຍອີງໃສ່ຊັ້ນຮຽນ, id, ແລະຊື່ແທັກຂອງອົງປະກອບໃນຄໍາຖາມແລະບັນພະບຸລຸດທັງຫມົດຂອງມັນ.

ກະລຸນາຮັບຊາບວ່າຕົວເລືອກທີ່ສ້າງຂຶ້ນນີ້ບໍ່ໄດ້ຮັບການຮັບປະກັນໃນການລະບຸອົງປະກອບທີ່ເປັນຄຳຖາມສະເພາະ.

ແຕ່ລະຕາລາງໃນຖັນ Selector ຂອງຕາຕະລາງຜົນໄດ້ຮັບແມ່ນ hyperlink.

ການຄລິກແຕ່ລະລິ້ງຈະເປີດແຖບອົງປະກອບຂອງ devtools ແລະເນັ້ນໃສ່ອົງປະກອບທີ່ມີບັນຫາພາຍໃນມັນ, ຊ່ວຍໃຫ້ທ່ານຕິດຕາມຕົວແປທີ່ບໍ່ໄດ້ກໍານົດ.

ໝາຍເຫດ: ສ່ວນຂະຫຍາຍນີ້ອີງໃສ່ APIs ສໍາລັບການເຂົ້າເຖິງຂໍ້ມູນ stylesheet ທີ່ຖືກຈໍາກັດໂດຍ Cross-Origin Resource Sharing.

ແຜ່ນສະໄຕລ໌ໃດນຶ່ງທີ່ຖືກໂຫລດຢູ່ໃນໜ້າແຕ່ຢູ່ໃນຕົ້ນກຳເນີດທີ່ແຕກຕ່າງຈາກໜ້ານັ້ນເອງ ແລະທີ່ບໍ່ໄດ້ໃຫ້ບໍລິການດ້ວຍສ່ວນຫົວ Access-Control-Allow-Origin ທີ່ອະນຸຍາດໃຫ້ເຂົ້າເຖິງຈາກໜ້ານີ້, ຈະບໍ່ຖືກວິເຄາະໂດຍສ່ວນຂະຫຍາຍນີ້. ແລະ​ຈະ​ເຮັດ​ໃຫ້​ມັນ​ສະ​ແດງ​ຂໍ້​ຜິດ​ພາດ​.

ຂໍ້ຜິດພາດເຫຼົ່ານີ້ບໍ່ໄດ້ຢຸດການຂະຫຍາຍຈາກການວິເຄາະຮູບແບບອື່ນໆທີ່ສາມາດເຂົ້າເຖິງ API ໄດ້.

ເຫດຜົນການວິເຄາະທີ່ຢູ່ເບື້ອງຫຼັງການຂະຫຍາຍນີ້ຍັງມີຢູ່ໃນຊຸດ npm ພາຍໃຕ້ຊື່ @sonatype/undefined-css-variable-checker.

ເບິ່ງ https://www.

npmjs.

com/package/@sonatype/undefined-css-variable-checker .

ຂໍ້​ມູນ​ເພີ່ມ​ເຕີມ:

- ສະ​ຫນອງ​ໃຫ້​ໂດຍ community-group-chrome-store
- ອັດ​ຕາ​ການ​ສະ​ເລ່ຍ​: 3 ດາວ (ມັນ​ເປັນ​ຫຍັງ​)
- ນັກພັດທະນາ ທີ່ຢູ່ອີເມວນີ້ຈະຖືກປ້ອງກັນຈາກສະແປມບອດ. ທ່ານຈໍາເປັນຕ້ອງເປີດການໃຊ້ງານຈາວາດຄິບກ່ອນ.

CSS Undefined Variable Checker web extension ປະສົມປະສານກັບ OffiDocs Chromium ອອນໄລນ໌