ວິທີການນໍາໃຊ້ເຄື່ອງມືຂອງນັກພັດທະນາ Web Browser

ເຄື່ອງມືປະສົມປະສານສໍາລັບນັກອອກແບບເວັບ, ນັກພັດທະນາແລະຜູ້ທົດສອບ

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

ຫມົດແມ່ນມື້ທີ່ເຄື່ອງມືການຂຽນແລະການທົດສອບພຽງແຕ່ພົບຢູ່ໃນຕົວທ່ອງເວັບໄດ້ອະນຸຍາດໃຫ້ທ່ານເບິ່ງລະຫັດແຫຼ່ງຂອງຫນ້າແລະບໍ່ມີຫຍັງອີກ. ຕົວທ່ອງເວັບໃນມື້ນີ້ຊ່ວຍໃຫ້ທ່ານໃຊ້ຊີວິດແບບລຶກລັບຫຼາຍຂຶ້ນໂດຍການເຮັດສິ່ງຕ່າງໆເຊັ່ນການປະຕິບັດແລະແກ້ໄຂຂໍ້ມູນ JavaScript, ກວດເບິ່ງແລະແກ້ໄຂອົງປະກອບ DOM, ການຕິດຕາມການເຂົ້າຊົມເຄືອຂ່າຍເວລາທີ່ແທ້ຈິງຍ້ອນວ່າແອັບຯຫລືຫນ້າເວັບຂອງທ່ານຖືກກໍານົດຂື້ນຂື້ນ, ການວິເຄາະຜົນກະທົບຂອງ CSS, ບໍ່ນໍາໃຊ້ຄວາມຈໍາຫຼາຍເກີນໄປຫລືຮອບວຽນ CPU ຫຼາຍເກີນໄປ, ແລະມີຫຼາຍຫຼາຍ. ຈາກທັດສະນະການທົດສອບ, ທ່ານສາມາດຜະລິດວິທີການ app ຫຼືຫນ້າເວັບຈະສະແດງໃນຕົວທ່ອງເວັບທີ່ແຕກຕ່າງກັນເຊັ່ນດຽວກັນກັບອຸປະກອນແລະເວທີທີ່ແຕກຕ່າງກັນຜ່ານ magic ຂອງການອອກແບບທີ່ຕອບສະຫນອງແລະ simulators ທີ່ຕິດຕັ້ງ. ສ່ວນທີ່ດີທີ່ສຸດແມ່ນວ່າທ່ານສາມາດເຮັດທຸກຢ່າງນີ້ໂດຍບໍ່ຕ້ອງອອກຈາກເບົາເຊີຂອງທ່ານ!

tutorials ຂ້າງລຸ່ມນີ້ຍ່າງທ່ານໂດຍຜ່ານວິທີການເຂົ້າເຖິງເຄື່ອງມືພັດທະນາເຫຼົ່ານີ້ໃນຕົວທ່ອງເວັບເວັບຕ່າງໆ.

Google Chrome

ເຄື່ອງມືຂອງນັກພັດທະນາ Chrome ຊ່ວຍໃຫ້ທ່ານສາມາດແກ້ໄຂແລະແກ້ໄຂລະຫັດ, ກວດສອບອົງປະກອບສ່ວນບຸກຄົນເພື່ອເຜີຍແຜ່ບັນຫາການປະຕິບັດງານ, ຫຼີ້ນຫນ້າຈໍອຸປະກອນທີ່ແຕກຕ່າງກັນລວມທັງຜູ້ທີ່ໃຊ້ Android ຫຼື iOS , ແລະປະຕິບັດຫນ້າທີ່ອື່ນໆທີ່ເປັນປະໂຫຍດອື່ນໆອີກ.

