ວິທີການກວດສອບອົງປະກອບເວັບເພດ

ເບິ່ງ HTML ແລະ CSS ຂອງຫນ້າເວັບໃດໆ

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

ຕົວທ່ອງເວັບເວັບໄຊຕ໌ສ່ວນໃຫຍ່ບໍ່ໄດ້ເຮັດໃຫ້ທ່ານດາວໂຫລດເຄື່ອງມືກວດກາຫຼືຕິດຕັ້ງ add-on. ແທນທີ່ຈະ, ພວກເຂົາໃຫ້ທ່ານກົດຂວາໃສ່ອົງປະກອບຫນ້າແລະເລືອກເອົາ Inspect ຫຼື Inspect Element . ຢ່າງໃດກໍ່ຕາມ, ຂະບວນການອາດຈະແຕກຕ່າງກັນເລັກນ້ອຍໃນຕົວທ່ອງເວັບຂອງທ່ານ.

ກວດເບິ່ງອົງປະກອບໃນ Chrome

ຮຸ່ນຫຼ້າສຸດຂອງ Google Chrome ໃຫ້ທ່ານກວດເບິ່ງຫນ້າໃນຫຼາຍວິທີເຊິ່ງທັງຫມົດນີ້ໃຊ້ Chrome DevTools ທີ່ມີຢູ່ໃນ Chrome:

• ກົດປຸ່ມຂວາເທິງຫນ້າ (ຫຼືພື້ນທີ່ຫວ່າງ) ແລະເລືອກ ກວດເບິ່ງ
• ໃສ່ທາງລັດແປ້ນພິມ Ctrl + Shift + I
• ໃຊ້ເມນູ Chrome ເພື່ອເຂົ້າເຖິງ ເຄື່ອງມື More Tools> Developer tools

Chrome DevTools ຊ່ວຍໃຫ້ທ່ານເຮັດສິ່ງຕ່າງໆເຊັ່ນການຄັດລອກຫຼືແກ້ໄຂ HTML ໄດ້ງ່າຍໆຫຼືຊ່ອນຫຼືລຶບອົງປະກອບທັງຫມົດ (ຈົນກວ່າການໂຫຼດຫນ້າໃຫມ່).

ເມື່ອ DevTools ເປີດຢູ່ເບື້ອງຫນ້າຂອງຫນ້າ, ທ່ານສາມາດປ່ຽນບ່ອນທີ່ມັນຕັ້ງຕໍາແຫນ່ງ, ປົດມັນອອກຈາກຫນ້າ, ຄົ້ນຫາໄຟລ໌ທັງຫມົດຂອງຫນ້າ, ເລືອກເອກະສານຈາກຫນ້າສໍາລັບການກວດສອບ, ຄັດລອກໄຟລ໌ແລະ URL, ແລະແມ້ກະທັ້ງປັບແຕ່ງຊໍ່ ຂອງການຕັ້ງຄ່າ.

ກວດເບິ່ງອົງປະກອບໃນ Firefox

ເຊັ່ນດຽວກັນກັບ Chrome, Firefox ມີວິທີທີ່ແຕກຕ່າງກັນເພື່ອເປີດເຄື່ອງມືທີ່ເອີ້ນວ່າ Inspector:

• ໃຫ້ຄລິກໃສ່ເຂດພື້ນທີ່ທີ່ຫວ່າງຢູ່ໃນຫນ້າຫຼືເລືອກເອົາອົງປະກອບ, ແລະເລືອກເອົາ ການກວດກາອົງປະກອບ
• ກົດ Ctrl + Shift + T ຫຼື Ctrl + Shift + I ດ້ວຍແປ້ນພິມ
• ຈາກເມນູ Firefox, ໃຫ້ຄລິກໃສ່ Developer > Inspector
• ຈາກເມນູ Tools , ໃຫ້ຄລິກໃສ່ Web Developer> Inspector

