Web Component DevTools ໃນ Chrome ກັບ OffiDocs
Web Component DevTools Chrome web store extension
DESCRIPTION:
ເປີດໃຊ້ Chrome online store extension Web Component DevTools ໂດຍໃຊ້ OffiDocs Chromium ອອນລາຍ.
ເຄື່ອງມືຜູ້ພັດທະນາສຳລັບອົງປະກອບເວັບ ແລະຫ້ອງສະໝຸດອົງປະກອບເວັບ 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 ດາວ (ຮັກມັນ)
- ນັກພັດທະນາ ທີ່ຢູ່ອີເມວນີ້ຈະຖືກປ້ອງກັນຈາກສະແປມບອດ. ທ່ານຈໍາເປັນຕ້ອງເປີດການໃຊ້ງານຈາວາດຄິບກ່ອນ.
ສ່ວນຂະຫຍາຍເວັບ DevTools ປະສົມປະສານກັບ OffiDocs Chromium ອອນລາຍ