1. ໃຫ້ຄລິກໃສ່ປຸ່ມເມນູຫລັກຂອງ Chrome, ທີ່ມີເສັ້ນສາມເສັ້ນນອນແລະຢູ່ໃນແຈຂວາມືເທິງຂອງເບົາເຊີ.
2. ເມື່ອເມນູແບບເລື່ອນລົງປາກົດ, ໃຫ້ໃສ່ຕົວເມົາຂອງທ່ານໃນຕົວເລືອກ ເຄື່ອງມື ອື່ນໆ.
3. ເມນູຍ່ອຍຄວນປາກົດຂຶ້ນ. ເລືອກເອົາທາງເລືອກທີ່ມີຊື່ວ່າ ເຄື່ອງມືພັດທະນາ . ທ່ານສາມາດໃຊ້ແປ້ນພິມແປ້ນພິມດັ່ງຕໍ່ໄປນີ້ໃນລາຍະການເມນູນີ້: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. ໃນຕອນນີ້ການໂຕ້ຕອບເຄື່ອງມືຂອງນັກພັດທະນາ Chrome ຄວນຈະຖືກສະແດງ, ດັ່ງທີ່ສະແດງຢູ່ໃນຫນ້າຈໍສະແດງຕົວຢ່າງນີ້. ແມ່ນຂຶ້ນຢູ່ກັບສະບັບ Chrome ຂອງທ່ານ, ຮູບແບບເບື້ອງຕົ້ນທີ່ທ່ານເຫັນອາດຈະແຕກຕ່າງກັນເລັກນ້ອຍຈາກການນໍາສະເຫນີທີ່ນີ້. ສູນກາງຕົ້ນຕໍຂອງເຄື່ອງມືພັດທະນາ, ປົກກະຕິຕັ້ງຢູ່ທາງດ້ານລຸ່ມຫຼືຂວາມືຂອງຫນ້າຈໍ, ມີກ່ອງຕໍ່ໄປນີ້.
   ອົງປະກອບ: ສະຫນອງຄວາມສາມາດໃນການກວດສອບ CSS ແລະ HTML code ເຊັ່ນດຽວກັນກັບການແກ້ໄຂ CSS on-the-fly, ເຫັນຜົນກະທົບຂອງການປ່ຽນແປງຂອງທ່ານໃນເວລາທີ່ແທ້ຈິງ.
   ຄອນໂຊນ: console JavaScript ຂອງ Chrome ອະນຸຍາດໃຫ້ສໍາລັບການເຂົ້າຄໍາສັ່ງໂດຍກົງເຊັ່ນດຽວກັນກັບການແກ້ໄຂການບົ່ງມະຕິ.
   ແຫຼ່ງຂໍ້ມູນ: ໃຫ້ທ່ານແກ້ໄຂລະຫັດ JavaScript ຜ່ານອິນເຕີເຟດທີ່ມີປະສິດທິພາບ.
   ເຄືອຂ່າຍ: ຈັດຫມວດຫມູ່ແລະສະແດງຂໍ້ມູນລະອຽດກ່ຽວກັບການປະຕິບັດງານທີ່ກ່ຽວຂ້ອງໃນຫນ້າຄໍາຮ້ອງສະຫມັກຫຼືຫນ້າທີ່ປະຕິບັດງານ, ລວມທັງຫົວຂໍ້ຄໍາຕອບແລະຄໍາຕອບທີ່ສົມບູນແລະຄໍາຕອບທີ່ໃຊ້ເວລາທີ່ທັນສະໄຫມ.
   ໄລຍະເວລາ: ອະນຸຍາດໃຫ້ມີການວິເຄາະຢ່າງລະອຽດກ່ຽວກັບກິດຈະກໍາທີ່ເກີດຂຶ້ນພາຍໃນຕົວທ່ອງເວັບໄວເທົ່າທີ່ຈະເປັນການເລີ່ມຕົ້ນການຮ້ອງຂໍການໂຫຼດຫນ້າຫຼື app.
5. ນອກເຫນືອໄປຈາກພາກເຫຼົ່ານີ້, ທ່ານຍັງສາມາດເຂົ້າເຖິງເຄື່ອງມືດັ່ງຕໍ່ໄປນີ້ໄດ້ໂດຍການນໍາໃຊ້ >> icon, ທີ່ຢູ່ທາງດ້ານຂວາຂອງແຖບ Timeline .
   ໂປຣ ແກຣມປະຈໍາຕົວ : ແບ່ງອອກເປັນໂປຣ ແກຣມ CPU profiler ແລະ Heap profile profiler , ໃຫ້ການນໍາໃຊ້ຫນ່ວຍຄວາມຈໍາທີ່ສົມບູນແບບແລະໄລຍະເວລາປະຕິບັດໂດຍລວມຂອງຄໍາຮ້ອງສະຫມັກຫຼືຫນ້າທີ່ໃຊ້ວຽກ.
   ການຮັກສາຄວາມປອດໄພ: ເນັ້ນຫນັກເຖິງບັນຫາໃບຢັ້ງຢືນແລະບັນຫາອື່ນໆກ່ຽວກັບຄວາມປອດໄພທີ່ມີຫນ້າທີ່ໃຊ້ງານຫຼືຄໍາຮ້ອງສະຫມັກ.
   ຊັບພະຍາກອນ: ນີ້ແມ່ນບ່ອນທີ່ທ່ານສາມາດກວດສອບຄຸກກີ, ເກັບຮັກສາໃນທ້ອງຖິ່ນ, cache ເອກະສານແລະແຫຼ່ງຂໍ້ມູນອື່ນໆທີ່ໃຊ້ໂດຍຫນ້າເວັບຫຼືຄໍາຮ້ອງສະຫມັກໃນປະຈຸບັນ.
   ການກວດສອບ: ສະເຫນີວິທີທີ່ຈະເພີ່ມປະສິດທິພາບເວລາການໂຫຼດຂອງຫນ້າຫຼືເວບໄຊທ໌ແລະການປະຕິບັດທົ່ວໄປ.
