ข้อมูลอ้างอิงการดีบัก JavaScript

Kayce Basques

Sofia Emelianova

ค้นพบเวิร์กโฟลว์การแก้ไขข้อบกพร่องแบบใหม่ด้วยข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับการแก้ไขข้อบกพร่องของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ใหม่ๆ

โปรดดูเริ่มต้นใช้งานการแก้ไขข้อบกพร่อง JavaScript ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อเรียนรู้พื้นฐานการแก้ไขข้อบกพร่อง

หยุดโค้ดที่มีเบรกพอยท์ชั่วคราว

ตั้งค่าเบรกพอยท์เพื่อให้คุณหยุดโค้ดชั่วคราวได้ในระหว่างการเรียกใช้ หากต้องการเรียนรู้วิธีตั้งค่าเบรกพอยท์ ให้ดูหยุดโค้ดชั่วคราวด้วยเบรกพอยท์

ตรวจสอบค่าเมื่อหยุดชั่วคราว

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

คุณสามารถใช้คอนโซลเพื่อค้นหาตัวแปร ค่าคงที่ และออบเจ็กต์ที่ประเมินได้

แสดงตัวอย่างพร็อพเพอร์ตี้ของคลาส/ฟังก์ชันเมื่อวางเมาส์เหนือ

ขณะที่การดำเนินการหยุดชั่วคราว ให้วางเมาส์เหนือชื่อคลาสหรือชื่อฟังก์ชันเพื่อดูตัวอย่างพร็อพเพอร์ตี้

รหัสขั้นตอน

เมื่อโค้ดหยุดชั่วคราว ให้ผ่านรหัสทีละนิพจน์เพื่อตรวจสอบโฟลว์การควบคุมและค่าพร็อพเพอร์ตี้ไปพร้อมๆ กัน

ข้ามบรรทัดโค้ด

เมื่อหยุดชั่วคราวบนบรรทัดโค้ดที่มีฟังก์ชันซึ่งไม่เกี่ยวข้องกับปัญหาที่คุณดำเนินการ การแก้ไขข้อบกพร่อง ให้คลิกข้ามขั้นตอน เพื่อเรียกใช้ฟังก์ชัน โดยไม่ต้องเข้าไปในนั้น

ตัวอย่างเช่น สมมติว่าคุณกำลังแก้ไขข้อบกพร่องของโค้ดต่อไปนี้

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

คุณหยุดชั่วคราวใน A เมื่อกดขั้นตอนก่อนหน้า เครื่องมือสำหรับนักพัฒนาเว็บจะเรียกใช้โค้ดทั้งหมดในฟังก์ชันที่ เกินเข้ามาแล้ว ซึ่งก็คือ B และ C จากนั้นเครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวใน D

เข้าสู่บรรทัดโค้ด

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

ตัวอย่างเช่น สมมติว่าคุณกำลังแก้ไขข้อบกพร่องของโค้ดต่อไปนี้

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

คุณหยุดชั่วคราวใน A เมื่อกดเข้าสู่ขั้นตอน เครื่องมือสำหรับนักพัฒนาเว็บจะดำเนินการกับโค้ดบรรทัดนี้ จากนั้นหยุดชั่วคราวในวันที่ B

ออกนอกบรรทัดโค้ด

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

ตัวอย่างเช่น สมมติว่าคุณกำลังแก้ไขข้อบกพร่องของโค้ดต่อไปนี้

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

คุณหยุดชั่วคราวใน A เมื่อกดขั้นตอนออก เครื่องมือสำหรับนักพัฒนาเว็บจะเรียกใช้โค้ดที่เหลือใน getName() ซึ่งเพียง B ในตัวอย่างนี้ แล้วหยุดชั่วคราวในวันที่ C

เรียกใช้โค้ดทั้งหมดจนถึงบรรทัดใดบรรทัดหนึ่ง

เวลาแก้ไขข้อบกพร่องของฟังก์ชันที่ยาว อาจมีโค้ดจำนวนมากที่ไม่เกี่ยวข้องกับปัญหาที่คุณแก้ไข การแก้ไขข้อบกพร่อง

