เทคนิคการดีบักที่ใช้ในเบราว์เซอร์

 (alan.norbauer.com)
5 คะแนน โดย GN⁺ 2023-11-12 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

เคล็ดลับการใช้ดีบักเกอร์ของเบราว์เซอร์

  • เบรกพอยต์แบบมีเงื่อนไขขั้นสูง

    • ขยายความสามารถของเบรกพอยต์แบบมีเงื่อนไขด้วยการใช้ expression ที่มี side effect
    • ใช้ logpoint/tracepoint เพื่อบันทึกล็อกลงคอนโซลได้โดยไม่ต้องหยุดการทำงาน
    • ใช้ console.count เพื่อนับจำนวนครั้งที่มีการทำงาน
    • เบราว์เซอร์หลัก ๆ รองรับ logpoint/tracepoint (ข้อมูล ณ เดือนพฤษภาคม 2020)

  • การใช้ Watch window

    • ใช้ console.log ใน Watch window ได้
    • ตั้ง DOM change breakpoint แล้วเพิ่ม watch expression เพื่อรัน expression ในจังหวะที่ DOM เปลี่ยนแปลง

  • การติดตาม call stack

    • ติดตาม call stack ของการเรียกฟังก์ชันเพื่อหาการเรียกที่ไม่สอดคล้องกัน
    • ใช้ console.trace ในเบรกพอยต์แบบมีเงื่อนไขเพื่อตรวจสอบ call stack

  • เปลี่ยนพฤติกรรมของโปรแกรม

    • เปลี่ยนพฤติกรรมของโปรแกรมได้ทันทีภายในเบราว์เซอร์
    • override พารามิเตอร์ของฟังก์ชันเพื่อปรับพฤติกรรม

  • การทำ performance profiling แบบง่าย

    • ใช้ Console Timing API เพื่อวัดเวลาในการรันโค้ด
    • ใช้ console.time('label') และ console.timeEnd('label') เพื่อวัดเวลา

  • การใช้ arity ของฟังก์ชัน

    • เปิดใช้งานเบรกพอยต์เฉพาะเมื่อถูกเรียกด้วยจำนวนอาร์กิวเมนต์ตามที่กำหนด
    • ใช้เพื่อหาความไม่ตรงกันของจำนวนอาร์กิวเมนต์ตอนเรียกฟังก์ชัน

  • การใช้เวลา

    • เปิดใช้งานเบรกพอยต์เฉพาะหลังจากผ่านไประยะหนึ่งนับจากหน้าเว็บโหลดเสร็จ
    • ข้ามเบรกพอยต์ในช่วงเวลาหนึ่ง และให้ทำงานเฉพาะหลังจากนั้น

  • การใช้ CSS

    • เปิดใช้งานเบรกพอยต์โดยอิงจากค่า CSS ที่คำนวณแล้ว

  • หยุดเฉพาะการเรียกครั้งคู่

    • เปิดใช้งานเบรกพอยต์เฉพาะในการรันครั้งที่เป็นเลขคู่

  • หยุดด้วยการสุ่มตัวอย่าง

    • เปิดใช้งานเบรกพอยต์เฉพาะกับตัวอย่างการรันแบบสุ่มบางส่วน

  • ไม่ให้หยุดที่บรรทัดที่กำหนด

    • ใช้ตัวเลือก "Never Pause Here" เพื่อไม่ให้หยุดที่บรรทัดใดบรรทัดหนึ่ง

  • กำหนด instance ID อัตโนมัติ

    • กำหนด ID ที่ไม่ซ้ำกันให้กับแต่ละคลาสอินสแตนซ์โดยอัตโนมัติ

  • สลับเปิดปิดแบบโปรแกรมได้

    • ใช้ global boolean เพื่อสลับเปิดปิดเบรกพอยต์แบบมีเงื่อนไขด้วยโปรแกรม

  • การเรียก monitor() กับคลาส

    • ใช้คำสั่ง monitor ของ Chrome เพื่อติดตามการเรียกเมธอดของคลาส

  • การเรียกฟังก์ชันและดีบัก

    • เรียก debugger จากคอนโซล แล้วเรียกฟังก์ชันเพื่อดีบัก

  • หยุดการทำงานเมื่อ URL เปลี่ยน

    • หยุดการทำงานก่อนที่ URL จะเปลี่ยนใน single-page application

  • การดีบักการอ่านพร็อพเพอร์ตี

    • เปิดใช้งานเบรกพอยต์ทุกครั้งที่มีการอ่านพร็อพเพอร์ตีของอ็อบเจ็กต์

  • การใช้ copy()

    • ใช้ Console API copy() เพื่อคัดลอกข้อมูลไปยังคลิปบอร์ดจากในเบราว์เซอร์โดยตรง

  • การดีบัก HTML/CSS

    • ใช้คอนโซล JS เพื่อวิเคราะห์ปัญหา HTML/CSS
    • ตรวจสอบ DOM ขณะที่ปิดใช้งาน JS
    • ตรวจสอบองค์ประกอบ DOM ที่แสดงแบบมีเงื่อนไข
    • บันทึก DOM snapshot
    • มอนิเตอร์องค์ประกอบที่ได้รับโฟกัส
    • หาองค์ประกอบที่ใช้ตัวหนา
    • อ้างอิงองค์ประกอบที่ถูกเลือกอยู่ในปัจจุบัน
    • มอนิเตอร์อีเวนต์

ความเห็นของ GN⁺

