ເບິ່ງ 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, ເພີ່ມຄຸນລັກສະນະ, ຄັດລອກອົງປະກອບທີ່ມີຮູບແບບທີ່ແນບມາແລະອື່ນໆ.