แม้คุณอาจอาจจะก้าวผ่านทีละบรรทัด แต่ก็อาจน่าเบื่อหน่าย คุณสามารถตั้งค่าบรรทัดโค้ด เบรกพอยท์ในบรรทัดที่คุณสนใจ แล้วกด Resume Script Execution แต่มีอีกวิธีที่เร็วกว่า

คลิกขวาที่บรรทัดของโค้ดที่คุณสนใจ แล้วเลือกไปต่อที่นี่ DevTools จะเรียกใช้โค้ดทั้งหมดจนถึงเวลานั้น แล้วจึงหยุดชั่วคราวในบรรทัดนั้น

ดำเนินการกับสคริปต์ต่อ

หากต้องการดำเนินการของสคริปต์ต่อหลังจากหยุดชั่วคราว ให้คลิกดำเนินการสคริปต์ต่อ DevTools เรียกใช้สคริปต์จนถึงเบรกพอยท์ถัดไป หากมี

บังคับเรียกใช้สคริปต์

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

เปลี่ยนบริบทชุดข้อความ

เมื่อทำงานร่วมกับ Web Worker หรือ Service Worker ให้คลิกบริบทที่แสดงอยู่ในแผง Threads เพื่อ เปลี่ยนไปใช้บริบทนั้น ไอคอนลูกศรสีน้ำเงินแสดงถึงบริบทที่เลือกไว้ในปัจจุบัน

แผงชุดข้อความบนภาพหน้าจอด้านบนจะเป็นสีน้ำเงิน

ตัวอย่างเช่น สมมติว่าคุณหยุดไว้ชั่วคราวบนเบรกพอยท์ในทั้งสคริปต์หลักและบริการของคุณ สคริปต์ของผู้ปฏิบัติงาน คุณต้องการดูพร็อพเพอร์ตี้ในเครื่องและส่วนกลางสำหรับบริบทของ Service Worker แต่ แผงแหล่งที่มาจะแสดงบริบทของสคริปต์หลัก โดยคลิกรายการ Service Worker ใน คุณสามารถสลับไปที่บริบทนั้นได้

ขั้นตอนผ่านนิพจน์ที่คั่นด้วยคอมมา

การผ่านนิพจน์ที่คั่นด้วยเครื่องหมายจุลภาคจะช่วยให้คุณแก้ไขข้อบกพร่องของโค้ดที่ลดขนาดลงได้ ตัวอย่างเช่น ลองพิจารณาโค้ดต่อไปนี้

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

เมื่อลดขนาดลง จะมีนิพจน์ foo(),foo(),42 ที่คั่นด้วยคอมมาดังนี้

function foo(){}function bar(){return foo(),foo(),42}bar();

โดยโปรแกรมแก้ไขข้อบกพร่องจะดำเนินการผ่านนิพจน์ดังกล่าวในลักษณะเดียวกัน

ดังนั้น การทำงานของการก้าวจะเหมือนกันดังนี้

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

ดูและแก้ไขพร็อพเพอร์ตี้ในพื้นที่ การปิดกิจการ และส่วนกลาง

ขณะที่หยุดชั่วคราวในบรรทัดโค้ด ให้ใช้แผงขอบเขตเพื่อดูและแก้ไขค่าของพร็อพเพอร์ตี้และ ในขอบเขตภายใน ขอบเขตปิด และส่วนกลาง

• ดับเบิลคลิกค่าพร็อพเพอร์ตี้เพื่อเปลี่ยน
• พร็อพเพอร์ตี้ที่แจกแจงไม่ได้เป็นสีเทา

แผงขอบเขตบนภาพหน้าจอด้านบนจะมีเส้นขอบเป็นสีน้ำเงิน

ดูสแต็กการเรียกใช้ปัจจุบัน

ขณะที่หยุดชั่วคราวในโค้ดบรรทัดหนึ่ง ให้ใช้แผงสแต็กการโทรเพื่อดูสแต็กการเรียกใช้ที่ช่วยให้คุณดำเนินการนี้ได้ คะแนน

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