6. ໂຫມດອຸປະກອນ ອະນຸຍາດໃຫ້ທ່ານສາມາດເບິ່ງຫນ້າທີ່ໃຊ້ງານໄດ້ໃນ simulator ເຊິ່ງຈະເຮັດໃຫ້ມັນເກືອບວ່າມັນຈະປາກົດຢູ່ໃນຫນຶ່ງໃນອຸປະກອນຫຼາຍກວ່າຫນຶ່ງສິບແປດ, ເຊິ່ງລວມທັງແບບ Android ແລະ iOS ທີ່ມີຊື່ສຽງເຊັ່ນ iPad, iPhone ແລະ Samsung Galaxy. ທ່ານຍັງໄດ້ຮັບຄວາມສາມາດໃນການປະຕິບັດຕາມຄວາມລະອຽດຫນ້າຈໍທີ່ເຫມາະສົມເພື່ອໃຫ້ເຫມາະສົມກັບການພັດທະນາຫຼືຄວາມຕ້ອງການຂອງທ່ານ. ເມື່ອເປີດ / ປິດລະບົບ ອຸປະກອນ , ໃຫ້ເລືອກໄອຄອນໂທລະສັບມືຖືທີ່ຕັ້ງຢູ່ທາງຊ້າຍຂອງແຖບ ອົງປະກອບ .
7. ນອກນັ້ນທ່ານຍັງສາມາດປັບແຕ່ງເບິ່ງແລະຄວາມຮູ້ສຶກຂອງເຄື່ອງມືພັດທະນາຂອງທ່ານໂດຍທໍາອິດກົດປຸ່ມເມນູທີ່ເປັນຕົວຊີ້ບອກສາມຈຸດທີ່ວາງໄວ້ຢູ່ດ້ານຂວາແລະດ້ານຂວາມືຂອງແຖບທີ່ກ່າວມາຂ້າງເທິງ. ຈາກພາຍໃນເມນູແບບເລື່ອນລົງນີ້, ທ່ານສາມາດຕັ້ງຕໍາແຫນ່ງ dock, ສະແດງຫຼືຊ່ອນເຄື່ອງມືທີ່ແຕກຕ່າງກັນເຊັ່ນການເປີດຕົວລາຍການແບບພິເສດເຊັ່ນເຄື່ອງກວດສອບອຸປະກອນ. ທ່ານຈະພົບວ່າເຄື່ອງມື dev deviant interface ເອງກໍ່ສາມາດປັບແຕ່ງໄດ້ດີໂດຍຜ່ານການຕັ້ງຄ່າທີ່ພົບໃນສ່ວນນີ້.

Mozilla Firefox

ພາກສ່ວນພັດທະນາເວັບໄຊຕ໌ຂອງ Firefox ມີເຄື່ອງມືສໍາລັບນັກອອກແບບ, ນັກພັດທະນາແລະນັກທົດລອງເຊັ່ນ: ບັນນາທິການແບບແລະເຄື່ອງມືທີ່ມີຈຸດພິເສດ.

ການອ່ານທີ່ແນະນໍາ: ປື້ມບັນທຶກຜູ້ໃຊ້ Greasemonkey ແລະ Tampermonkey ເທິງ 25

