หนังโป้

บทความนี้แนะนำโดยย่อเกี่ยวกับส่วนหลักของส่วนต่อประสานผู้ใช้ JavaScript Debugger UI ถูกแบ่งออกเป็นสามส่วนในแนวตั้ง

บานหน้าต่างรายการแหล่งที่มา

บานหน้าต่างรายการแหล่งข้อมูลจะแสดงรายการไฟล์ต้นฉบับ JavaScript ทั้งหมดที่โหลดลงในหน้าและช่วยให้คุณสามารถเลือกหนึ่งไฟล์ที่จะดีบั๊กที่แหล่งข้อมูลระดับบนสุดจะถูกจัดระเบียบโดยแหล่งกำเนิดและภายใต้ว่าพวกเขาจัดระเบียบ โดยโครงสร้างที่พวกเขาจะให้บริการ

คุณสามารถค้นหาไฟล์โดยใช้Ctrl+ P( Cmd+ Pบน Mac)

ส่วนขยายของเว็บจะแสดงรายการในบานหน้าต่างรายการแหล่งที่มาโดยใช้ชื่อส่วนขยาย

มีตัวเลือกเมนูหลายไฟล์และโฟลเดอร์หรือกลุ่มโดยทั่วไปแล้วจะดูได้โดยคลิกขวาที่รายการ

สำหรับไฟล์ตัวเลือกเมนูบริบทต่อไปนี้จะมีให้ใช้งาน:

สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับไฟล์ในบานหน้าต่างรายการแหล่งที่มา

  • คัดลอก URI ของแหล่งที่มาคัดลอกตัวระบุแบบเต็มของไฟล์ไปยังคลิปบอร์ด
  • แหล่งที่มาของ Blackboxทำให้โปรแกรมดีบั๊กข้ามไฟล์เมื่อฟังก์ชั่น "เข้าสู่" สิ่งนี้มีประโยชน์ในการหลีกเลี่ยงการเข้าไปในห้องสมุดที่โค้ดของคุณใช้ เมื่อไฟล์เป็น "blackboxed" ไฟล์นั้นจะมีไอคอนรูปตาเล็ก ๆ อยู่ข้างๆแทนไฟล์ของไอคอนปกติ
  • ไฟล์ดาวน์โหลดจะเปิดกล่องโต้ตอบไฟล์เพื่อให้คุณสามารถบันทึกไฟล์ไว้ในเครื่องได้

สำหรับโฟลเดอร์และกลุ่มมีตัวเลือกเมนูบริบทต่อไปนี้:

สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับโฟลเดอร์ในบานหน้าต่างรายการแหล่งที่มา

  • ยุบทั้งหมดยุบโฟลเดอร์ย่อยทั้งหมดของรายการ
  • ขยายทั้งหมดขยายโฟลเดอร์ย่อยทั้งหมดของรายการ
  • ตั้งค่าไดเรกทอรีรากเปลี่ยนมุมมองรายการแหล่งที่มาเพื่อให้เห็นเฉพาะรายการและรายการย่อย ชื่อของไดเรกทอรีที่เลือกจะแสดงที่ด้านบนของบานหน้าต่างรายการแหล่งที่มา การคลิกที่ชื่อนี้จะเปลี่ยนเป็นบานหน้าต่างเพื่อแสดงรายการที่มาทั้งหมด
  • Blackbox (ตั้งแต่ Firefox 76)
    • ไฟล์ Blackbox ในไดเรกทอรีนี้ทำให้ไฟล์ทั้งหมดในไดเรกทอรีที่เลือกถูกข้ามโดยดีบักเกอร์ ไฟล์ลูกทั้งหมดได้รับไอคอนรูปดวงตาและตัวเลือกเมนูโฟลเดอร์จะเปลี่ยนเป็นไฟล์ Unblackbox ในไดเรกทอรีนี้
    • ไฟล์ Blackbox ที่อยู่นอกไดเรกทอรีนี้ทำให้ไฟล์ทั้งหมดนอกเหนือจากที่อยู่ในไดเรกทอรีที่เลือกถูกข้ามโดยตัวดีบั๊ก ไฟล์ดังกล่าวทั้งหมดจะได้รับไอคอนรูปดวงตาและตัวเลือกเมนูสำหรับโฟลเดอร์นั้นจะเปลี่ยนเป็นไฟล์ Unblackbox นอกไดเรกทอรีนี้