แผงสแต็กการโทรที่ภาพหน้าจอด้านบนมีเส้นขอบเป็นสีน้ำเงิน

รีสตาร์ทฟังก์ชัน (Frame) ในสแต็กการเรียกใช้

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

วิธีรีสตาร์ทเฟรม

1. หยุดการดำเนินการของฟังก์ชันชั่วคราวที่เบรกพอยท์ แผงสแต็กการเรียกใช้จะบันทึกลำดับการเรียกใช้ฟังก์ชัน

2. ในแผงสแต็กการเรียกใช้ ให้คลิกขวาที่ฟังก์ชัน แล้วเลือกรีสตาร์ทเฟรมจากเมนูแบบเลื่อนลง

   

ลองอ่านโค้ดต่อไปนี้เพื่อให้เข้าใจวิธีการทำงานของเฟรมรีสตาร์ท

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

ฟังก์ชัน foo() จะใช้ 0 เป็นอาร์กิวเมนต์ บันทึก และเรียกฟังก์ชัน bar() ผลที่ได้คือฟังก์ชัน bar() จะเพิ่มอาร์กิวเมนต์

ลองรีสตาร์ทเฟรมของทั้ง 2 ฟังก์ชันด้วยวิธีต่อไปนี้

1. คัดลอกโค้ดด้านบนไปยังข้อมูลโค้ดใหม่ แล้วเรียกใช้ การดำเนินการจะหยุดที่เบรกพอยท์บรรทัดของโค้ด debugger
2. โปรดสังเกตว่าโปรแกรมแก้ไขข้อบกพร่องจะแสดงค่าปัจจุบันข้างการประกาศฟังก์ชัน: value = 1
3. รีสตาร์ทเฟรม bar() วันที่
4. ไปที่ข้อความการเพิ่มมูลค่าโดยกด F9 โปรดสังเกตว่าค่าปัจจุบันเพิ่มขึ้น: value = 2
5. (ไม่บังคับ) ในแผงขอบเขต ให้ดับเบิลคลิกค่าเพื่อแก้ไขและกำหนดค่าที่ต้องการ

6. ลองรีสตาร์ทเฟรม bar() และไปที่ข้อความการเพิ่มทีละหลายๆ ครั้ง มูลค่าจะเพิ่มขึ้นอย่างต่อเนื่อง

การรีสตาร์ทเฟรมจะไม่รีเซ็ตอาร์กิวเมนต์ กล่าวคือ การรีสตาร์ทจะไม่คืนค่าสถานะเริ่มต้นขณะเรียกใช้ฟังก์ชัน แต่จะย้ายเคอร์เซอร์การดำเนินการไปยังจุดเริ่มต้นของฟังก์ชันแทน

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

1. ตอนนี้ ให้รีสตาร์ทเฟรม foo() ใน Call Stack โปรดสังเกตว่าค่านี้เป็น 0 อีกครั้ง

ใน JavaScript การเปลี่ยนแปลงอาร์กิวเมนต์จะไม่ปรากฏ (สะท้อน) นอกฟังก์ชัน ฟังก์ชันที่ซ้อนกันจะได้รับค่า ไม่ใช่ตำแหน่งในหน่วยความจำ 1. ดำเนินการสคริปต์ต่อ (F8) เพื่อสิ้นสุดบทแนะนำนี้

แสดงเฟรมที่อยู่ในรายการละเว้น

โดยค่าเริ่มต้น แผงสแต็กการเรียกจะแสดงเฉพาะเฟรมที่เกี่ยวข้องกับโค้ดของคุณ และละเว้นสคริปต์ใดๆ ที่เพิ่มลงใน การตั้งค่า > รายชื่อไม่สนใจ

หากต้องการดูสแต็กการเรียกใช้ทั้งหมดรวมถึงเฟรมของบุคคลที่สาม ให้เปิดใช้แสดงเฟรมที่อยู่ในรายการละเว้นในส่วนสแต็กการเรียกใช้