ເມື່ອທ່ານຍ້າຍຫນູຂອງທ່ານຜ່ານອົງປະກອບຕ່າງໆໃນ Firefox, ເຄື່ອງມື Inspector ຄົ້ນພົບຂໍ້ມູນລະຫັດແຫຼ່ງຂອງອົງປະກອບອັດຕະໂນມັດ. ກົດອົງປະກອບແລະ "ການຄົ້ນຫາໃນການບິນ" ຈະຢຸດແລະທ່ານສາມາດກວດສອບອົງປະກອບຈາກຫນ້າຈໍ Inspector.

ສິດຄລິກໃສ່ອົງປະກອບເພື່ອຊອກຫາທຸກການຄວບຄຸມທີ່ສະຫນັບສະຫນູນ. ທ່ານສາມາດເຮັດສິ່ງຕ່າງໆເຊັ່ນແກ້ໄຂຫນ້າ HTML, ຄັດລອກຫລືວາງລະຫັດ HTML ພາຍໃນຫຼືນອກ, ສະແດງຄຸນສົມບັດ DOM, ພາບຫນ້າຈໍຫຼືລຶບ node, ນໍາໃຊ້ຄຸນລັກສະນະໃຫມ່, ເບິ່ງ CSS ທັງຫມົດຂອງຫນ້າແລະອື່ນໆ.

ກວດເບິ່ງອົງປະກອບໃນ Opera

Opera ສາມາດກວດສອບອົງປະກອບເຊັ່ນດຽວກັນ, ດ້ວຍເຄື່ອງມື DOM Inspector ທີ່ຄ້າຍຄືກັບ Chrome. ນີ້ແມ່ນວິທີທີ່ຈະໄດ້ຮັບມັນ:

• ໃຊ້ແປ້ນພິມແປ້ນ Ctrl + Shift + I
• ຄົ້ນຫາ ເມນູ> ເຄື່ອງມືເພີ່ມເຕີມ> ສະແດງເມນູຜູ້ພັດທະນາ ແລ້ວເປີດເມນູຜ່ານ ເມນູ> ຜູ້ພັດທະນາ> ເຄື່ອງມືພັດທະນາ
• ຈາກເມນູສິດຄລິກໃສ່ອົງປະກອບໃດໆໃນຫນ້າ, ເລືອກ Inspect element

ກວດເບິ່ງອົງປະກອບໃນ Internet Explorer

ເຄື່ອງມືຂອງອົງການກວດສອບຄ້າຍຄືກັນທີ່ເອີ້ນວ່າເຄື່ອງມືພັດທະນາແມ່ນມີຢູ່ໃນ Internet Explorer:

• ກົດ F12 ເທິງແປ້ນພິມ
• ໃຊ້ຕົວເລືອກ Tools> F12 Developer Menu (ກົດ Alt + X ຖ້າທ່ານບໍ່ເຫັນເມນູ ເຄື່ອງມື )
• ໃຫ້ຄລິກຂວາໃສ່ຫນ້າແລະຄລິກ Inspect Element

IE ມີເຄື່ອງມື ເລືອກອົງປະກອບ ໃນເມນູໃຫມ່ນີ້ເຊິ່ງສາມາດໃຫ້ທ່ານຄລິກໃສ່ອົງປະກອບຫນ້າໃດໆເພື່ອເບິ່ງລາຍລະອຽດຂອງ HTML ແລະ CSS. ນອກນັ້ນທ່ານຍັງສາມາດປິດການໃຊ້ງານ / ເປີດການສະແດງຜົນອົງປະກອບທີ່ງ່າຍດາຍໃນຂະນະທີ່ທ່ານກໍາລັງຊອກຫາຜ່ານແຖບ DOM Explorer .

ເຊັ່ນດຽວກັນກັບເຄື່ອງມືກວດສອບອົງປະກອບອື່ນໆໃນຕົວທ່ອງເວັບຂ້າງເທິງ, Internet Explorer ຊ່ວຍໃຫ້ທ່ານຕັດ, ຄັດລອກ, ແລະນໍາເອົາອົງປະກອບເຊັ່ນດຽວກັນແກ້ໄຂ HTML, ເພີ່ມຄຸນລັກສະນະ, ຄັດລອກອົງປະກອບທີ່ມີຮູບແບບທີ່ແນບມາແລະອື່ນໆ.