1. ໃຫ້ຄລິກໃສ່ປຸ່ມເມນູຫລັກຂອງ Firefox, ເຊິ່ງເປັນຕົວເລກສາມເສັ້ນທາງນອນແລະຢູ່ໃນແຈຂວາມືເທິງຂອງປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ.
2. ໃນເວລາທີ່ເມນູເລື່ອນລົງຈະປາກົດຂຶ້ນ, ໃຫ້ເລືອກເອົາໄອຄອນທີ່ຕິດແທດກັບ ນັກພັດທະນາ . ເມນູ ຜູ້ພັດທະນາເວັບ ຄວນຈະຖືກສະແດງຢູ່, ມີຕົວເລືອກຕໍ່ໄປນີ້. ທ່ານຈະສັງເກດເຫັນວ່າລາຍະການເມນູສ່ວນໃຫຍ່ມີແປ້ນພິມລັດທີ່ກ່ຽວຂ້ອງກັບພວກເຂົາ.
   ເຄື່ອງມື Toggle: ສະແດງຫລືເຊື່ອງການໂຕ້ຕອບເຄື່ອງມືຂອງນັກພັດທະນາ, ປົກກະຕິຕັ້ງຢູ່ດ້ານລຸ່ມຂອງປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ທາງລັດແປ້ນພິມ: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
   Inspector: ອະນຸຍາດໃຫ້ທ່ານກວດສອບແລະ / ຫຼືປັບລະຫັດ CSS ແລະ HTML ໃນຫນ້າການເຄື່ອນໄຫວເຊັ່ນດຽວກັນກັບອຸປະກອນ Portable ຜ່ານການແກ້ໄຂໄລຍະໄກ. ທາງລັດແປ້ນພິມ: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
   Web Console: ອະນຸຍາດໃຫ້ທ່ານສາມາດປະຕິບັດການສະແດງຜົນ Javascript ພາຍໃນຫນ້າທີ່ active ເຊັ່ນດຽວກັນກັບການທົບທວນເອກະສານການເກັບຂໍ້ມູນຕ່າງໆລວມທັງການເຕືອນໄພການຮັກສາຄວາມປອດໄພ, ການຮ້ອງຂໍເຄືອຂ່າຍ, ຂໍ້ຄວາມ CSS ແລະອື່ນໆ. ທາງລັດຄີ: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
   Debugger: JavaScript Debugger ຊ່ວຍໃຫ້ທ່ານສາມາດລະບຸແລະແກ້ໄຂຂໍ້ບົກພ່ອງໂດຍການຕັ້ງຈຸດຕັດ, ກວດເບິ່ງຂໍ້ມູນ DOM, ປ່ອງສີດໍາຈາກແຫຼ່ງພາຍນອກແລະອື່ນໆ. ເຊັ່ນດຽວກັນກັບກໍລະນີທີ່ມີ Inspector , ຄຸນນະສົມບັດນີ້ຍັງສະຫນັບສະຫນູນການແກ້ໄຂຫ່າງໄກສອກຫຼີກ. ຄີບອດ: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
   ຕົວແກ້ໄຂແບບສະໄຕ: ອະນຸຍາດໃຫ້ທ່ານສ້າງຄໍເຕົ້າໄຂ່ທີ່ໃຫມ່ແລະລວມເອົາພວກມັນດ້ວຍຫນ້າເວັບທີ່ມີການເຄື່ອນໄຫວຫຼືແກ້ໄຂແຜ່ນທີ່ມີຢູ່ແລະທົດສອບວ່າການປ່ຽນແປງຂອງທ່ານເຮັດໃນຕົວທ່ອງເວັບພຽງແຕ່ຫນຶ່ງຄລິກ. ທາງລັດຄີ: Mac OS X, Windows ( SHIFT + F7 )
   ການປະຕິບັດງານ: ສະຫນອງການລາຍລະອຽດລະອຽດຂອງການປະຕິບັດເຄືອຂ່າຍຂອງຫນ້າການເຄື່ອນໄຫວ, ຂໍ້ມູນອັດຕາເຟຣມ, ເວລາປະຕິບັດງານ JavaScript ແລະລັດ, ສີຄີມ, ແລະອື່ນໆອີກ. ທາງລັດແປ້ນພິມ: Mac OS X, Windows ( SHIFT + F5 )
   ເຄືອຂ່າຍ: ລາຍຊື່ການຮ້ອງຂໍຂອງແຕ່ລະເຄືອຂ່າຍທີ່ເລີ່ມຕົ້ນໂດຍຕົວທ່ອງເວັບພ້ອມກັບວິທີການທີ່ກ່ຽວຂ້ອງ, ໂດເມນຕົ້ນສະບັບ, ປະເພດ, ຂະຫນາດແລະເວລາທີ່ຜ່ານມາ. ທາງລັດແປ້ນພິມ: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
   Developer Toolbar: ເປີດຕົວແປພາສາໂຕ້ຕອບໂຕ້ຕອບໂຕ້ຕອບ. ກະລຸນາໃສ່ການ ຊ່ວຍເຫຼືອ ໃນການແປພາສາສໍາລັບບັນຊີລາຍຊື່ຂອງຄໍາສັ່ງທີ່ມີທັງຫມົດແລະ syntax ທີ່ເຫມາະສົມຂອງພວກເຂົາ. ທາງລັດແປ້ນພິມ: Mac OS X, Windows ( SHIFT + F2 )
   WebIDE: ໃຫ້ຄວາມສາມາດໃນການສ້າງແລະປະຕິບັດກິດເວັບຜ່ານອຸປະກອນທີ່ໃຊ້ Firefox OS ຫຼື Firefox OS Simulator. ທາງລັດຄີ: Mac OS X, Windows ( SHIFT + F8 )
   Browser Console: ໃຫ້ບໍລິການດຽວກັນກັບ Web Console (ເບິ່ງຂ້າງເທິງ). ຢ່າງໃດກໍຕາມ, ຂໍ້ມູນທັງຫມົດທີ່ສົ່ງຄືນແມ່ນສໍາລັບຄໍາຮ້ອງສະຫມັກຂອງ Firefox ທັງຫມົດ (ລວມທັງ ການຂະຫຍາຍ ແລະຫນ້າທີ່ລະດັບຂອງຕົວທ່ອງເວັບ) ເທົ່າທີ່ເປັນພຽງແຕ່ຫນ້າເວັບທີ່ໃຊ້ວຽກ. ທາງລັດແປ້ນພິມ: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
   ເບິ່ງການອອກແບບທີ່ຕອບສະຫນອງ: ຊ່ວຍໃຫ້ທ່ານທັນທີເບິ່ງຫນ້າເວັບທີ່ມີຄວາມລະອຽດ, ຮູບແບບຕ່າງໆແລະຂະຫນາດຫນ້າຈໍຕ່າງໆເພື່ອຫຼີ້ນເຄື່ອງອຸປະກອນຕ່າງໆລວມທັງແທັບເລັດແລະໂທລະສັບສະຫຼາດ. ທາງລັດຄີ: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
   Eyedropper: ສະແດງລະຫັດສີ hex ສໍາລັບ pixels ທີ່ຖືກຄັດເລືອກສ່ວນບຸກຄົນ.
   Scratchpad : ໃຫ້ທ່ານຂຽນ, ດັດແກ້, ເຊື່ອມໂຍງແລະປະຕິບັດລະຫັດ JavaScript ຂອງຕົວທ່ອງເວັບຈາກພາຍໃນປ່ອງຢ້ຽມ Firefox ອອກ. ທາງລັດແປ້ນພິມ: Mac OS X, Windows ( SHIFT + F4 )
   ແຫຼ່ງຫນ້າ: ເຄື່ອງມືການພັດທະນາເບື້ອງຕົ້ນຂອງຕົວທ່ອງເວັບ, ຕົວເລືອກນີ້ພຽງແຕ່ສະແດງລະຫັດທີ່ມີຢູ່ສໍາລັບຫນ້າທີ່ໃຊ້ວຽກ. ທາງລັດຄີ: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
   ໄດ້ຮັບເຄື່ອງມືເພີ່ມເຕີມ: ເປີດຄອນເລກຊັນ Toolbox ຂອງນັກພັດທະນາ Web ໃນເວັບໄຊທ໌ທີ່ ເພີ່ມເຂົ້າມາ ຢ່າງເປັນທາງການຂອງ Mozilla, ປະກອບກ່ຽວກັບການຂະຫຍາຍຕົວທີ່ມີຊື່ສຽງຫລາຍໆຢ່າງເປັນເວລາຫລາຍໆຢ່າງເຊັ່ນ Firebug and Greasemonkey.

