สำรวจเวิร์กโฟลว์การแก้ไขข้อบกพร่องใหม่ๆ ด้วยข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับฟีเจอร์การแก้ไขข้อบกพร่องของ 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 จะทําตามขั้นตอนผ่านนิพจน์ดังกล่าวเท่านั้น
ดังนั้น พฤติกรรมการใช้ขั้นตอนจะเหมือนกันดังนี้
- ระหว่างโค้ดที่ลดขนาดและเขียนขึ้น
- เมื่อใช้แผนที่ซอร์สเพื่อแก้ไขข้อบกพร่องของโค้ดที่ลดขนาดแล้วในแง่ของโค้ดต้นฉบับ หรือพูดอีกอย่างก็คือ เมื่อคุณเห็นเครื่องหมายเซมิโคลอน คุณสามารถคาดหวังได้ว่าจะเห็นเครื่องหมายเซมิโคลอนเสมอ แม้ว่าแหล่งที่มาจริงที่คุณกำลังแก้ไขข้อบกพร่องจะถูกลดขนาดลงก็ตาม
ดูและแก้ไขพร็อพเพอร์ตี้ในพื้นที่ การปิด และพร็อพเพอร์ตี้ส่วนกลาง
ขณะที่หยุดชั่วคราวในบรรทัดของโค้ด ให้ใช้แผงขอบเขตเพื่อดูและแก้ไขค่าของพร็อพเพอร์ตี้และตัวแปรในขอบเขตภายใน ขอบเขตปิด และขอบเขตทั้งหมด
- ดับเบิลคลิกค่าคุณสมบัติเพื่อเปลี่ยน
- พร็อพเพอร์ตี้ที่ไม่สามารถแจกแจงได้จะเป็นสีเทา
แผงขอบเขตในภาพหน้าจอด้านบนจะมีกรอบเป็นสีน้ำเงิน
ดูสแต็กการเรียกใช้ปัจจุบัน
ขณะที่หยุดชั่วคราวบนบรรทัดของโค้ด ให้ใช้แผงสแต็กการเรียกใช้เพื่อดูสแต็กการเรียกใช้ที่ช่วยให้คุณมาถึงจุดนี้
คลิกรายการเพื่อข้ามไปยังบรรทัดโค้ดที่มีการเรียกใช้ฟังก์ชันนั้น ไอคอนลูกศรสีน้ำเงินแสดงถึงฟังก์ชันที่เครื่องมือสำหรับนักพัฒนาเว็บกำลังไฮไลต์อยู่
แผงกลุ่มการโทรในภาพหน้าจอด้านบนจะมีกรอบเป็นสีน้ำเงิน
รีสตาร์ทฟังก์ชัน (เฟรม) ในสแต็กการเรียกใช้
หากต้องการสังเกตลักษณะการทำงานของฟังก์ชันและเรียกใช้อีกครั้งโดยไม่ต้องรีสตาร์ทขั้นตอนการแก้ไขข้อบกพร่องทั้งหมด ให้เริ่มต้นการดำเนินการของฟังก์ชันเดียวอีกครั้งเมื่อฟังก์ชันนี้หยุดชั่วคราว กล่าวคือ คุณสามารถรีสตาร์ทเฟรมของฟังก์ชันในสแต็กการเรียกใช้ได้
วิธีรีสตาร์ทเฟรม
- หยุดการดำเนินการฟังก์ชันที่เบรกพอยท์ชั่วคราว แผงสแต็กการเรียกใช้จะบันทึกลำดับการเรียกฟังก์ชัน
ในแผงสแต็กการเรียกใช้ ให้คลิกขวาที่ฟังก์ชันแล้วเลือกรีสตาร์ทเฟรมจากเมนูแบบเลื่อนลง
ลองพิจารณาโค้ดต่อไปนี้เพื่อให้เข้าใจวิธีการทํางานของรีสตาร์ทเฟรม
function foo(value) {
console.log(value);
bar(value);
}
function bar(value) {
value++;
console.log(value);
debugger;
}
foo(0);
ฟังก์ชัน foo()
จะใช้ 0
เป็นอาร์กิวเมนต์ บันทึก และเรียกใช้ฟังก์ชัน bar()
ฟังก์ชัน bar()
จะเพิ่มอาร์กิวเมนต์
ลองรีสตาร์ทเฟรมของทั้ง 2 ฟังก์ชันดังนี้
- คัดลอกโค้ดด้านบนไปยังข้อมูลโค้ดใหม่ แล้วเรียกใช้ การดำเนินการจะหยุดที่เบรกพอยท์บรรทัด
debugger
- โปรดทราบว่าโปรแกรมแก้ไขข้อบกพร่องจะแสดงค่าปัจจุบันถัดจากการประกาศฟังก์ชัน:
value = 1
- รีสตาร์ทเฟรม
bar()
- เลื่อนดูข้อความการเพิ่มมูลค่าโดยกด
F9
โปรดสังเกตว่าค่าปัจจุบันจะเพิ่มขึ้น:value = 2
- หรือในแผงขอบเขต ให้ดับเบิลคลิกค่าเพื่อแก้ไขและกำหนดค่าที่ต้องการ
ลองรีสตาร์ทเฟรม
bar()
แล้วทำตามคำสั่งเพิ่มหลายๆ ครั้ง ซึ่งมูลค่าก็เพิ่มขึ้นเรื่อยๆ
การรีสตาร์ทเฟรมจะไม่รีเซ็ตอาร์กิวเมนต์ กล่าวคือ การรีสตาร์ทจะไม่คืนค่าสถานะเริ่มต้นขณะเรียกใช้ฟังก์ชัน แต่เป็นการย้ายตัวชี้การดำเนินการไปยังจุดเริ่มต้นของฟังก์ชันแทน
ดังนั้น ค่าอาร์กิวเมนต์ปัจจุบันจะยังคงอยู่ในหน่วยความจำในการรีสตาร์ทฟังก์ชันเดียวกัน
- ตอนนี้ ให้รีสตาร์ทเฟรม
foo()
ในสแต็กการเรียกใช้ โปรดสังเกตว่าค่าจะเป็น0
อีกครั้ง
ใน JavaScript การเปลี่ยนแปลงอาร์กิวเมนต์จะไม่ปรากฏ (แสดง) นอกฟังก์ชัน ฟังก์ชันที่ซ้อนกันจะได้รับค่า ไม่ใช่ตำแหน่งของฟังก์ชันในหน่วยความจำ
1. ดำเนินการเรียกใช้สคริปต์ต่อ (F8
) เพื่อให้บทแนะนำนี้เสร็จสมบูรณ์
แสดงเฟรมที่อยู่ในรายการละเว้น
โดยค่าเริ่มต้น แผงกลุ่มการเรียกจะแสดงเฉพาะเฟรมที่เกี่ยวข้องกับโค้ดของคุณ และละเว้นสคริปต์ที่เพิ่มลงใน การตั้งค่า > รายการละเว้น
หากต้องการดูการเรียกใช้สแต็กทั้งหมดรวมถึงเฟรมของบุคคลที่สาม ให้เปิดใช้แสดงเฟรมที่อยู่ในรายการละเว้นในส่วนการเรียกใช้สแต็ก
ทดลองใช้ได้ที่หน้าสาธิตนี้
- ในแผงแหล่งที่มา ให้เปิดไฟล์
src
>app
>app.component.ts
- ตั้งค่าเบรกพอยท์ที่ฟังก์ชัน
increment()
- ในส่วนสแต็กการเรียกใช้ ให้เลือกหรือลบเครื่องหมายในช่องแสดงเฟรมที่อยู่ในรายการละเว้น และสังเกตรายการเฟรมที่เกี่ยวข้องหรือทั้งหมดของสแต็กการเรียกใช้
ดูเฟรมที่ไม่พร้อมกัน
หากเฟรมเวิร์กที่คุณใช้รองรับ เครื่องมือสำหรับนักพัฒนาเว็บจะติดตามการทำงานแบบอะซิงโครนัสได้โดยลิงก์โค้ดทั้ง 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 จุดที่ด้านบนของแผนผังไฟล์
ซ่อนแหล่งที่มาที่อยู่ในรายการละเว้นจากแผนผังไฟล์
เพื่อช่วยให้คุณมุ่งเน้นเฉพาะโค้ดที่คุณสร้าง แผงแหล่งที่มา > หน้าเว็บ จะทำให้สคริปต์หรือไดเรกทอรีทั้งหมดที่เพิ่มลงใน การตั้งค่า > รายการที่ไม่สนใจ เป็นสีเทาโดยค่าเริ่มต้น
หากต้องการซ่อนสคริปต์ดังกล่าวทั้งหมด ให้เลือกแหล่งที่มา > หน้า > > ซ่อนแหล่งที่มาที่อยู่ในรายการละเว้น
ไม่สนใจสคริปต์หรือรูปแบบของสคริปต์
ละเว้นสคริปต์เพื่อข้ามขณะแก้ไขข้อบกพร่อง เมื่อละเว้น สคริปต์จะถูกบดบังในแผงสแต็กการเรียกใช้ และคุณจะไม่เข้าไปในฟังก์ชันของสคริปต์เมื่อดูโค้ด
ตัวอย่างเช่น สมมติว่าคุณดำเนินการผ่านโค้ดนี้
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
A
เป็นไลบรารีของบุคคลที่สามที่คุณเชื่อถือ หากมั่นใจว่าปัญหาที่คุณกำลังแก้ไขข้อบกพร่องไม่เกี่ยวข้องกับไลบรารีของบุคคลที่สาม คุณก็ไม่ต้องสนใจสคริปต์นี้
ละเว้นสคริปต์หรือไดเรกทอรีจากโครงสร้างไฟล์
หากต้องการละเว้นสคริปต์แต่ละรายการหรือไดเรกทอรีทั้งหมด ให้ทำดังนี้
- ในแหล่งที่มา > หน้า ให้คลิกขวาที่ไดเรกทอรีหรือไฟล์สคริปต์
- เลือกเพิ่มไดเรกทอรี/สคริปต์ลงในรายการละเว้น
หากคุณไม่ได้ซ่อนแหล่งที่มาที่อยู่ในรายการที่ละเว้น คุณสามารถเลือกแหล่งที่มาดังกล่าวในโครงสร้างไฟล์ และคลิกนำออกจากรายการที่ละเว้นหรือกำหนดค่าในแบนเนอร์คำเตือนของ
หรือคุณอาจนําไดเรกทอรีและสคริปต์ที่ซ่อนไว้และละเว้นออกจากรายการได้ใน การตั้งค่า > รายการที่ละเว้น
ละเว้นสคริปต์จากแผงเครื่องมือแก้ไข
หากต้องการละเว้นสคริปต์จากแผงตัวแก้ไข ให้ทำดังนี้
- เปิดไฟล์
- คลิกขวาที่ใดก็ได้
- เลือกเพิ่มสคริปต์ลงในรายการละเว้น
คุณนําสคริปต์ออกจากรายการที่ละเว้นได้จาก การตั้งค่า > รายการละเว้น
ละเว้นสคริปต์จากแผงการเรียกใช้สแต็ก
หากต้องการละเว้นสคริปต์จากแผงสแต็กการเรียกใช้ ให้ทำดังนี้
- คลิกขวาที่ฟังก์ชันจากสคริปต์
- เลือกเพิ่มสคริปต์ลงในรายการละเว้น
คุณนําสคริปต์ออกจากรายการที่ละเว้นได้จาก การตั้งค่า > รายการละเว้น
ละเว้นสคริปต์จากการตั้งค่า
ดู การตั้งค่า > รายชื่อไม่สนใจ
เรียกใช้ข้อมูลโค้ดของโค้ดการแก้ไขข้อบกพร่องจากหน้าใดก็ได้
หากคุณพบว่าตัวเองเรียกใช้โค้ดการแก้ไขข้อบกพร่องเดียวกันในคอนโซลซ้ำแล้วซ้ำอีก ให้พิจารณาใช้ข้อมูลโค้ด ตัวอย่างข้อมูลคือสคริปต์ที่เรียกใช้งานได้ซึ่งคุณเขียน จัดเก็บ และเรียกใช้ภายในเครื่องมือสำหรับนักพัฒนาเว็บ
ดูเรียกใช้ข้อมูลโค้ดจากหน้าใดก็ได้เพื่อเรียนรู้เพิ่มเติม
ดูค่าของนิพจน์ JavaScript ที่กำหนดเอง
ใช้แผง "ดู" เพื่อดูค่าของนิพจน์ที่กำหนดเอง คุณสามารถดูนิพจน์ JavaScript ที่ถูกต้องได้
- คลิกเพิ่มนิพจน์ เพื่อสร้างนิพจน์นาฬิกาใหม่
- คลิกรีเฟรช เพื่อรีเฟรชค่าของนิพจน์ที่มีอยู่ทั้งหมด ค่าจะรีเฟรชโดยอัตโนมัติระหว่างขั้นตอนของโค้ด
- วางเมาส์เหนือนิพจน์แล้วคลิกลบนิพจน์ เพื่อลบนิพจน์ดังกล่าว
ตรวจสอบและแก้ไขสคริปต์
เมื่อเปิดสคริปต์ในแผงหน้า เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงเนื้อหาในแผงตัวแก้ไข ในแผงตัวแก้ไข คุณจะเรียกดูและแก้ไขโค้ดได้
นอกจากนี้ คุณยังสามารถลบล้างเนื้อหาในเครื่องหรือสร้างพื้นที่ทำงาน และบันทึกการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บไปยังแหล่งที่มาในเครื่องได้โดยตรง
ทำให้ไฟล์ที่ลดขนาดอ่านได้
โดยค่าเริ่มต้น แผงแหล่งที่มาจะจัดรูปแบบไฟล์ที่ลดขนาดพอดี เมื่อพิมพ์แบบปกติ เอดิเตอร์อาจแสดงบรรทัดโค้ดยาว 1 บรรทัดในหลายบรรทัด และใช้ -
เพื่อระบุว่าเป็นบรรทัดโค้ดที่ต่อเนื่อง
หากต้องการดูไฟล์ที่ลดขนาดขณะที่โหลด ให้คลิก { }
ที่มุมล่างซ้ายของโปรแกรมตัดต่อ
ซ่อนโค้ดบล็อก
หากต้องการยุบโค้ดบล็อก ให้วางเมาส์เหนือหมายเลขบรรทัดในคอลัมน์ด้านซ้าย แล้วคลิก ยุบ
หากต้องการคลายโค้ดบล็อก ให้คลิก {...}
ด้านข้าง
หากต้องการกำหนดค่าลักษณะการทำงานนี้ โปรดดูที่ การตั้งค่า > ค่ากำหนด > แหล่งที่มา
แก้ไขสคริปต์
ขณะแก้ไขข้อบกพร่อง คุณมักจะต้องการทดสอบการเปลี่ยนแปลงบางอย่างในโค้ด JavaScript คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงในเบราว์เซอร์ภายนอกแล้วโหลดหน้านี้ซ้ำ คุณแก้ไขสคริปต์ได้ ในเครื่องมือสำหรับนักพัฒนาเว็บ
หากต้องการแก้ไขสคริปต์ ให้ทำดังนี้
- เปิดไฟล์ในแผงตัวแก้ไขของแผงแหล่งที่มา
- ทำการเปลี่ยนแปลงในแผงตัวแก้ไข
กด Command+S (Mac) หรือ Ctrl+S (Windows, Linux) เพื่อบันทึก เครื่องมือสำหรับนักพัฒนาเว็บจะแพตช์ไฟล์ JS ทั้งไฟล์ในเครื่องมือ JavaScript ของ Chrome
แผงตัวแก้ไขในภาพหน้าจอด้านบนจะมีกรอบเป็นสีน้ำเงิน
แก้ไขฟังก์ชันที่หยุดชั่วคราวแบบเรียลไทม์
ขณะที่การดำเนินการหยุดชั่วคราว คุณจะแก้ไขฟังก์ชันปัจจุบันและนำการเปลี่ยนแปลงไปใช้ได้จริงโดยมีข้อจำกัดต่อไปนี้
- คุณจะแก้ไขได้เฉพาะฟังก์ชันระดับบนสุดในกลุ่มการเรียกใช้เท่านั้น
- ต้องไม่มีการเรียกซ้ำไปยังฟังก์ชันเดียวกันในระดับล่างสุด
วิธีแก้ไขฟังก์ชันแบบเรียลไทม์
- หยุดการดำเนินการที่มีเบรกพอยท์ชั่วคราว
- แก้ไขฟังก์ชันที่หยุดชั่วคราว
- กด Command / Control + S เพื่อใช้การเปลี่ยนแปลง โปรแกรมแก้ไขข้อบกพร่องจะรีสตาร์ทฟังก์ชันโดยอัตโนมัติ
- ดำเนินการต่อไป
ดูวิดีโอด้านล่างเพื่อดูขั้นตอนการทำงานนี้
ในตัวอย่างนี้ ในตอนแรกตัวแปร addend1
และ addend2
มีประเภท string
ที่ไม่ถูกต้อง ดังนั้น แทนที่จะบวกตัวเลข สตริงจะต่อกัน หากต้องการแก้ไข ให้เพิ่มฟังก์ชัน parseInt()
ในระหว่างการตัดต่อแบบเรียลไทม์
ค้นหาและแทนที่ข้อความในสคริปต์
หากต้องการค้นหาข้อความในสคริปต์ ให้ทำดังนี้
- เปิดไฟล์ในแผงตัวแก้ไขของแผงแหล่งที่มา
- หากต้องการเปิดแถบค้นหาในตัว ให้กด Command+F (Mac) หรือ Ctrl+F (Windows, Linux)
- ป้อนคำค้นหาในแถบ
หรือคุณจะทำสิ่งต่อไปนี้ได้
- คลิก ตรงตามตัวพิมพ์ใหญ่-เล็ก เพื่อให้คำค้นหาคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
- คลิก ใช้นิพจน์ทั่วไปเพื่อค้นหาโดยใช้นิพจน์ RegEx
- กด Enter หากต้องการข้ามไปยังผลการค้นหาก่อนหน้าหรือถัดไป ให้กดปุ่มขึ้นหรือลง
วิธีแทนที่ข้อความที่พบ
- ในแถบค้นหา ให้คลิกปุ่ม แทนที่
- พิมพ์ข้อความที่ต้องการแทนที่ แล้วคลิกแทนที่หรือแทนที่ทั้งหมด
ปิดใช้ JavaScript
ดูปิดใช้ JavaScript ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome