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

โซเฟีย เอมิเลียโนวา
Sofia Emelianova

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

โปรดดูเริ่มต้นใช้งานการแก้ไขข้อบกพร่อง JavaScript ใน Chrome DevTools เพื่อเรียนรู้พื้นฐานการแก้ไขข้อบกพร่อง

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

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

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

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

การประเมินแบบอินไลน์จะแสดงข้างการประกาศ

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

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

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

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

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

โค้ดแบบก้าวผ่าน

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

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

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

เลือก "ข้าม"

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

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 เมื่อกด Stepover เครื่องมือสำหรับนักพัฒนาเว็บจะเรียกใช้โค้ดทั้งหมดในฟังก์ชันที่คุณดำเนินการอยู่ ซึ่งก็คือ 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 เมื่อกด Step into เครื่องมือสำหรับนักพัฒนาเว็บจะเรียกใช้โค้ดบรรทัดนี้ จากนั้นหยุดชั่วคราวในวันที่ 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 เมื่อกด Step out เครื่องมือสำหรับนักพัฒนาเว็บจะเรียกใช้โค้ดที่เหลือใน getName() ซึ่งในตัวอย่างนี้เป็นเพียง B แล้วหยุดชั่วคราวในวันที่ C

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

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

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

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

เลือก "ดำเนินการต่อมาที่นี่"

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

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

การเลือก "เรียกใช้สคริปต์ต่อ"

บังคับการทำงานของสคริปต์

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

เลือก "บังคับให้มีการเรียกใช้สคริปต์"

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

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

แผงชุดข้อความ

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

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

ใช้นิพจน์ที่คั่นด้วยเครื่องหมายจุลภาค

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

function foo() {}

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

bar();

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

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

Debugger จะทําตามขั้นตอนผ่านนิพจน์ดังกล่าวเท่านั้น

การใช้นิพจน์ที่คั่นด้วยคอมมา

ดังนั้น พฤติกรรมการใช้ขั้นตอนจะเหมือนกันดังนี้

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

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

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

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

แผงขอบเขต

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

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

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

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

แผงสแต็กการเรียกใช้

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

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

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

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

  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() รีสตาร์ทเฟรม bar()
  4. เลื่อนดูข้อความการเพิ่มมูลค่าโดยกด F9 กำลังเพิ่มค่าปัจจุบัน โปรดสังเกตว่าค่าปัจจุบันจะเพิ่มขึ้น: value = 2
  5. หรือในแผงขอบเขต ให้ดับเบิลคลิกค่าเพื่อแก้ไขและกำหนดค่าที่ต้องการ การแก้ไขค่าในแผงขอบเขต
  6. ลองรีสตาร์ทเฟรม bar() แล้วทำตามคำสั่งเพิ่มหลายๆ ครั้ง ซึ่งมูลค่าก็เพิ่มขึ้นเรื่อยๆ รีสตาร์ทเฟรม bar() อีกครั้ง

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

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

  1. ตอนนี้ ให้รีสตาร์ทเฟรม foo() ในสแต็กการเรียกใช้ กำลังรีสตาร์ทเฟรม foo() โปรดสังเกตว่าค่าจะเป็น 0 อีกครั้ง ALT_TEXT_HERE

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

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

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

สแต็กการเรียกใช้

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

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

ทดลองใช้ได้ที่หน้าสาธิตนี้

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

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

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

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

เฟรมการเรียกใช้ที่ไม่พร้อมกัน

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

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

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

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

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

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

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

กลุ่มที่สร้างและนำไฟล์ไปใช้งานในโครงสร้างไฟล์

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

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

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

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

จัดกลุ่มไฟล์ตาม "เขียนแล้ว"/"ทำให้ใช้งานได้แล้ว"

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

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

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

ก่อนและหลังการซ่อนแหล่งที่มาที่อยู่ในรายการละเว้น

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

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

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

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

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

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

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

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

ละเว้นตัวเลือกสำหรับไดเรกทอรีหรือไฟล์สคริปต์

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

ไฟล์ที่ละเว้นที่เลือกไว้จะแสดงปุ่ม "นำออก" และ "กำหนดค่า"

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

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

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

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

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

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

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

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

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

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

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

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

ดูการตั้งค่า การตั้งค่า > รายชื่อไม่สนใจ

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

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

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

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

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

แผงดู

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

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

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

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

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

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

บรรทัดโค้ดยาวที่พิมพ์แล้วปรากฏเป็นบรรทัดหลายบรรทัด โดยมีเครื่องหมาย '-' เพื่อแสดงถึงความต่อเนื่องของบรรทัด

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

ซ่อนโค้ดบล็อก

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

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

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

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

ขณะแก้ไขข้อบกพร่อง คุณมักจะต้องการทดสอบการเปลี่ยนแปลงบางอย่างในโค้ด 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. ป้อนคำค้นหาในแถบ ค้นหา หรือคุณจะทำสิ่งต่อไปนี้ได้
    • คลิก ตรงตามตัวพิมพ์ใหญ่-เล็ก ตรงตามตัวพิมพ์ใหญ่-เล็ก เพื่อให้คำค้นหาคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
    • คลิก ปุ่ม RegEx ใช้นิพจน์ทั่วไปเพื่อค้นหาโดยใช้นิพจน์ RegEx
  4. กด Enter หากต้องการข้ามไปยังผลการค้นหาก่อนหน้าหรือถัดไป ให้กดปุ่มขึ้นหรือลง

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

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

ปิดใช้ JavaScript

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