---
title: หนังโป้
slug: Tools/Debugger/UI_Tour
translation_of: Tools/Debugger/UI_Tour
original_slug: Tools/Debugger/www.หนังโป้.com
---
<div>{{ToolsSidebar}}</div>

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

<ul>
 <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">บานหน้าต่างรายการแหล่งที่มา</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">บานหน้าต่างแหล่งที่มา</a></li>
 <li>เนื้อหาของบานหน้าต่างที่สามขึ้นอยู่กับสถานะปัจจุบันของดีบักเกอร์และอาจรวมถึงส่วนต่อไปนี้:
  <ul>
   <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Toolbar">แถบเครื่องมือ</a></li>
   <li>รับชมการแสดงออก</li>
   <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">จุดพัก</a></li>
   <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Call_stack">เรียกสแตก</a></li>
   <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Scopes">ขอบเขต</a></li>
   <li>XHR</li>
   <li>จุดพักการฟังเหตุการณ์</li>
   <li>การเปลี่ยนสายพันธุ์ของ DOM</li>
  </ul>
 </li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/16840/debugger_uiTour_01.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<h2 id="บานหน้าต่างรายการแหล่งที่มา">บานหน้าต่างรายการแหล่งที่มา</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16841/debugger_uiTour_02.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<p>คุณสามารถ<a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_for_files">ค้นหาไฟล์</a>โดยใช้<kbd>Ctrl</kbd>+ <kbd>P</kbd>( <kbd>Cmd</kbd>+ <kbd>P</kbd>บน Mac)</p>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16868/source_list_pane.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 373px;"></p>

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

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

<p><img alt="สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับไฟล์ในบานหน้าต่างรายการแหล่งที่มา" src="https://mdn.mozillademos.org/files/17200/debugger-source-list-file-menu.png" style="height: 205px; width: 298px;"></p>

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

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

<p><img alt="สกรีนช็อตแสดงตัวเลือกเมนูบริบทสำหรับโฟลเดอร์ในบานหน้าต่างรายการแหล่งที่มา" src="https://mdn.mozillademos.org/files/17201/debugger-source-list-folder-menu.png" style="height: 203px; width: 536px;"></p>

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

<h3 id="มุมมองโครงร่าง">มุมมองโครงร่าง</h3>

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

<h2 id="บานหน้าต่างแหล่งที่มา">บานหน้าต่างแหล่งที่มา</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16843/debugger_uiTour_02.5.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;">เมื่อบานหน้าต่างต้นทางมุ่งเน้นคุณสามารถ<a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">ค้นหาสตริงในไฟล์</a>โดยใช้<kbd>Ctrl</kbd>+ <kbd>F</kbd>( <kbd>Cmd</kbd>+ <kbd>F</kbd>บน Mac)</p>

<p><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Breakpoints</a> have a blue arrow overlaid on the line number. <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Conditional breakpoints</a> 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:</p>

<ul>
 <li>line 82 has a normal breakpoint and execution is paused here</li>
 <li>line 85 has a logpoint which logs the contents of tablerow to the console</li>
 <li>line 100 has a conditional breakpoint</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/16842/debugger_uiTour_03.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<p>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.</p>

<h2 id="Toolbar"><a name="toolbar">Toolbar</a></h2>

<p>At the top of the right-hand pane, there's a toolbar:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16844/debugger_toolbar.png" style="display: block; height: 126px; margin-left: auto; margin-right: auto; width: 236px;"></p>

<p>The toolbar consists of:</p>

<ul>
 <li>Four buttons to <a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">control the debugger's movement through the script</a>:

  <ul>
   <li><strong>Play/pause</strong> (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.</li>
   <li><strong>Step over</strong> (F10): steps across the current line of JavaScript code.</li>
   <li><strong>Step in</strong> (F11): steps into the function call on the current line of JavaScript code.</li>
   <li><strong>Step out</strong> (Shift-F11): runs the script until the current function exits.</li>
  </ul>
 </li>
 <li>a button that can be used to deactivate all breakpoints</li>
</ul>

<h2 id="Breakpoints_list">Breakpoints list</h2>

<p>Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to <a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">enable/disable it</a>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16845/debugger_uiTour_breakpoints.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p>

<h2 id="Watch_expressions">Watch expressions</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14845/watch-expressions.png" style="display: block; height: 769px; margin-left: auto; margin-right: auto; width: 504px;"></p>

<h2 id="Variable_tooltip">Variable tooltip</h2>

<p>Hover on a variable show a tooltip with its value inside:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14851/tooltip-1.gif" style="display: block; height: 522px; margin-left: auto; margin-right: auto; width: 988px;"></p>

<h2 id="Call_stack">Call stack</h2>

<p>When the debugger's paused, you'll see a call stack:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16846/debugger_uiTour_call_stack.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;">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.</p>

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

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

<h2 id="ขอบเขต">ขอบเขต</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16847/debugger_uiTour_scopes.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;">ภาชนะที่ถูกจัดเรียงตามขอบ: ส่วนใหญ่จะขึ้นก่อนหน้านี้และวงกลมใหญ่ทั่วโลก</p>