มุมมองโครงร่าง

มุมมองโครงร่างแสดงแผนผังสำหรับการนำทางไฟล์ที่เปิดอยู่ในปัจจุบัน ใช้เพื่อข้ามไปยังนิยามฟังก์ชันคลาสหรือเมธอดโดยตรง

บานหน้าต่างแหล่งที่มา

นี่แสดงไฟล์ JavaScript ที่โหลดอยู่ในปัจจุบัน

เมื่อบานหน้าต่างต้นทางมุ่งเน้นคุณสามารถค้นหาสตริงในไฟล์โดยใช้Ctrl+ F( Cmd+ Fบน Mac)

Breakpoints have a blue arrow overlaid on the line number. Conditional breakpoints have an orange arrow. If you're stopped at a breakpoint, the entire line gets a green overlay. In the screenshot below there are three breakpoints:

  • line 82 has a normal breakpoint and execution is paused here
  • line 85 has a logpoint which logs the contents of tablerow to the console
  • line 100 has a conditional breakpoint

The third column shows more information about the breakpoints. For example, the logpoint at line 85 logs the value of the tableRow variable to the console and the conditional breakpoint at line 100 breaks if the contents of the todoList is undefined.

Toolbar

At the top of the right-hand pane, there's a toolbar:

The toolbar consists of:

  • Four buttons to control the debugger's movement through the script:
    • Play/pause (F8): pauses or resumes execution of the script you're debugging. When it displays a "play" icon, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.
    • Step over (F10): steps across the current line of JavaScript code.
    • Step in (F11): steps into the function call on the current line of JavaScript code.
    • Step out (Shift-F11): runs the script until the current function exits.
  • a button that can be used to deactivate all breakpoints

Breakpoints list

Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to enable/disable it:

Watch expressions

You can add watch expressions in the right pane. They will be evaluated when code execution is paused:

Variable tooltip

Hover on a variable show a tooltip with its value inside:

Call stack

When the debugger's paused, you'll see a call stack:

Each level of the call stack gets a line, with the name of the function and the filename and line number. Clicking the line opens that source in the source pane.

Right-clicking in the call stack pane opens a context menu with the following items:

  • เปิดใช้งานการจัดกลุ่มเฟรมเวิร์กรวบรวมรายการที่เป็นของเฟรมเวิร์กลงในกลุ่มที่ยุบได้ (ตัวอย่างเช่น jQuery ในภาพหน้าจอด้านบน) เมื่อเปิดใช้งานการจัดกลุ่มตัวเลือกเมนูจะเปลี่ยนเป็นปิดใช้งานการจัดกลุ่มเฟรมเวิร์
  • คัดลอก URI ต้นทางคัดลอกตัวระบุแบบเต็มของไฟล์ต้นฉบับไปยังคลิปบอร์ด
  • แหล่งที่มาของ Blackboxทำให้โปรแกรมดีบั๊กข้ามไฟล์เมื่อฟังก์ชั่น "เข้าสู่" สแต็กเฟรมใด ๆ จากไฟล์ต้นฉบับ blackboxed จะถูกซ่อนในบานหน้าต่างการโทรสแต็ก (หากต้องการลบข้อ จำกัด นี้ให้เลือกแหล่ง Unblackboxในเมนูบริบทของรายการแหล่งข้อมูลหรือบานหน้าต่างแหล่งที่มา)
  • คัดลอกการติดตามสแต็กคัดลอกรายการทั้งหมดในสแตกการโทร (รวมถึง URIs และหมายเลขบรรทัด) ไปยังคลิปบอร์ด

ขอบเขต

คุณจะเห็นป้ายชื่อ "ขอบ" พร้อมลูกศรซ่อนอยู่หลังป้ายชื่อตัวละครที่ซ่อนอยู่ในตอนท้ายของโปรแกรม:

ภาชนะที่ถูกจัดเรียงตามขอบ: ส่วนใหญ่จะขึ้นก่อนหน้านี้และวงกลมใหญ่ทั่วโลก