การดีบักในเครื่อง (โดย Flywheel): คู่มือสำหรับผู้เริ่มต้นใช้งาน
เผยแพร่แล้ว: 2022-08-13การมีปัญหาเกิดขึ้นบนเว็บไซต์หรือแม้กระทั่งภายในการติดตั้งเว็บไซต์อาจทำให้กังวลใจได้ ท้ายที่สุด ปัญหาด้านประสิทธิภาพของไซต์หรือจุดบกพร่องอาจส่งผลให้ไซต์หยุดทำงาน และการหยุดทำงานของไซต์อาจหมายถึงการสูญเสียการเข้าชม พลาดโอกาส และแม้กระทั่งสูญเสียรายได้
โชคดีที่มีโซลูชันการดีบักมากมายสำหรับการระบุและแก้ไขปัญหาไซต์ แต่คุณจะรู้ได้อย่างไรว่าสิ่งใดดีที่สุดสำหรับสถานการณ์ของคุณ
ใน Local มีวิธีการแบบหลายง่ามสำหรับการดีบัก ในที่นี้ เราจะพูดถึงตัวเลือกการดีบักเริ่มต้นที่มาพร้อมกับ Local ตลอดจนวิธีการระบุข้อผิดพลาด และส่วนเสริมเพิ่มเติมที่คุณสามารถใช้เพื่อระบุและแก้ไขปัญหาได้รวดเร็วและมีประสิทธิภาพยิ่งขึ้น
Xdebug คืออะไรใน Local?
ก่อนที่เราจะสามารถพูดคุยถึงวิธีการดีบักใน Local เราต้องพูดถึง Xdebug ก่อน ซึ่งเป็นเครื่องมือดีบั๊กที่มีอยู่ใน Local และคุณสมบัติเด่นบางประการ
Xdebug เป็นส่วนขยาย PHP ที่ทำให้กระบวนการดีบักง่ายขึ้น โดยหลักแล้ว จะทำให้การจัดรูปแบบสำหรับฟังก์ชัน var_dump () สะอาดขึ้น และเพิ่มคำเตือนและประกาศเกี่ยวกับข้อผิดพลาดเฉพาะ ด้วยวิธีนี้จะทำให้ประสบการณ์การใช้งานของผู้ใช้ง่ายขึ้น
ในกรณีที่คุณไม่ทราบ var_dump() เป็นบิตที่มีประโยชน์ของ PHP ซึ่งจะเปิดเผยสิ่งผิดปกติในโค้ดของคุณอย่างรวดเร็ว แต่ข้อแตกต่างที่นี่คือ ถ้าคุณไม่มี Xdebug อยู่ในมือ รหัสที่สร้างขึ้นเมื่อคุณเรียก var_dump() จะอ่านยากกว่ามาก นอกจากนี้ คุณต้องจัดรูปแบบ PHP ของคุณในลักษณะเฉพาะเมื่อเรียกใช้ var_dump() ในที่แรก.
Xdebug พร้อมใช้งานใน Local เนื่องจากมีข้อมูลเชิงลึกเกี่ยวกับข้อผิดพลาดเมื่อเกิดขึ้น นอกจากนี้ยังมาพร้อมกับตัวดีบักขั้นตอนที่ช่วยปรับปรุงกระบวนการแก้ไขจุดบกพร่อง โดยเฉพาะอย่างยิ่งสำหรับปัญหาที่ใหญ่กว่า ดีบักเกอร์ขั้นตอนทำงานโดยอนุญาตให้คุณประเมินโค้ดของคุณทีละขั้นตอนที่จุดสั่งหยุดเฉพาะ ซึ่งช่วยให้คุณประเมินรหัสในส่วนที่เล็กกว่าและค้นหาปัญหาได้ง่ายขึ้น
และส่วนที่ดีที่สุดคือ Xdebug ถูกเปิดใช้งานใน Local โดยค่าเริ่มต้น ดังนั้นคุณจึงไม่ต้องวุ่นวายกับการตั้งค่าใดๆ เพื่อเริ่มต้น เพียงแค่เปิด Local แล้วไป
วิธีแก้จุดบกพร่องเว็บไซต์ในเครื่อง
คุณสามารถดีบักเว็บไซต์ใน Local ได้ด้วยวิธีหลักๆ สองสามวิธี ต่อไปนี้คือขั้นตอนหลักที่เราจะพูดถึง:
- การระบุข้อผิดพลาดคอนโซลเบราว์เซอร์
- การใช้การตรวจสอบแบบสอบถาม
- ผ่าน Xdebug และ VS Code
- ด้วย Xdebug และ PhpStorm
- ใช้ Xdebug สำหรับการดีบักขั้นตอน
มาดำดิ่งกัน
1. ระบุข้อผิดพลาดคอนโซลเบราว์เซอร์
ขั้นตอนแรกในการดีบักคือการใช้คอนโซลของเบราว์เซอร์ ซึ่งเป็นส่วนหนึ่งของเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ทั้งหมด ซึ่งทำให้คุณสามารถระบุข้อผิดพลาดบนหน้าเว็บได้โดยไม่ต้องใช้เครื่องมือพิเศษใดๆ เพียงเริ่ม Local เข้าถึงเพจที่เป็นปัญหาด้วยเบราว์เซอร์ที่คุณเลือก และใช้คอนโซลเพื่อค้นหาข้อผิดพลาด ต่อไปนี้เป็นรายละเอียดวิธีเข้าถึงคอนโซลของเบราว์เซอร์ในเบราว์เซอร์หลายตัว
หากคุณกำลังใช้ Chrome…
- เปิด DevTools โดยไปที่ More Tools > Developer Tools ในขณะที่อยู่ในเมนูเบราว์เซอร์ Chrome หรือกด Ctrl/Cmd+Shift+I
- คลิกแท็บ คอนโซล
- หากมีข้อผิดพลาดใด ๆ ควรมองเห็นได้ในขณะนี้ หากไม่เป็นเช่นนั้น ให้โหลดหน้าเว็บซ้ำเพื่อสร้าง
- จดบันทึกประเภทของข้อผิดพลาด ตำแหน่ง และหมายเลขบรรทัดภายในคอนโซลของเบราว์เซอร์
หากคุณกำลังใช้ Firefox…
- เปิดเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์โดยไปที่ More Tools > Web Developer Tools ในขณะที่อยู่ในเมนู Firefox Ctrl/Cmd+Shift+ฉัน ทำงานที่นี่เช่นกัน
- คลิก คอนโซล แท็บ หรือคุณสามารถเข้าถึงคอนโซลได้โดยตรงผ่าน เครื่องมือเพิ่มเติม > คอนโซลเบราว์เซอร์
- ข้อผิดพลาดใด ๆ ควรปรากฏให้เห็น ถ้าไม่ ให้โหลดหน้านี้ซ้ำ
หากคุณกำลังใช้ Safari…
- เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์โดยไปที่การ ตั้งค่า > ขั้นสูง ในขณะที่อยู่ในเมนู Safari Option+Cmd+I คือเพื่อนของคุณที่นี่
- ทำเครื่องหมายที่ช่องถัดจาก แสดงเมนูพัฒนาในแถบเมนู จากนั้นปิดกล่องโต้ตอบ
- คลิก พัฒนา > แสดงคอนโซลข้อผิดพลาด ข้อตกลงเดียวกันกับข้างต้น
ด้วยข้อมูลนี้ คุณสามารถกลับไปที่ระบบไฟล์ที่ตั้งค่าใน Local และค้นหาโค้ดเฉพาะที่ทำให้เกิดปัญหา จากนั้นจึงดำเนินการแก้ไข ใช้ปุ่มไป ที่โฟลเดอร์ไซต์ เพื่อเข้าถึงตำแหน่งของเว็บไซต์ในพื้นที่ของคุณ
2. ใช้ Query Monitor เพื่อแก้ไขปัญหาประสิทธิภาพของไซต์
คุณสามารถระบุและแก้ไขปัญหาเว็บไซต์ได้โดยตรงใน WordPress เช่นกัน อันที่จริง ปลั๊กอิน Query Monitor เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการดีบักและสำหรับการระบุปัญหาด้านประสิทธิภาพโดยเฉพาะ สิ่งนี้ทำให้เป็นคู่ที่มีประโยชน์ด้วยเครื่องมือดีบักภายในเครื่อง และมีประโยชน์อย่างยิ่งในการระบุปัญหาปลั๊กอินและธีมของบุคคลที่สาม
คุณสามารถติดตั้งปลั๊กอินได้เหมือนอย่างอื่นๆ เพียงไปที่ Plugins > Add New แล้วค้นหาโดยใช้ชื่อ ค้นหาในรายการและคลิก ติดตั้ง ทันที จากนั้น เปิดใช้งาน เมื่อดาวน์โหลดแล้ว
การตรวจสอบคำค้นหาสามารถบอกอะไรคุณได้บ้าง
หลังจากติดตั้งปลั๊กอินแล้ว คุณจะเห็นตัวเลือกเมนูใหม่ที่ด้านบนของแดชบอร์ด WordPress
การวางเมาส์เหนือรายการจะแสดงรายการดรอปดาวน์ของเครื่องมือตรวจสอบคิวรีและตัวเลือก การเลือกรายการใดรายการหนึ่งจะเปิดเมนูขึ้นที่ด้านล่างซึ่งคุณสามารถเรียนรู้รายละเอียดเพิ่มเติมเกี่ยวกับหน้าปัจจุบันได้
เหนือสิ่งอื่นใด Query Monitor จะให้ภาพรวมเกี่ยวกับประสิทธิภาพของเพจของคุณ ซึ่งรวมถึง:
- การใช้หน่วยความจำสูงสุด เครื่องมือนี้แสดงจำนวนหน่วยความจำที่ใช้ในการสร้างเพจในช่วงเวลาที่กำหนด
- เวลาสร้างเพจ แสดงระยะเวลาที่ใช้ในการสร้างเพจ
- เวลาสืบค้นฐานข้อมูล สุดท้าย เครื่องมือนี้จะแสดงให้คุณเห็นว่าฐานข้อมูลใช้เวลานานเท่าใดในการตอบสนองต่อคำขอธีมหรือปลั๊กอิน
นอกเหนือจากปัญหาด้านประสิทธิภาพแล้ว ปลั๊กอินนี้ยังสามารถระบุข้อผิดพลาดและข้อสังเกตของ PHP ได้ เช่นเดียวกับ Xdebug อย่างไรก็ตาม ความพยายามของมันมุ่งเน้นไปที่ธีมและปลั๊กอินของบุคคลที่สาม สิ่งที่สะดวกในที่นี้คือ หากมีข้อผิดพลาด แท็บใหม่จะปรากฏขึ้นภายในเครื่องมือชื่อ PHP Errors ที่เหมาะสม ซึ่งจะแสดงรายการข้อผิดพลาดแต่ละรายการพร้อมกับภัยคุกคามด้านความปลอดภัย นอกจากนี้ยังจะบอกคุณถึงบรรทัดของรหัสที่ข้อผิดพลาดปรากฏขึ้นและรหัสข้อผิดพลาดหรือการแจ้งเตือนเฉพาะอีกด้วย
วิธีนี้มีประโยชน์มากสำหรับเว็บไซต์ที่เผยแพร่อยู่แล้วหรืออยู่ในระหว่างการทดสอบขั้นสุดท้าย อย่างไรก็ตาม หากคุณยังอยู่ในขั้นตอนการพัฒนาในพื้นที่ การใช้ Xdebug ใน Local จะเป็นทางออกที่ดีที่สุดของคุณ
3. การตั้งค่า Xdebug และ VS Code สำหรับการดีบัก
ย้อนกลับไปใน Local คุณสามารถใช้ Xdebug ได้หลายวิธีในการดีบักไซต์ในพื้นที่ เพื่อให้ได้ผลตอบแทนที่คุ้มค่ามากขึ้น พูดง่ายๆ ก็คือ คุณสามารถเพิ่มพลังของ VS Code ลงในสมการได้
VS Code เป็นโปรแกรมแก้ไขโค้ดโอเพนซอร์ซที่มีเครื่องมือขยายและส่วนต่อประสานผู้ใช้ที่ใช้งานง่ายยิ่งขึ้น มันทำให้กระบวนการดีบักแบบบรรทัดต่อบรรทัดนั้นใช้งานง่ายขึ้นและมองเห็นได้ง่ายยิ่งขึ้น
คุณสามารถเชื่อมต่อ VS Code กับ Xdebug Step Debugger เพื่อให้ได้ผลลัพธ์ที่ยอดเยี่ยม วิธีตั้งค่าเพื่อใช้ภายใน Local มีดังนี้
- ดาวน์โหลด VS Code และติดตั้งตามคำแนะนำของผู้พัฒนา
- ดาวน์โหลดและติดตั้งส่วนขยายดีบักเกอร์ PHP เอกสารของ Local แนะนำส่วนขยาย PHP Debug สำหรับงานนี้
- ใน Local คลิก Add-on > Xdebug + VS Code
- คลิก ติดตั้งโปรแกรม เสริม
- เมื่อเสร็จแล้ว ให้กด Enable & Relaunch
- เปิดไซต์ใน Local แล้วคลิกแท็บ Utilities
- คลิก เพิ่มการกำหนดค่าการเรียกใช้ใน VS Code
- VS Code จะเปิดตัวและคุณสามารถเริ่มกระบวนการดีบักได้
หากคุณไม่ต้องการ VS Code คุณสามารถใช้เครื่องมือแก้ไขอื่นสำหรับงานได้
4. การตั้งค่า Xdebug และ PhpStorm สำหรับการดีบัก
อีกทางเลือกหนึ่งคือใช้ PhpStorm กับ Xdebug คุณสามารถเพิ่มลงใน Local ผ่านทางส่วนเสริม และจะทำงานร่วมกับ Xdebug Step Debugger การติดตั้งและการตั้งค่าคล้ายกับกระบวนการที่อธิบายไว้สำหรับ VS Code ด้านบน ในการใช้งาน ให้ทำตามขั้นตอนต่อไปนี้:
- ดาวน์โหลดและติดตั้ง PhpStorm.dll
- ใน Local คลิก Add-on > Xdebug + PhpStorm
- คลิก ติดตั้งโปรแกรม เสริม
- เปิดใช้งานและเปิดใหม่ อีกครั้งหลังจากเสร็จสิ้น
- เปิดไซต์ใดก็ได้ใน Local แล้วคลิก Utilities แท็บ
- คลิก เพิ่มการรันการกำหนดค่าไปยัง PhpStorm
- เมื่อใช้งาน PhpStorm ให้ตั้งค่าเบรกพอยต์โดยคลิกรางน้ำที่บรรทัดโค้ดเฉพาะที่คุณต้องการให้เบรกพอยต์เกิดขึ้น
- คลิก เล่น เพื่อเริ่มกระบวนการดีบัก
หากคุณต้องการคำแนะนำเพิ่มเติมเกี่ยวกับกระบวนการดีบัก การดีบักขั้นตอนเป็นตัวเลือกเสมอ
5. การใช้ Xdebug สำหรับการดีบักขั้นตอน
Step Debugging เป็นเครื่องมือที่มีประโยชน์อย่างยิ่งและเป็นส่วนหนึ่งของ Xdebug ที่คอยช่วยเหลือคุณตลอดกระบวนการดีบัก มันทำงานร่วมกับ VS Code และ PhpStorm (รวมถึง IDE และโปรแกรมแก้ไขข้อความอื่น ๆ อีกมากมาย) เพื่อให้รายละเอียดแต่ง่ายต่อการติดตามเครื่องมือดีบัก ขั้นตอน และโปรโตคอล
ใน Local คุณไม่จำเป็นต้องดำเนินการใดๆ เพื่อตั้งค่า Xdebug เพราะจะเปิดใช้งานตามค่าเริ่มต้นโดยอัตโนมัติ แม้ว่าจะมีคำแนะนำในการตั้งค่าที่ซับซ้อนกว่านี้ หากคุณมีสภาพแวดล้อมการทดสอบที่ซับซ้อน (โดยมีหลายระบบที่ทำงานร่วมกัน) เราจะถือว่าคุณจำเป็นต้องดำเนินการแก้ไขจุดบกพร่องบนระบบเดียวในการติดตั้ง Local เพียงครั้งเดียว
หากต้องการใช้การดีบักแบบเป็นขั้นตอน สิ่งที่คุณต้องทำคือทำตามขั้นตอนที่อธิบายไว้ในสองส่วนก่อนหน้านี้ คุณลักษณะนี้ใช้งานได้กับทั้ง VS Code หรือ PhpStorm เมื่อทุกอย่างถูกตั้งค่าแล้ว มันจะตั้งค่าเบรกพอยต์โดยอัตโนมัติและเล่นผ่านโค้ดทีละตัว นี่เป็นวิธีที่ใช้งานง่ายในการเรียกใช้โค้ดของคุณ ดูข้อผิดพลาด และแก้ไขปัญหาที่เกิดขึ้น
การดีบักใน Local Made Easy
อย่างที่คุณเห็น การดีบักใน Local เป็นกระบวนการที่ค่อนข้างง่ายซึ่งต้องมีการตั้งค่าเพียงเล็กน้อยเพื่อเริ่มต้น เครื่องมือแก้ไขข้อบกพร่องหลักมีอยู่แล้วตามค่าเริ่มต้น สิ่งที่คุณต้องทำคือตั้งค่าโปรแกรมแก้ไขข้อความหรือ IDE ที่คุณต้องการ กำหนดค่าส่วนเสริมหรือสองรายการ เท่านี้คุณก็พร้อมแล้ว แน่นอน คุณจะต้องดำเนินการแก้ไขจุดบกพร่องจริงเพื่อให้เว็บไซต์ของคุณอยู่ในรูปแบบที่ดีที่สุด แต่อย่างน้อย กระบวนการดีบักนั้นสามารถดำเนินการได้อย่างง่ายดายและไม่ยุ่งยาก
เครื่องมือใดที่คุณต้องการแก้ไขจุดบกพร่องใน Local เราชอบที่จะได้ยินความคิดเห็นของคุณในความคิดเห็นด้านล่าง