From 90564ab03b54445151f0da6c5227ae40824a0002 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:20 +0100 Subject: unslug th: move --- files/th/tools/debugger/ui_tour/index.html | 149 +++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 files/th/tools/debugger/ui_tour/index.html (limited to 'files/th/tools/debugger/ui_tour') diff --git a/files/th/tools/debugger/ui_tour/index.html b/files/th/tools/debugger/ui_tour/index.html new file mode 100644 index 0000000000..a4c0bcf086 --- /dev/null +++ b/files/th/tools/debugger/ui_tour/index.html @@ -0,0 +1,149 @@ +--- +title: หนังโป้ +slug: Tools/Debugger/www.หนังโป้.com +translation_of: Tools/Debugger/UI_Tour +--- +
{{ToolsSidebar}}
+ +

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

+ + + +

+ +

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

+ +

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

+ +

+ +

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

+ +

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

+ +

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

นี่แสดงไฟล์ 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:

+ + + +

+ +

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:

+ + + +

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:

+ + + +

ขอบเขต

+ +

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

+ +

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

-- cgit v1.2.3-54-g00ecf