Microsoft Edge / Internet Explorer

ໂດຍທົ່ວໄປເອີ້ນວ່າ ເຄື່ອງມືພັດທະນາ F12 , ການສະແດງຄວາມເຄົາລົບກັບແປ້ນພິມແປ້ນພິມທີ່ໄດ້ເປີດຕົວອິນເຕີເຟຊະຈາກຮຸ່ນກ່ອນຫນ້າຂອງ Internet Explorer, ເຄື່ອງມື dev ໃນ IE11 ແລະ Microsoft Edge ໄດ້ມາດົນຕັ້ງແຕ່ເລີ່ມຕົ້ນໂດຍການສະເຫນີກຸ່ມທີ່ມີປະໂຫຍດຫຼາຍ ຕົວກວດ, debugger, emulators, ແລະ compilers on-the-fly.

1. ໃຫ້ຄລິກໃສ່ເມນູ Actions ເພີ່ມເຕີມ , ໂດຍສາມຈຸດແລະຕັ້ງຢູ່ແຈຂວາມືເທິງຂອງປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ເມື່ອເມນູເລື່ອນລົງຈະປາກົດ, ເລືອກເອົາທາງເລືອກທີ່ມີ ເຄື່ອງຫມາຍການເຄື່ອງມືພັດທະນາ F12 . ດັ່ງທີ່ຂ້າພະເຈົ້າໄດ້ກ່າວມາແລ້ວ, ທ່ານຍັງສາມາດເຂົ້າເຖິງເຄື່ອງມືຜ່ານທາງລັດແປ້ນພິມ F12 .
2. ການໂຕ້ຕອບການພັດທະນາຄວນຈະຖືກສະແດງໂດຍປົກກະຕິ, ຢູ່ທາງລຸ່ມຂອງປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ເຄື່ອງມືດັ່ງຕໍ່ໄປນີ້ແມ່ນມີຢູ່, ແຕ່ລະຄົນສາມາດເຂົ້າເຖິງໄດ້ໂດຍການຄລິກໃສ່ຫົວຂໍ້ແທັກຂອງແຕ່ລະຫຼືນໍາໃຊ້ປຸ່ມແປ້ນພິມທີ່ມາພ້ອມກັນ.
   DOM Explorer: ອະນຸຍາດໃຫ້ທ່ານສາມາດແກ້ໄຂຄໍເຕົ້າໄຂ່ແລະ HTML ໃນຫນ້າທີ່ສະແດງຜົນ, ສະແດງຜົນການດັດແກ້ທີ່ທ່ານໄປ. ໃຊ້ຟັງຊັນ IntelliSense ເພື່ອເຮັດໃຫ້ລະຫັດແລ້ວສົມບູນຖ້າສາມາດໃຊ້ໄດ້. ທາງລັດແປ້ນພິມ: (CTRL + 1)
   ຄອນໂຊນ: ໃຫ້ຄວາມສາມາດສົ່ງຂໍ້ມູນການແກ້ໄຂການແກ້ໄຂລວມທັງຕົວນັບ, ເວລາ, ຮອຍແລະຂໍ້ຄວາມທີ່ກໍາຫນົດເອງຜ່ານ API ປະສົມປະສານ. ນອກຈາກນີ້, ທ່ານສາມາດສົ່ງລະຫັດເຂົ້າໄປໃນຫນ້າເວັບທີ່ມີການເຄື່ອນໄຫວແລະດັດແປງຄ່າຕ່າງໆທີ່ໄດ້ມອບໃຫ້ກັບຕົວແປໃນເວລາຈິງ. ທາງລັດແປ້ນພິມ: (CTRL + 2)
   Debugger: ໃຫ້ທ່ານຕັ້ງຈຸດ breakpoints ແລະແກ້ໄຂລະຫັດຂອງທ່ານໃນຂະນະທີ່ມັນດໍາເນີນການ, ເສັ້ນໂດຍເສັ້ນຖ້າຈໍາເປັນ. ທາງລັດແປ້ນພິມ: (CTRL + 3)
   ເຄືອຂ່າຍ: ລາຍຊື່ການຮ້ອງຂໍຂອງແຕ່ລະເຄືອຂ່າຍທີ່ເລີ່ມຕົ້ນໂດຍຕົວທ່ອງເວັບໃນລະຫວ່າງການໂຫຼດຫນ້າແລະການປະຕິບັດລວມທັງລາຍລະອຽດຂອງໂປຣແກຣມ, ປະເພດເນື້ອຫາ, ການໃຊ້ແບນວິດແລະອື່ນໆ. ທາງລັດແປ້ນພິມ: (CTRL + 4)
   ການປະຕິບັດງານ: ລາຄາ ລະດັບລາຍະລະອຽດ, ການນໍາໃຊ້ CPU ແລະການວັດແທກອື່ນໆທີ່ກ່ຽວຂ້ອງກັບການປະຕິບັດເພື່ອຊ່ວຍໃຫ້ທ່ານເລັ່ງເວລາໂຫຼດຫນ້າແລະກິດຈະກໍາອື່ນໆ. ທາງລັດແປ້ນພິມ: (CTRL +5)
   ຫນ່ວຍຄວາມຈໍາ: ຊ່ວຍໃຫ້ທ່ານແຍກແລະແກ້ໄຂຂໍ້ຈໍາກັດທີ່ອາດເກີດຂື້ນໃນຫນ້າເວັບໃນປະຈຸບັນໂດຍສະແດງການໃຊ້ເວລາການນໍາໃຊ້ຫນ່ວຍຄວາມຈໍາພ້ອມດ້ວຍພາບຖ່າຍຈາກໄລຍະເວລາທີ່ແຕກຕ່າງກັນ. ທາງລັດແປ້ນພິມ: (CTRL + 6)
   ການແຂ່ງຂັນ: ສະແດງໃຫ້ເຫັນວິທີການຫນ້າທີ່ໃຊ້ວຽກຈະເຮັດໃຫ້ມີຄວາມລະອຽດຕ່າງໆແລະຂະຫນາດຫນ້າຈໍ, ການຕິດຕາມໂທລະສັບສະຫຼາດ, ແທັບເລັດແລະອຸປະກອນອື່ນໆ. ນອກຈາກນີ້ຍັງສະຫນອງຄວາມສາມາດໃນການດັດແປງຕົວແທນຜູ້ໃຊ້ແລະການປະຖົມນິເທດຫນ້າ, ເຊັ່ນດຽວກັນກັບການຫຼອມຫຼຽນທີ່ແຕກຕ່າງກັນໂດຍການເຂົ້າມາໃນລະດັບຄວາມຍາວແລະຄວາມຍາວ. ທາງລັດແປ້ນພິມ: (CTRL + 7)