ประเด็นสำคัญที่สุดของบทความนี้คือการนำเสนอเทคนิคและเคล็ดลับหลากหลายแบบในการใช้ดีบักเกอร์ของเบราว์เซอร์ เพื่อให้นักพัฒนาสามารถดีบักโค้ดและแก้ปัญหาได้อย่างมีประสิทธิภาพมากขึ้น ข้อมูลเหล่านี้มีประโยชน์มากสำหรับนักพัฒนาซอฟต์แวร์ และน่าสนใจเป็นพิเศษเพราะช่วยประหยัดเวลาได้เมื่อจำเป็นต้องตามหาบั๊กที่ซับซ้อนหรือแก้ปัญหาด้านประสิทธิภาพ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2023-11-12
ความคิดเห็นจาก Hacker News

  • พัฒนาการของเครื่องมือดีบักที่ฝังมาในเบราว์เซอร์

    • เครื่องมือดีบักที่ฝังมาในเบราว์เซอร์พัฒนาไปอย่างมากตลอดหลายทศวรรษที่ผ่านมา
    • ในฐานะคนทำงานสาย JavaScript รู้สึกขอบคุณทุกคนที่ทำให้การดีบักโค้ดในเบราว์เซอร์เป็นเรื่องที่ทำได้อย่างเป็นธรรมชาติ
    • เวลาไปทำงานฝั่งแบ็กเอนด์หรือใช้ภาษาอื่น ก็มักจะคิดถึง ecosystem ของเครื่องมือดีบักในเบราว์เซอร์สมัยใหม่

  • การใช้คำสั่ง debugger

    • การใช้คำสั่ง debugger (debugger;) เป็นวิธีเดียวที่เอาชนะสแตกแบบเรียกซ้ำของ Chrome debugger ได้
    • มีการยกตัวอย่างกรณีที่ใช้กับดักการดีบักเพื่อป้องกันไม่ให้ผู้เข้าชมเว็บไซต์ตีความหน้าโฮมเพจที่ถูกทำให้อ่านยากของตน

  • ความยากของการดีบักแบ็กเอนด์ NodeJS

    • ในฐานะโปรแกรมเมอร์ Python/Elixir มักใช้ pdb.set_trace()/IEx.pry() อยู่บ่อยครั้ง
    • ต้องมารับช่วงดูแลแบ็กเอนด์ NodeJS ที่ซับซ้อน และลำบากกับการทำงานโดยไม่มีเครื่องมือดีบักที่เหมาะสม
    • สุดท้ายต้องกลับไปใช้การดีบักด้วย console.log ซึ่งให้ความรู้สึกดิบและพื้นฐานมาก
    • รู้สึกแปลกใจที่ไม่มี REPL สำหรับการดีบักที่เหมาะสม และขอคำแนะนำ

  • แนะนำ Werkzeug

    • มีการแนะนำให้ใช้ Werkzeug สำหรับการพัฒนาแบ็กเอนด์ Django
    • มันช่วยให้สามารถใช้เชลล์ "PDB" ในเบราว์เซอร์ได้ทุกครั้งที่เกิด exception

  • วิธีเข้าถึงตัวแปรโลคัลของ IIFE

    • มีคำถามเกี่ยวกับวิธีเข้าถึงตัวแปรโลคัลของ Immediately Invoked Function Expression (IIFE)
    • กำลังหาวิธีทำสิ่งนี้โดยไม่ต้องให้ debugger หยุดโค้ดภายในสโคปของ IIFE

  • วิธีดีบักผ่านสตริงใน UI

    • เริ่มบันทึก network request ในแผง Network
    • ใช้การค้นหาในแถบด้านซ้ายเพื่อใส่โค้ดหรือสตริง UI ที่ต้องการหา
    • พบผลลัพธ์ในไฟล์ js chunk ที่ bundle มาแล้ว จากนั้นเปิดใน "Sources" และวางคำสั่ง debugger ไว้

  • การดีบักด้วย conditional breakpoint

    • มีคำถามเกี่ยวกับวิธีแปลง {configOption: true} ให้เป็น {get configOption() { debugger; return true; }}

  • ฟีเจอร์เฉพาะของ Chrome 'Monitor Events for Element'

    • มีการพูดถึงฟีเจอร์ 'Monitor Events for Element' และบอกว่าเป็นฟีเจอร์เฉพาะของ Chrome
    • สงสัยว่ามีทางเลือกสำหรับ Firefox หรือไม่

  • การไม่มีอยู่ของ API queryObjects

    • มีการพูดถึง API queryObjects ที่คืนรายการออบเจ็กต์ทั้งหมดที่ถูกสร้างจาก constructor ที่กำหนด
    • ตัวอย่างเช่น ใช้ queryObjects(Function) เพื่อดึงรายการฟังก์ชันทั้งหมดที่อยู่ใน heap ได้

  • ความยากในการใช้ watch variable

    • ใช้งาน watch variable ให้ทำงานได้ค่อนข้างยาก
    • เดาว่าน่าจะ watch ได้เฉพาะ global variable เท่านั้น แต่พอใช้งานจริงกลับไม่ทำงานอย่างที่คาด จึงต้องปล่อยให้ log แสดงค่าต่าง ๆ แทน
    • มีความเห็นว่าควรเพิ่ม UI แบบ Data.gui เพื่อให้ console สามารถดูและทดสอบค่าของตัวแปรและการตั้งค่าต่าง ๆ ได้ พร้อมแนบลิงก์ CodePen ที่เกี่ยวข้อง