ลองใช้งานในหน้าสาธิตนี้

1. ในแผงแหล่งที่มา ให้เปิด src > app app.component.ts ไฟล์
2. ตั้งค่าเบรกพอยท์ที่ฟังก์ชัน increment()
3. ในส่วนสแต็กการเรียกใช้ ให้เลือกหรือล้างช่องทำเครื่องหมายแสดงเฟรมที่อยู่ในรายการที่ละเว้น และดูรายการเฟรมที่เกี่ยวข้องหรือทั้งหมดในสแต็กการเรียกใช้

ดูเฟรมที่ไม่พร้อมกัน

หากเฟรมเวิร์กที่คุณใช้รองรับ เครื่องมือสำหรับนักพัฒนาเว็บก็ติดตามการดำเนินการแบบไม่พร้อมกันได้โดยลิงก์โค้ดแบบไม่พร้อมกันทั้ง 2 ส่วนเข้าด้วยกัน

ในกรณีนี้ สแต็กการโทรจะแสดงประวัติการโทรทั้งหมด รวมถึงเฟรมการเรียกใช้แบบไม่พร้อมกัน

คัดลอกสแต็กเทรซ

คลิกขวาที่ใดก็ได้ในแผงสแต็กการโทร แล้วเลือกคัดลอกสแต็กเทรซเพื่อคัดลอกการโทรปัจจุบัน กองซ้อนไปยังคลิปบอร์ด

ด้านล่างเป็นตัวอย่างของเอาต์พุต

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

ไปยังส่วนต่างๆ ในแผนผังไฟล์

ใช้แผงหน้าเพื่อไปยังส่วนต่างๆ ของแผนผังไฟล์

กลุ่มไฟล์ที่เขียนและทำให้ใช้งานได้แล้วในโครงสร้างไฟล์

เมื่อพัฒนาเว็บแอปพลิเคชันโดยใช้เฟรมเวิร์ก (เช่น React หรือ Angular) การนำทางแหล่งที่มาอาจทำได้ยากเนื่องจากไฟล์ที่ลดขนาดลงซึ่งสร้างโดยเครื่องมือสร้าง (เช่น webpack หรือ Vite)

เพื่อช่วยให้คุณไปยังส่วนต่างๆ ของแหล่งที่มาได้ แหล่งที่มา > แผงหน้าสามารถจัดกลุ่มไฟล์เป็น 2 หมวดหมู่ ดังนี้

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

หากต้องการเปิดใช้การจัดกลุ่ม ให้เปิดใช้ > จัดกลุ่มไฟล์ตามตัวเลือก "เขียนแล้ว/ทำให้ใช้งานได้แล้ว" ใต้เมนู 3 จุดที่ด้านบนของผังไฟล์

ซ่อนแหล่งที่มาที่อยู่ในรายการละเว้นจากโครงสร้างไฟล์

เพื่อช่วยให้คุณมุ่งเน้นเฉพาะโค้ดที่คุณสร้าง แหล่งที่มา > แผงหน้าจะทำให้สคริปต์หรือไดเรกทอรีทั้งหมดที่เพิ่มไปยัง การตั้งค่า > เป็นสีเทา รายชื่อไม่สนใจโดยค่าเริ่มต้น

หากต้องการซ่อนสคริปต์ดังกล่าวทั้งหมด ให้เลือกแหล่งที่มา > หน้า > ซ่อนแหล่งที่มาที่อยู่ในรายการละเว้น

ไม่สนใจสคริปต์หรือรูปแบบของสคริปต์

ไม่ต้องสนใจสคริปต์ใดเพื่อข้ามสคริปต์ขณะแก้ไขข้อบกพร่อง เมื่อละเว้นสคริปต์ ถูกบดบังในแผงสแต็กการโทร และคุณจะไม่ต้องก้าวเข้าสู่ฟังก์ชันของสคริปต์เมื่อก้าว ผ่านโค้ดของคุณ