3. ເພື່ອສະແດງ console ໃນຂະນະທີ່ຢູ່ໃນເຄື່ອງມືອື່ນໆໃຫ້ຄລິກໃສ່ປຸ່ມສີ່ຫລ່ຽມທີ່ມີວົງເລັບດ້ານຂວາຂອງມັນຢູ່ໃນແຈຂວາມືເທິງຂອງການໂຕ້ຕອບເຄື່ອງມືພັດທະນາ.
4. ການປະຕິເສດ, ການຕິດຕັ້ງເຄື່ອງມືຂອງນັກພັດທະນາດັ່ງນັ້ນມັນຈະກາຍເປັນຫນ້າຕ່າງທີ່ແຍກຕ່າງຫາກ, ໃຫ້ຄລິກໃສ່ປຸ່ມທີ່ຖືກສະແດງໂດຍສອງຮູບສີ່ຫລ່ຽມ cascading ຫຼືໃຊ້ແປ້ນພິມແປ້ນພິມດັ່ງຕໍ່ໄປນີ້: CTRL + P. ທ່ານສາມາດເອົາເຄື່ອງມືໄປໃນສະຖານທີ່ເດີມໂດຍກົດ CTRL + P ເປັນຄັ້ງທີສອງ.

Apple Safari (OS X ເທົ່ານັ້ນ)

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

