Web Component DevTools ໃນ Chrome ກັບ OffiDocs

ລາຍລະອຽດ

ເຄື່ອງມືຜູ້ພັດທະນາສຳລັບອົງປະກອບເວັບ ແລະຫ້ອງສະໝຸດອົງປະກອບເວັບ Web Component DevTools ແມ່ນແນໃສ່ຜູ້ພັດທະນາທັງໝົດທີ່ເຮັດວຽກກັບອົງປະກອບເວັບ.

ເຄື່ອງມືທີ່ໃຫ້ມາຈະສ້າງແຜງ Chrome Devtools ໃໝ່, ເຊິ່ງອະນຸຍາດໃຫ້ເບິ່ງອົງປະກອບແບບກຳນົດເອງໃນໜ້າປັດຈຸບັນ, ແລະເຮັດໃຫ້ການດັດແກ້ຄຸນສົມບັດ ແລະຄຸນສົມບັດຂອງອົງປະກອບດັ່ງກ່າວ.

ອົງປະກອບເວັບ DevTools ນໍາໃຊ້ອົງປະກອບທີ່ກໍາຫນົດເອງ Manifest (https://github.

com/webcomponents/custom-elements-manifest) ເພື່ອວິເຄາະອົງປະກອບເວັບ.

ຄຸນ​ລັກ​ສະ​ນະ: Web Component DevTools ສະໜອງຄຸນສົມບັດຂັ້ນສູງໃຫ້ກັບຜູ້ພັດທະນາ, ກົງຈາກ UI ຂອງຕົວທ່ອງເວັບໄປ, ຕົວຢ່າງ: - ລາຍຊື່ອົງປະກອບທີ່ກຳນົດເອງຢູ່ໃນໜ້າ, ແລະ iframes ທີ່ສາມາດເຂົ້າເຖິງໄດ້ພາຍໃນໜ້າ - ການກັ່ນຕອງອົງປະກອບ custom ໃນບັນຊີລາຍຊື່ - ກວດ​ກາ​ແລະ​ປັບ​ປຸງ​ຄຸນ​ລັກ​ສະ​ນະ​ຂອງ​ອົງ​ປະ​ກອບ​ທີ່​ກໍາ​ນົດ​ເອງ​ - ການ​ກວດ​ກາ​ແລະ​ການ​ປັບ​ປຸງ​ຄຸນ​ສົມ​ບັດ (ເຖິງ​ແມ່ນ​ວ່າ​ວັດ​ຖຸ​ແລະ arrays​) ຂອງ​ອົງ​ປະ​ກອບ custom​ - ການ​ສັງ​ເກດ​ເບິ່ງ​ກິດ​ຈະ​ກໍາ​ສົ່ງ​ - ການ​ທໍາ​ງານ​ຂອງ​ການ​ໂທ​ຂອງ​ອົງ​ປະ​ກອບ​ທີ່​ກໍາ​ນົດ​ເອງ​, ແລະ​ການ​ບັນ​ທຶກ​ຄ່າ​ກັບ​ຄືນ​ມາ​ໄດ້​ - ເບິ່ງລະຫັດແຫຼ່ງຂອງອົງປະກອບເວັບຢູ່ໃນຫນ້າ - ພົວພັນໂດຍກົງກັບອົງປະກອບເວັບຜ່ານ console ເປັນຫຍັງ? ໃນຂະບວນການພັດທະນາອົງປະກອບເວັບ, ບໍ່ວ່າຈະຢູ່ກັບຫ້ອງສະຫມຸດເຊັ່ນ Lit, ຫຼືບໍ່ມີຫ້ອງສະຫມຸດປະເພດໃດກໍ່ຕາມ, ມີສະຖານະການທີ່ທ່ານອາດຈະຕ້ອງການທີ່ຈະມີການຄວບຄຸມຫຼາຍກວ່າອົງປະກອບຂອງທ່ານຫຼາຍກວ່າສິ່ງທີ່ devtools ຂອງຕົວທ່ອງເວັບປົກກະຕິໃຫ້ທ່ານ.

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

ແລະເຖິງແມ່ນວ່າທ່ານໄດ້ຮັບເສັ້ນທາງ, ມີການຂຽນເອກະສານ.

querySelector("ຕົວເລືອກຂອງຂ້ອຍ - ສະຕຣິງ> ອົງປະກອບຊື່").

setAttribute("my-attr", "foo") ທຸກໆຄັ້ງທີ່ທ່ານຕ້ອງການແກ້ໄຂຄ່າແມ່ນຂ້ອນຂ້າງຫຍຸ້ງຍາກ.

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

ບັນຫາ: ບັນຫາໃດໆທີ່ທ່ານພົບໃນຂະນະທີ່ໃຊ້ DevTools ຄວນຖືກສົ່ງໄປທີ່ GitHub Repository (https://github.

com/Matsuuu/web-component-devtools/issues).

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

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

Web Component DevTools ເວັບ extension ປະສົມປະສານກັບ OffiDocs Chromium ອອນໄລນ໌