เผยแพร่: 22 ตุลาคม 2025
Chrome จะเลิกใช้งานฟีเจอร์การแก้ไขแหล่งที่มาของ JavaScript แบบสด เราจะย้ายฟีเจอร์นี้ไปไว้หลัง Flag การทดลองใน Chrome 142 และวางแผนที่จะ นำออกอย่างสมบูรณ์ใน Chrome 145 (กุมภาพันธ์ 2026) เราจะไม่นำฟีเจอร์อื่นๆ ที่มีประสิทธิภาพซึ่งเกี่ยวข้องกับไฟล์ต้นฉบับออก เช่น การลบล้างในเครื่อง พื้นที่ทำงาน หรือ ข้อมูลโค้ด ซึ่งจะยังคงได้รับการสนับสนุนอย่างเต็มที่ต่อไป
ทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ทำงานอย่างต่อเนื่องเพื่อมอบเครื่องมือที่มีประสิทธิภาพและเชื่อถือได้ให้แก่นักพัฒนาซอฟต์แวร์ ความพยายามนี้ทำให้เราจำเป็นต้องหยุดให้บริการ ฟีเจอร์ที่ไม่มีการใช้งานอีกต่อไปในบางครั้ง การตัดสินใจครั้งนี้ไม่ได้เกิดขึ้นโดยง่าย แต่พิจารณาจากต้นทุนการบำรุงรักษาที่สูงเกินสัดส่วนของฟีเจอร์ การใช้งานที่ต่ำ และการมีอยู่ของทางเลือกที่ทันสมัยกว่าและดีกว่า เราทราบดีว่า การเปลี่ยนแปลงเวิร์กโฟลว์อาจทำให้เกิดการหยุดชะงักได้ และโพสต์นี้มีจุดมุ่งหมายเพื่ออธิบาย เหตุผลของเราอย่างชัดเจน
การแก้ไขแบบสดคืออะไร
การแก้ไขแบบสดช่วยให้คุณแทนที่เนื้อหาของไฟล์สคริปต์ได้ในขณะรันไทม์ ซึ่งจะทำงานได้แม้ว่าจะหยุดสคริปต์ชั่วคราวที่จุดพักก็ตาม คุณสามารถ แก้ไขโค้ด JavaScript ในแผงแหล่งที่มาและใช้การเปลี่ยนแปลงโดยการบันทึก ไฟล์ (Command+S / Ctrl+S) จากนั้นดีบักเกอร์จะแก้ไข ฟังก์ชันที่กำหนดไว้แล้วในรันไทม์ หากฟังก์ชันที่แก้ไขอยู่ใน Call Stack ระบบจะรีสตาร์ทฟังก์ชันนั้นด้วย
เป้าหมายคือการหาวิธีทดสอบการเปลี่ยนแปลงเล็กๆ น้อยๆ โดยไม่ต้องโหลดหน้าเว็บแบบเต็ม ซึ่งจะล้างสถานะของแอปพลิเคชัน ด้วยวิธีนี้ วัตถุประสงค์ของเครื่องมือ จึงคล้ายกับสิ่งที่ Hot Module Replacement (HMR) ทำได้ในสแต็กการพัฒนาที่ทันสมัย
เหตุผลที่เราจะนำฟีเจอร์นี้ออก
ประสบการณ์การใช้งานการแก้ไขแบบเรียลไทม์เป็นเรื่องที่ท้าทายมาโดยตลอด โดยปกติแล้ว แป้นพิมพ์ลัดที่เกี่ยวข้อง (Command+S / Ctrl+S) จะเชื่อมโยงกับการบันทึกไฟล์ แต่ไม่ได้เชื่อมโยง กับผลข้างเคียงอื่นๆ ซึ่งอาจทำให้คุณประหลาดใจ เมื่อไม่สำเร็จ ฟีดแบ็ก อาจไม่ชัดเจน: DevTools อาจแสดงข้อความเตือน เช่น "LiveEdit failed: Functions that are on the stack (currently being executed) can not be edited", ซึ่งอาจถูกมองข้ามไป ทำให้ผู้พัฒนาไม่แน่ใจว่าการเปลี่ยนแปลงของตน มีผลหรือไม่
และจะยิ่งแย่ลงไปอีกเมื่อการแก้ไขแบบสดโต้ตอบกับฟีเจอร์อื่นๆ ของเครื่องมือสำหรับนักพัฒนาเว็บ ที่เกี่ยวข้องกับไฟล์ต้นฉบับ เช่น การแก้ไขเนื้อหาของ DevTools Snippet แบบสดอาจทำให้ DevTools สับสนเกี่ยวกับข้อมูลอ้างอิงถึงตัวตนของแหล่งที่มาของ Snippet ซึ่งส่งผลให้เวอร์ชันใหม่แสดงเป็นไฟล์แบบอ่านอย่างเดียว เมื่อเปิดใช้ฟีเจอร์พื้นที่ทำงาน เครื่องมือสำหรับนักพัฒนาเว็บอาจสังเกตเห็นการเปลี่ยนแปลงแหล่งข้อมูลในระบบไฟล์และ ใช้การเปลี่ยนแปลงเหล่านี้กับหน้าเว็บจริงได้อย่างราบรื่น ลักษณะการทำงานนี้อาจเป็นไปตามที่คาดไว้ หรืออาจทำให้ผู้ใช้ประหลาดใจ ทั้งนี้ขึ้นอยู่กับสภาพแวดล้อมของผู้ใช้และการตั้งค่าเครื่องมือ
ปัญหาเดิมที่การแก้ไขแบบสดพยายามแก้ไข นั่นคือการทำการเปลี่ยนแปลงโดยไม่สูญเสียสถานะของแอปพลิเคชัน ตอนนี้ได้รับการแก้ไขอย่างมีประสิทธิภาพมากขึ้นด้วยการแทนที่โมดูลแบบ Hot (HMR) HMR เป็นฟีเจอร์มาตรฐานในเฟรมเวิร์กการพัฒนาเว็บสมัยใหม่ เช่น React, Angular หรือ Vue ซึ่งให้ผลลัพธ์เดียวกันในพื้นที่ผู้ใช้ และที่ระดับการแยกข้อมูลที่สูงขึ้น การแก้ไขแบบสดในเครื่องมือสำหรับนักพัฒนาเว็บอาจรบกวน การทำงานของฟีเจอร์นี้ ซึ่งส่งผลให้เกิดลักษณะการทำงานที่ไม่คาดคิดและผิดพลาด
ปัญหาเหล่านี้ทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี นอกจากนี้ สถิติการใช้งานของเรายังยืนยันว่าฟีเจอร์นี้ไม่ได้กลายเป็นส่วนสำคัญของเวิร์กโฟลว์ของนักพัฒนาแอปส่วนใหญ่ จำนวนผู้ใช้ที่โต้ตอบกับฟีเจอร์นี้ต่ำมากและมีแนวโน้มลดลง
ต้นทุนการดูแลรักษาสูงและความซับซ้อนทางเทคนิค
การแทนที่โค้ดในหน้าเว็บที่เผยแพร่อยู่ไม่ใช่เรื่องง่ายในแง่ของการกําหนด ความหมายที่สมเหตุสมผล รวมถึงในการติดตั้งใช้งานด้วย ซึ่งจะทำให้เครื่องมือ JavaScript V8 และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีต้นทุนด้านวิศวกรรมที่สูงมาก และต้องพิจารณาอย่างรอบคอบในหลายส่วนของ V8 การแก้ไขแบบสดอาจทำให้เกิดข้อขัดข้องที่จำลองซ้ำได้ยากและแก้ไขข้อบกพร่องได้ยาก เว้นแต่จะดำเนินการด้วยความระมัดระวังอย่างยิ่ง ตัวอย่างเช่น หากฟังก์ชันเวอร์ชันใหม่มีจำนวนนิพจน์ทั่วไป ออบเจ็กต์ หรือฟังก์ชันลิเทอรัลแตกต่างจากเวอร์ชันก่อนหน้า คุณจะต้องปรับโครงสร้างข้อมูลที่ติดตามลิเทอรัลเหล่านี้อย่างรอบคอบ
ภาระในการบำรุงรักษานี้ทำให้การติดตั้งใช้งานฟีเจอร์ JavaScript ใหม่ๆ ช้าลง และดึงทรัพยากรไปจากการปรับปรุงฟีเจอร์ DevTools ที่ใช้กันอย่างแพร่หลายมากขึ้น
ความซับซ้อนนี้ยังทำให้เกิดสถานการณ์ที่ไม่รองรับหลายอย่างด้วย ซึ่งรวมถึง
- การแก้ไขฟังก์ชันที่อยู่ใน Call Stack แต่ไม่ใช่เฟรมบนสุด
- การแก้ไขฟังก์ชันแบบอะซิงโครนัสหรือตัวสร้าง
- การแก้ไขโค้ดระดับบนสุดของโมดูล ES
ตัวเลือกอื่นๆ
ดังที่ได้กล่าวไปก่อนหน้านี้ Hot Module Replacement (HMR) เป็นทางเลือกที่ได้รับความนิยมมากกว่า และดีกว่าการแก้ไขแบบเรียลไทม์ในบางแง่มุมที่สำคัญ
- การแก้ไขแบบเรียลไทม์จะแทนที่ส่วนต่างๆ ของเวอร์ชันเก่ากว่าของหน้าเว็บที่เผยแพร่อยู่ในระดับซอร์สโค้ด ในทางกลับกัน HMR จะแทนที่เวอร์ชันเก่าที่ ระดับการแยกส่วนที่เฟรมเวิร์กเว็บตั้งใจไว้ ซึ่งจะเพิ่มโอกาสในการ ย้ายข้อมูลสถานะของคอมโพเนนต์และแอปพลิเคชันอย่างถูกต้องในระหว่างการอัปเดตแบบเรียลไทม์
- HMR จะทำงานกับซอร์สโค้ดที่คุณเขียน คุณแก้ไขไฟล์ต้นฉบับ (เช่น TypeScript, JSX) ในโปรแกรมแก้ไข และเครื่องมือบิลด์จะจัดการการอัปเดตในเบราว์เซอร์ ในขณะที่การแก้ไขแบบสดจะมีผลกับไฟล์ต้นฉบับที่ใช้งานจริงเท่านั้น ซึ่งในหลายๆ กรณีจะเป็นเอาต์พุตบิลด์ที่สร้างโดยเครื่องมือ
- มีความแข็งแกร่งและผสานรวมกันได้ดี HMR เป็นส่วนสำคัญของเครื่องมือพัฒนาซอฟต์แวร์สมัยใหม่ โดยมอบประสบการณ์ที่เชื่อถือได้พร้อมความคิดเห็นที่ชัดเจนเมื่อการอัปเดตสำเร็จหรือไม่สำเร็จ
การนำการแก้ไขแบบสดออกจะไม่ส่งผลต่อฟีเจอร์ที่มีประสิทธิภาพอื่นๆ 2 รายการใน Chrome DevTools ดังนี้
- การลบล้างในเครื่องช่วยให้คุณ สกัดกั้นคำขอของเครือข่ายและแสดงไฟล์ในเครื่องแทนได้ เหมาะอย่างยิ่ง สำหรับการสร้างต้นแบบการเปลี่ยนแปลงในเว็บไซต์ที่ใช้งานจริงซึ่งคุณไม่มี สิทธิ์เข้าถึงซอร์สโค้ด การเปลี่ยนแปลงจะยังคงอยู่เมื่อโหลดหน้าเว็บซ้ำ
- พื้นที่ทำงานจะเปลี่ยน DevTools ให้เป็นเครื่องมือแก้ไขที่มีประสิทธิภาพมากขึ้นด้วยการสร้างการเชื่อมโยงแบบ 2 ทางระหว่าง แผงแหล่งที่มากับไฟล์โปรเจ็กต์ในเครื่อง เมื่อคุณบันทึกการเปลี่ยนแปลงใน DevTools ระบบจะบันทึกลงในระบบไฟล์โดยตรง ซึ่งอาจทริกเกอร์กระบวนการ HMR หรือการโหลดซ้ำแบบเรียลไทม์ของเซิร์ฟเวอร์ การพัฒนา
บทสรุป
เราจะนำการตัดต่อสดออกเนื่องจากมีต้นทุนการบำรุงรักษาสูงและมีการใช้งานน้อย จึงไม่ยั่งยืน ระบบนิเวศการพัฒนาเว็บสมัยใหม่ได้มอบโซลูชันที่เหนือกว่ามากในเรื่องการแทนที่โมดูลแบบร้อน
การหยุดให้บริการฟีเจอร์นี้จะช่วยให้เรามุ่งเน้นความพยายามด้านวิศวกรรมไปที่ส่วนที่มีผลลัพธ์มากกว่า ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ลำดับเวลาการนำออกมีดังนี้
- อนาคตอันใกล้: ระบบจะย้ายฟีเจอร์นี้ไปไว้หลังการทดลองใน Chrome 142 ซึ่งจะพร้อมใช้งานเป็น Chrome Flag (chrome://flags/#devtools-live-edit)
- Chrome 145 (กุมภาพันธ์ 2026): เราจะนำฟีเจอร์และ Flag ของ Chrome ที่เกี่ยวข้อง ออกโดยสมบูรณ์
เรายินดีรับฟังความคิดเห็นของคุณเกี่ยวกับการเปลี่ยนแปลงนี้ แสดงความคิดเห็นเกี่ยวกับปัญหาความคิดเห็น