ตัวอย่างเช่น สมมติว่าคุณกำลังอ่านโค้ดนี้

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A เป็นไลบรารีของบุคคลที่สามที่คุณเชื่อถือ หากมั่นใจว่าปัญหาที่คุณกำลังแก้ไขข้อบกพร่องอยู่ ไม่เกี่ยวข้องกับไลบรารีของบุคคลที่สาม คุณไม่จำเป็นต้องสนใจสคริปต์

ละเว้นสคริปต์หรือไดเรกทอรีจากแผนผังไฟล์

หากต้องการละเว้นสคริปต์ใดสคริปต์หนึ่งหรือไดเรกทอรีทั้งหมด ให้ทำดังนี้

1. ในแหล่งที่มา > หน้า ให้คลิกขวาที่ไดเรกทอรีหรือไฟล์สคริปต์
2. เลือกเพิ่มไดเรกทอรี/สคริปต์ลงในรายการละเว้น

หากคุณไม่ได้ซ่อนแหล่งที่มาที่อยู่ในรายการละเว้น ก็เลือกแหล่งที่มาดังกล่าวในโครงสร้างไฟล์ได้ และคลิกนำออกจากรายการที่ละเว้นหรือกำหนดค่าในแบนเนอร์คำเตือน

ไม่เช่นนั้น ให้นำไดเรกทอรีและสคริปต์ที่ซ่อนไว้และละเว้นออกจากรายการได้ใน การตั้งค่า > รายชื่อที่ละเว้น

ละเว้นสคริปต์จากแผงตัวแก้ไข

วิธีละเว้นสคริปต์จากแผงตัวแก้ไข

1. เปิดไฟล์
2. คลิกขวาที่ใดก็ได้
3. เลือกเพิ่มสคริปต์ลงในรายการละเว้น

คุณสามารถนำสคริปต์ออกจากรายการที่ละเว้นได้จาก การตั้งค่า > รายชื่อที่ละเว้น

ละเว้นสคริปต์จากแผงสแต็กการเรียกใช้

วิธีละเว้นสคริปต์จากแผงสแต็กการเรียกใช้

1. คลิกขวาที่ฟังก์ชันจากสคริปต์
2. เลือกเพิ่มสคริปต์ลงในรายการละเว้น

คุณสามารถนำสคริปต์ออกจากรายการที่ละเว้นได้จาก การตั้งค่า > รายชื่อที่ละเว้น

ละเว้นสคริปต์จากการตั้งค่า

โปรดดู การตั้งค่า > รายชื่อที่ละเว้น

เรียกใช้ข้อมูลโค้ดการแก้ไขข้อบกพร่องจากหน้าใดก็ได้

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

ดูข้อมูลเพิ่มเติมที่เรียกใช้ข้อมูลโค้ดจากหน้าเว็บใดๆ

ดูค่าของนิพจน์ JavaScript ที่กำหนดเอง

ใช้แผงเฝ้าดูเพื่อดูค่าของนิพจน์ที่กำหนดเอง คุณดู JavaScript ที่ถูกต้องได้ทุกรายการ เท่านั้น

• คลิกเพิ่มนิพจน์ เพื่อสร้างนิพจน์การดูใหม่
• คลิกรีเฟรช เพื่อรีเฟรช ค่าของนิพจน์ที่มีอยู่ทั้งหมด ค่าจะรีเฟรชโดยอัตโนมัติขณะดูโค้ด
• วางเมาส์เหนือนิพจน์แล้วคลิกลบนิพจน์ เพื่อลบข้อมูลนั้น

ตรวจสอบและแก้ไขสคริปต์

เมื่อเปิดสคริปต์ในแผงหน้า เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงเนื้อหาของสคริปต์ในแผงตัวแก้ไข ในแผงตัวแก้ไข คุณสามารถเรียกดูและแก้ไขโค้ดได้

นอกจากนี้ คุณยังลบล้างเนื้อหาในเครื่องหรือสร้างพื้นที่ทำงาน และบันทึกการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บไปยังแหล่งที่มาในเครื่องได้โดยตรง

ทำให้อ่านไฟล์ที่ลดขนาดลงได้

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