1. ໃຫ້ຄລິກໃສ່ Safari ໃນເມນູຂອງຕົວທ່ອງເວັບ, ທີ່ຢູ່ທາງເທິງຂອງຫນ້າຈໍຂອງທ່ານ. ເມື່ອເມນູເລື່ອນລົງຈະປາກົດ, ເລືອກຕົວເລືອກ. ນອກນັ້ນທ່ານຍັງສາມາດໃຊ້ແປ້ນພິມແປ້ນພິມດັ່ງຕໍ່ໄປນີ້ໃນລາຍະການເມນູນີ້: COMMAND + COMMA (,)
2. ການ ໂຕ້ຕອບ Preferences ຂອງ Safari ຄວນຈະຖືກສະແດງ, overlaying ປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບຂອງທ່ານ. ໃຫ້ຄລິກໃສ່ໄອຄອນ Advanced , ທີ່ຢູ່ທາງດ້ານຂວາມືຂອງຫົວຂໍ້.
3. ການຕັ້ງຄ່າ ຂັ້ນສູງ ຄວນຈະເບິ່ງເຫັນ. ຢູ່ດ້ານລຸ່ມຂອງຫນ້າຈໍນີ້ແມ່ນທາງເລືອກທີ່ຕິດ ສະແດງເມນູການພັດທະນາໃນແຖບເມນູ , ປະກອບດ້ວຍກ່ອງກາເຄື່ອງຫມາຍ. ຖ້າບໍ່ມີເຄື່ອງຫມາຍກວດກາທີ່ສະແດງຢູ່ໃນກ່ອງ, ໃຫ້ຄລິກໃສ່ມັນຄັ້ງຫນຶ່ງເພື່ອວາງໄວ້.
4. ປິດ ການ ໂຕ້ຕອບ Preferences ໂດຍການຄລິກໃສ່ສີແດງ 'x' ທີ່ພົບເຫັນໃນແຈເບື້ອງຊ້າຍມືຂ້າງເທິງ.
5. ທ່ານຄວນສັງເກດເຫັນຕົວເລືອກໃຫມ່ໃນເມນູຕົວທ່ອງເວັບຊື່ Develop , ຕັ້ງຢູ່ລະຫວ່າງ Bookmarks ແລະ Window . ໃຫ້ຄລິກໃສ່ລາຍການເມນູນີ້. ເມນູເລື່ອນລົງຄວນຈະຖືກສະແດງຢູ່, ມີຕົວເລືອກຕໍ່ໄປນີ້.
   ເປີດຫນ້າດ້ວຍ: ຊ່ວຍໃຫ້ທ່ານເປີດຫນ້າເວັບທີ່ໃຊ້ວຽກຢູ່ໃນຫນຶ່ງໃນບັນດາຕົວທ່ອງເວັບອື່ນທີ່ຕິດຕັ້ງໃນ Mac ຂອງທ່ານ.
   ຕົວແທນຜູ້ໃຊ້: ອະນຸຍາດ ໃຫ້ທ່ານເລືອກຈາກຫຼາຍກວ່າສິບແປດຄ່າທໍານຽມຕົວແທນຜູ້ໃຊ້ທີ່ຖືກກໍານົດໄວ້ກ່ອນເຊິ່ງລວມທັງຮຸ່ນ Chrome, Firefox ແລະ Internet Explorer, ເຊັ່ນດຽວກັນກັບກໍານົດລະຫັດຂອງທ່ານເອງ.
   ໃສ່ ຮູບແບບການຕອບຮັບແບບຕອບຮັບ : ສະແດງຫນ້າປັດຈຸບັນຍ້ອນວ່າມັນຈະປາກົດຢູ່ໃນອຸປະກອນຕ່າງໆແລະໃນລະດັບຫນ້າຈໍທີ່ແຕກຕ່າງກັນ.
   ສະແດງ Web Inspector: ເປີດຕົວໂຕ້ຕອບຕົ້ນຕໍສໍາລັບເຄື່ອງມື dev ຂອງ Safari, ໂດຍປົກກະຕິແມ່ນຢູ່ດ້ານລຸ່ມຂອງຫນ້າຈໍຂອງຕົວທ່ອງເວັບຂອງທ່ານແລະມີສ່ວນຕໍ່ໄປນີ້: ອົງປະກອບ , ເຄືອຂ່າຍ , ຊັບພະຍາກອນ , ເວລາ , ຕົວ ແກ້ຕົວ , ການ ຈັດເກັບ , ຄອນໂຊນ .
   ສະແດງຂໍ້ຜິດພາດ console: ນອກຈາກນີ້ຍັງເປີດຕົວເຄື່ອງມື dev, ໂດຍກົງກັບແຖບ Console ທີ່ສະແດງຂໍ້ຜິດພາດ, ເຕືອນ, ແລະຂໍ້ມູນບັນທຶກອື່ນທີ່ສາມາດຄົ້ນຫາໄດ້.
   ສະແດງແຫຼ່ງຫນ້າ: ເປີດແຖບ ຊັບພະຍາກອນ , ເຊິ່ງສະແດງລະຫັດແຫຼ່ງສໍາລັບຫນ້າການເຄື່ອນໄຫວທີ່ກໍານົດໂດຍເອກະສານ.
   ສະແດງຊັບພະຍາກອນຫນ້າ: ປະຕິບັດຫນ້າທີ່ດຽວກັນກັບຕົວເລືອກ ສະແດງຫນ້າແຫຼ່ງຂໍ້ມູນ .
   ສະແດງຕົວແກ້ໄຂ snippet: ເປີດຫນ້າຕ່າງໃຫມ່ທີ່ທ່ານສາມາດເຂົ້າລະຫັດ CSS ແລະ HTML, previewing ຜົນຜະລິດຂອງມັນຢູ່ໃນທີ່ບິນ.
   Show Extension Builder: ໃຫ້ຄວາມສາມາດໃນການສ້າງຫຼືແກ້ໄຂສ່ວນຂະຫຍາຍຂອງ Safari ດ້ວຍ CSS, HTML ແລະ JavaScript.
   ສະແດງເວລາການບັນທຶກ: ເປີດຕາຕະລາງ Timelines ແລະເລີ່ມຕົ້ນການສະແດງຂໍຄວາມຕ້ອງການເຄືອຂ່າຍຮູບແບບແລະການສະແດງຂໍ້ມູນແລະການປະຕິບັດ JavaScript ໃນເວລາທີ່ແທ້ຈິງ.
   ເຊື່ອງແຄດ : ລຶບແຄດທັງຫມົດທີ່ຖືກເກັບຢູ່ໃນຮາດໄດຂອງທ່ານ.
   Disable Caches: ຢຸດ Safari ຈາກການຈັດເກັບເພື່ອໃຫ້ເນື້ອຫາທັງຫມົດຖືກເອີ້ນມາຈາກເຄື່ອງແມ່ຂ່າຍເມື່ອແຕ່ລະຫນ້າໂຫຼດ.
   ປິດການໃຊ້ງານຮູບພາບ: ປ້ອງກັນຮູບພາບຈາກການສະແດງຜົນໃນຫນ້າເວັບທັງຫມົດ.
   ປິດການໃຊ້ Styles: ignores ຄຸນສົມບັດ CSS ເມື່ອຫນ້າແມ່ນ loaded.
   ປິດການໃຊ້ JavaScript: ຈໍາກັດການປະຕິບັດ JavaScript ໃນທຸກຫນ້າ.
   ປິດການໃຊ້ງານຂະຫຍາຍ: ຫ້າມ ການຂະຫຍາຍ ທັງຫມົດຕິດຕັ້ງ ອອກ ຈາກຕົວທ່ອງເວັບ.
   ປິດການໃຊ້ Hacks ເວັບໄຊທ໌ເສພາະ: ຖ້າ Safari ໄດ້ຖືກດັດແປງເພື່ອແກ້ໄຂບັນຫາທີ່ຖືກຕ້ອງໃນຫນ້າເວັບທີ່ໃຊ້ວຽກ, ຕົວເລືອກນີ້ຈະປິດການປ່ຽນແປງດັ່ງນັ້ນຫນ້າເວັບຈະໂຫລດຍ້ອນວ່າມັນຈະມີການປ່ຽນແປງກ່ອນການປ່ຽນແປງເຫຼົ່ານີ້.
   Disable Restrictions File ທ້ອງຖິ່ນ: ອະນຸຍາດໃຫ້ຕົວທ່ອງເວັບມີການເຂົ້າເຖິງໄຟລ໌ໃນແຜ່ນທ້ອງຖິ່ນຂອງທ່ານ, ການກະທໍາທີ່ຖືກຈໍາກັດໂດຍຄ່າເລີ່ມຕົ້ນຍ້ອນເຫດຜົນດ້ານຄວາມປອດໄພ.
   ປິດການຫ້າມການຫ້າມການຂ້າມຕົ້ນກໍາເນີດ: ຂໍ້ຈໍາກັດເຫຼົ່ານີ້ຖືກຈັດຕັ້ງໄວ້ໃນຕອນທໍາອິດເພື່ອປ້ອງກັນບໍ່ໃຫ້ XSS ແລະອັນຕະລາຍອື່ນໆ. ຢ່າງໃດກໍຕາມ, ພວກເຂົາເຈົ້າຈໍາເປັນຕ້ອງມີການພິການຊົ່ວຄາວເພື່ອຈຸດປະສົງການພັດທະນາ.
   ອະນຸຍາດໃຫ້ JavaScript ຈາກສະຖານທີ່ຊອກຫາແບບສະຫຼາດ: ເມື່ອເປີດໃຫ້ໃຊ້, ສະຫນອງຄວາມສາມາດເຂົ້າໃນ URL ທີ່ມີ javascript: ໂດຍກົງເຂົ້າໃນແຖບທີ່ຢູ່.
   ປະຕິບັດການໃບຢັ້ງຢືນ SHA-1 ເປັນບໍ່ປອດໄພ: ໃບຢັ້ງຢືນການ SSL ໂດຍນໍາໃຊ້ລະບົບການ SHA-1 ໄດ້ຖືກພິຈາລະນາຢ່າງກວ້າງຂວາງວ່າຈະບໍ່ມີວັນແລະມີຄວາມສ່ຽງ.