ข้อมูลอ้างอิงการดีบัก 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 เมื่อกดขั้นตอนออก DevTools จะเรียกใช้โค้ดที่เหลือใน getName() ซึ่งในตัวอย่างนี้มีเพียง B แล้วหยุดชั่วคราวใน C

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่างเช่น สมมติว่าคุณหยุดชั่วคราวที่จุดหยุดพักทั้งในสคริปต์หลักและสคริปต์ Service Worker คุณต้องการดูพร็อพเพอร์ตี้ในเครื่องและส่วนกลางสำหรับบริบทของ 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();

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

ดังนั้นลักษณะการเลื่อนจึงเหมือนกัน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

foo(0);

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

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

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

6. ลองรีสตาร์ทเฟรม bar() แล้วดำเนินการตามคำสั่งการเพิ่มอีก 2-3 ครั้ง ค่าจะเพิ่มขึ้นอย่างต่อเนื่อง

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

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

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. เลือกเพิ่มสคริปต์ลงในรายการละเว้น

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ยุบโค้ดบล็อก

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

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

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

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

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

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

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

3. กด Command+S (Mac) หรือ Ctrl+S (Windows, Linux) เพื่อบันทึก DevTools จะแพตช์ไฟล์ 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