หากต้องการดูไฟล์ที่มีการลดขนาดในขณะที่โหลด ให้คลิก { } ที่มุมล่างซ้ายของเครื่องมือแก้ไข

พับโค้ดบล็อก

หากต้องการพับโค้ดบล็อก ให้วางเมาส์เหนือหมายเลขบรรทัดในคอลัมน์ด้านซ้าย แล้วคลิก ยุบ

หากต้องการกางโค้ดบล็อก ให้คลิก {...} ข้างส่วนนั้น

หากต้องการกำหนดค่าลักษณะการทำงานนี้ โปรดดูที่ การตั้งค่า > ค่ากำหนด > แหล่งที่มา

แก้ไขสคริปต์

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

วิธีแก้ไขสคริปต์

1. เปิดไฟล์ในแผงตัวแก้ไขของแผงแหล่งที่มา
2. ทำการเปลี่ยนแปลงในแผงตัวแก้ไข

3. กด Command+S (Mac) หรือ Ctrl+S (Windows, Linux) เพื่อ บันทึก เครื่องมือสำหรับนักพัฒนาเว็บจะแพตช์ไฟล์ JS ทั้งไฟล์ในเครื่องมือ JavaScript ของ Chrome

   

   แผงตัวแก้ไขบนภาพหน้าจอด้านบนมีเส้นขอบเป็นสีน้ำเงิน

แก้ไขฟังก์ชันที่หยุดชั่วคราวที่เผยแพร่อยู่

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

• คุณจะแก้ไขได้เฉพาะฟังก์ชันบนสุดในสแต็กการเรียกใช้
• ต้องไม่มีการเรียกฟังก์ชันเดียวกันซ้ำในชั้นล่างสุด

วิธีแก้ไขฟังก์ชันแบบเรียลไทม์

1. หยุดการดำเนินการด้วยเบรกพอยท์ชั่วคราว
2. แก้ไขฟังก์ชันที่หยุดชั่วคราว
3. กด Command / Control + S เพื่อใช้การเปลี่ยนแปลง โปรแกรมแก้ไขข้อบกพร่องจะรีสตาร์ทฟังก์ชันโดยอัตโนมัติ
4. ดำเนินการต่อไป

ดูวิดีโอด้านล่างเพื่อดูขั้นตอนการทำงานนี้

ในตัวอย่างนี้ ตัวแปร addend1 และ addend2 มีประเภท string ที่ไม่ถูกต้องในตอนแรก ดังนั้นแทนที่จะเพิ่มตัวเลข สตริงจะเชื่อมกัน หากต้องการแก้ไขปัญหานี้ ระบบจะเพิ่มฟังก์ชัน parseInt() ระหว่างการแก้ไขแบบเรียลไทม์

ค้นหาและแทนที่ข้อความในสคริปต์

หากต้องการค้นหาข้อความในสคริปต์ ให้ทำดังนี้

1. เปิดไฟล์ในแผงตัวแก้ไขของแผงแหล่งที่มา
2. หากต้องการเปิดแถบค้นหาในตัว ให้กด Command+F (Mac) หรือ Ctrl+F (Windows, Linux)
3. ป้อนคำค้นหาในแถบ หรือคุณสามารถดำเนินการดังนี้
   • คลิก ตรงตามตัวพิมพ์ใหญ่-เล็ก เพื่อให้คำค้นหาของคุณคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
   • คลิก ใช้นิพจน์ทั่วไปเพื่อค้นหาโดยใช้นิพจน์ทั่วไป
4. กด Enter หากต้องการข้ามไปยังผลการค้นหาก่อนหน้าหรือถัดไป ให้กดปุ่มขึ้นหรือลง

วิธีแทนที่ข้อความที่พบ

1. ในแถบค้นหา ให้คลิกปุ่มแทนที่
2. พิมพ์ข้อความที่ต้องการแทนที่ แล้วคลิกแทนที่หรือแทนที่ทั้งหมด

ปิดใช้ JavaScript

โปรดดูปิดใช้ JavaScript ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome