ดูเวิร์กโฟลว์การแก้ไขข้อบกพร่องแบบใหม่ด้วยข้อมูลอ้างอิงแบบครอบคลุมเกี่ยวกับฟีเจอร์การแก้ไขข้อบกพร่องของเครื่องมือสำหรับนักพัฒนาเว็บใน 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 จะเรียกใช้โค้ดทั้งหมดจนถึงเวลานั้น แล้วจึงหยุดชั่วคราวในบรรทัดนั้น
ดำเนินการสคริปต์ต่อ
หากต้องการดําเนินการสคริปต์ต่อหลังจากหยุดชั่วคราว ให้คลิกดําเนินการสคริปต์ต่อ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะดำเนินการสคริปต์จนกว่าจะถึงจุดหยุดพักถัดไป (หากมี)
บังคับเรียกใช้สคริปต์
หากต้องการละเว้นจุดหยุดทั้งหมดและบังคับให้สคริปต์ดำเนินการต่อ ให้คลิกดำเนินการสคริปต์ต่อ ค้างไว้ แล้วเลือกบังคับให้สคริปต์ดำเนินการ
เปลี่ยนบริบทชุดข้อความ
เมื่อทำงานร่วมกับ 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();
โดยDebuggerจะดำเนินการผ่านนิพจน์ดังกล่าวในลักษณะเดียวกัน
ดังนั้นลักษณะการเลื่อนจึงเหมือนกัน
- ระหว่างโค้ดที่ลดขนาดลงและโค้ดที่เขียนขึ้น
- เมื่อใช้แผนที่แหล่งที่มาเพื่อแก้ไขข้อบกพร่องของโค้ดที่มีการลดขนาดในแง่ของโค้ดต้นฉบับ กล่าวคือ เมื่อเห็นเครื่องหมายเซมิโคลอน คุณสามารถคาดหวังที่จะดูโค้ดทีละบรรทัดได้เสมอ แม้ว่าแหล่งที่มาจริงที่คุณกำลังแก้ไขข้อบกพร่องจะได้รับการย่อขนาดแล้วก็ตาม
ดูและแก้ไขพร็อพเพอร์ตี้ในร้าน การปิด และพร็อพเพอร์ตี้ส่วนกลาง
ขณะที่หยุดชั่วคราวในบรรทัดโค้ด ให้ใช้แผงขอบเขตเพื่อดูและแก้ไขค่าของพร็อพเพอร์ตี้และ ในขอบเขตภายใน ขอบเขตปิด และส่วนกลาง
- ดับเบิลคลิกค่าพร็อพเพอร์ตี้เพื่อเปลี่ยน
- พร็อพเพอร์ตี้ที่ไม่ใช่แบบแจกแจงจะเปลี่ยนเป็นสีเทา
แผงขอบเขตในภาพหน้าจอด้านบนมีเส้นขอบสีน้ำเงิน
ดูสแต็กการเรียกใช้ปัจจุบัน
ขณะหยุดอยู่ที่บรรทัดโค้ด ให้ใช้แผงกองซ้อนการเรียกเพื่อดูกองซ้อนการเรียกที่ทำให้คุณมาถึงจุดนี้
คลิกรายการเพื่อข้ามไปยังบรรทัดโค้ดที่มีการเรียกใช้ฟังก์ชันนั้น ไอคอนลูกศรสีน้ำเงินแสดงถึงฟังก์ชันที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ไฮไลต์อยู่
แผงสแต็กการโทรที่ภาพหน้าจอด้านบนมีเส้นขอบเป็นสีน้ำเงิน
รีสตาร์ทฟังก์ชัน (Frame) ในสแต็กการเรียกใช้
หากต้องการสังเกตลักษณะการทำงานของฟังก์ชันและเรียกใช้อีกครั้งโดยไม่ต้องรีสตาร์ทขั้นตอนการแก้ไขข้อบกพร่องทั้งหมด คุณก็รีสตาร์ทการดำเนินการของฟังก์ชันเดียวได้เมื่อฟังก์ชันนี้หยุดชั่วคราว กล่าวคือ คุณสามารถเริ่มเฟรมของฟังก์ชันในกองคิวการเรียกใหม่ได้
วิธีรีสตาร์ทเฟรม
- หยุดการดำเนินการของฟังก์ชันชั่วคราวที่เบรกพอยท์ แผงสแต็กการเรียกจะบันทึกลําดับการเรียกใช้ฟังก์ชัน
ในแผงสแต็กการเรียกใช้ ให้คลิกขวาที่ฟังก์ชัน แล้วเลือกรีสตาร์ทเฟรมจากเมนูแบบเลื่อนลง
ลองอ่านโค้ดต่อไปนี้เพื่อให้เข้าใจวิธีการทำงานของเฟรมรีสตาร์ท
function foo(value) {
console.log(value);
bar(value);
}
function bar(value) {
value++;
console.log(value);
debugger;
}
foo(0);
ฟังก์ชัน foo()
จะใช้ 0
เป็นอาร์กิวเมนต์ บันทึก และเรียกฟังก์ชัน bar()
ผลที่ได้คือฟังก์ชัน bar()
จะเพิ่มอาร์กิวเมนต์
ลองรีสตาร์ทเฟรมของฟังก์ชันทั้งสองด้วยวิธีต่อไปนี้
- คัดลอกโค้ดด้านบนไปยังข้อมูลโค้ดใหม่ แล้วเรียกใช้ การดำเนินการจะหยุดที่
debugger
เบรกพอยต์บรรทัดโค้ด - โปรดสังเกตว่าโปรแกรมแก้ไขข้อบกพร่องจะแสดงค่าปัจจุบันข้างการประกาศฟังก์ชัน:
value = 1
- รีสตาร์ทเฟรม
bar()
- ไปที่ข้อความการเพิ่มมูลค่าโดยกด
F9
โปรดสังเกตว่าค่าปัจจุบันเพิ่มขึ้น:value = 2
- (ไม่บังคับ) ในแผงขอบเขต ให้ดับเบิลคลิกค่าเพื่อแก้ไขและกำหนดค่าที่ต้องการ
ลองรีสตาร์ทเฟรม
bar()
แล้วดำเนินการตามคำสั่งการเพิ่มอีก 2-3 ครั้ง มูลค่าจะยังคงเพิ่มขึ้นอย่างต่อเนื่อง
การรีสตาร์ทเฟรมจะไม่รีเซ็ตอาร์กิวเมนต์ กล่าวคือ การรีสตาร์ทจะไม่คืนค่าสถานะเริ่มต้นขณะเรียกใช้ฟังก์ชัน แต่จะย้ายเคอร์เซอร์การดำเนินการไปยังจุดเริ่มต้นของฟังก์ชันแทน
ดังนั้น ค่าอาร์กิวเมนต์ปัจจุบันจะยังคงอยู่ในหน่วยความจำเมื่อรีสตาร์ทฟังก์ชันเดียวกัน
- ตอนนี้ ให้รีสตาร์ทเฟรม
foo()
ใน Call Stack โปรดสังเกตว่าค่านี้เป็น0
อีกครั้ง
ใน JavaScript การเปลี่ยนแปลงอาร์กิวเมนต์จะไม่ปรากฏ (สะท้อน) นอกฟังก์ชัน ฟังก์ชันที่ซ้อนกันจะได้รับค่า ไม่ใช่ตำแหน่งในหน่วยความจำ
1. ดำเนินการสคริปต์ต่อ (F8
) เพื่อสิ้นสุดบทแนะนำนี้
แสดงเฟรมที่อยู่ในรายการละเว้น
โดยค่าเริ่มต้น แผงกองซ้อนการเรียกจะแสดงเฉพาะเฟรมที่เกี่ยวข้องกับโค้ดของคุณ และจะไม่แสดงสคริปต์ที่เพิ่มลงใน การตั้งค่า > รายการที่ละเว้น
หากต้องการดูสแต็กการเรียกใช้ทั้งหมดรวมถึงเฟรมของบุคคลที่สาม ให้เปิดใช้แสดงเฟรมที่อยู่ในรายการละเว้นในส่วนสแต็กการเรียกใช้
ลองใช้ในหน้าเดโมนี้
- ในแผงแหล่งที่มา ให้เปิด
src
>app
app.component.ts
ไฟล์ - ตั้งค่าเบรกพอยท์ที่ฟังก์ชัน
increment()
- ในส่วนสแต็กการเรียกใช้ ให้เลือกหรือล้างช่องทำเครื่องหมายแสดงเฟรมที่ละเว้น และสังเกตรายการเฟรมที่เกี่ยวข้องหรือแบบเต็มในสแต็กการเรียกใช้
ดูเฟรมที่ไม่พร้อมกัน
หากเฟรมเวิร์กที่คุณใช้รองรับ เครื่องมือสำหรับนักพัฒนาเว็บก็ติดตามการดำเนินการแบบไม่พร้อมกันได้โดยลิงก์โค้ดแบบไม่พร้อมกันทั้ง 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
เป็นไลบรารีของบุคคลที่สามที่คุณเชื่อถือ หากมั่นใจว่าปัญหาที่คุณกำลังแก้ไขข้อบกพร่องอยู่
ไม่เกี่ยวข้องกับไลบรารีของบุคคลที่สาม คุณไม่จำเป็นต้องสนใจสคริปต์
ละเว้นสคริปต์หรือไดเรกทอรีจากลําดับชั้นไฟล์
หากต้องการละเว้นสคริปต์ใดสคริปต์หนึ่งหรือทั้งไดเรกทอรี ให้ทำดังนี้
- ในแหล่งที่มา > หน้า ให้คลิกขวาที่ไดเรกทอรีหรือไฟล์สคริปต์
- เลือกเพิ่มไดเรกทอรี/สคริปต์ลงในรายการละเว้น
หากไม่ได้ซ่อนแหล่งที่มาในรายการที่ละเว้น คุณจะเลือกแหล่งที่มาดังกล่าวได้ในโครงสร้างไฟล์ และคลิกนำออกจากรายการที่ละเว้นหรือกําหนดค่าในแบนเนอร์คําเตือน
ไม่เช่นนั้น ให้นำไดเรกทอรีและสคริปต์ที่ซ่อนไว้และละเว้นออกจากรายการได้ใน การตั้งค่า > รายชื่อที่ละเว้น
ละเว้นสคริปต์จากแผงเครื่องมือแก้ไข
วิธีละเว้นสคริปต์จากแผงตัวแก้ไข
- เปิดไฟล์
- คลิกขวาที่ใดก็ได้
- เลือกเพิ่มสคริปต์ลงในรายการละเว้น
คุณนำสคริปต์ออกจากรายการที่ละเว้นได้จาก การตั้งค่า > รายการละเว้น
ละเว้นสคริปต์จากแผงสแต็กการเรียกใช้
วิธีละเว้นสคริปต์จากแผง Call Stack
- คลิกขวาที่ฟังก์ชันจากสคริปต์
- เลือกเพิ่มสคริปต์ลงในรายการละเว้น
คุณนำสคริปต์ออกจากรายการที่ละเว้นได้จาก การตั้งค่า > รายการละเว้น
ละเว้นสคริปต์จากการตั้งค่า
โปรดดู การตั้งค่า > รายชื่อที่ละเว้น
เรียกใช้ข้อมูลโค้ดการแก้ไขข้อบกพร่องจากหน้าใดก็ได้
หากพบว่าตัวเองเรียกใช้โค้ดแก้ไขข้อบกพร่องเดิมในคอนโซลซ้ำๆ ให้ลองใช้ข้อมูลโค้ด ข้อมูลโค้ดคือสคริปต์ที่เรียกใช้ได้ซึ่งคุณเขียน เก็บ และเรียกใช้ภายในเครื่องมือสำหรับนักพัฒนาเว็บ
ดูข้อมูลเพิ่มเติมที่เรียกใช้ข้อมูลโค้ดจากหน้าเว็บใดก็ได้
ดูค่าของนิพจน์ JavaScript ที่กำหนดเอง
ใช้แผงเฝ้าดูเพื่อดูค่าของนิพจน์ที่กำหนดเอง คุณสามารถดูนิพจน์ JavaScript ที่ถูกต้องได้
- คลิกเพิ่มนิพจน์ เพื่อสร้างนิพจน์นาฬิกาใหม่
- คลิกรีเฟรช เพื่อรีเฟรชค่าของนิพจน์ที่มีอยู่ทั้งหมด ค่าจะรีเฟรชโดยอัตโนมัติขณะดูโค้ด
- วางเมาส์เหนือนิพจน์แล้วคลิกลบนิพจน์ เพื่อลบข้อมูลนั้น
ตรวจสอบและแก้ไขสคริปต์
เมื่อเปิดสคริปต์ในแผงหน้า เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงเนื้อหาของสคริปต์ในแผงตัวแก้ไข ในแผงตัวแก้ไข คุณสามารถเรียกดูและแก้ไขโค้ดได้
นอกจากนี้ คุณยังลบล้างเนื้อหาในเครื่องหรือสร้างเวิร์กช็อปและบันทึกการเปลี่ยนแปลงที่คุณทำในเครื่องมือสำหรับนักพัฒนาเว็บลงในแหล่งที่มาในเครื่องได้โดยตรง
ทำให้ไฟล์ที่ลดขนาดไฟล์อ่านได้
โดยค่าเริ่มต้น แผงแหล่งที่มาจะจัดรูปแบบไฟล์ที่ลดขนาด เมื่อจัดรูปแบบแล้ว เครื่องมือแก้ไขอาจแสดงบรรทัดโค้ดขนาดยาวบรรทัดเดียวในหลายๆ บรรทัด โดยมี -
เพื่อระบุว่าเป็นบรรทัดต่อเนื่อง
หากต้องการดูไฟล์ที่ผ่านการย่อขนาดขณะโหลด ให้คลิก { }
ที่มุมล่างซ้ายของเครื่องมือแก้ไข
พับโค้ดบล็อก
หากต้องการพับบล็อกโค้ด ให้วางเมาส์เหนือหมายเลขบรรทัดในคอลัมน์ด้านซ้าย แล้วคลิก ยุบ
หากต้องการขยายบล็อกโค้ด ให้คลิก {...}
ข้างบล็อกนั้น
หากต้องการกําหนดค่าลักษณะการทํางานนี้ โปรดดู การตั้งค่า > ค่ากําหนด > แหล่งที่มา
แก้ไขสคริปต์
เมื่อแก้ไขข้อบกพร่อง คุณมักจะต้องทดสอบการเปลี่ยนแปลงบางอย่างในโค้ด 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)
- ป้อนคำค้นหาในแถบ
หรือคุณสามารถดำเนินการดังนี้
- คลิก ตรงตามตัวพิมพ์ใหญ่-เล็ก เพื่อให้คำค้นหาของคุณคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
- คลิก ใช้นิพจน์ทั่วไปเพื่อค้นหาโดยใช้นิพจน์ทั่วไป
- กด Enter หากต้องการข้ามไปยังผลการค้นหาก่อนหน้าหรือถัดไป ให้กดปุ่มขึ้นหรือลง
วิธีแทนที่ข้อความที่พบ
- ในแถบค้นหา ให้คลิกปุ่มแทนที่
- พิมพ์ข้อความที่ต้องการแทนที่ แล้วคลิกแทนที่หรือแทนที่ทั้งหมด
ปิดใช้ JavaScript
โปรดดูปิดใช้ JavaScript ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome