Chrome Dev Tools - แก้ไขจาวาสคริปต์และโหลดซ้ำ

195

เป็นไปได้หรือไม่ที่จะแก้ไข JavaScript ของหน้าเว็บจากนั้นโหลดหน้าเว็บซ้ำโดยไม่โหลดไฟล์ JavaScript ที่แก้ไขใหม่ (และทำให้สูญเสียการปรับเปลี่ยน)?

javascript google-chrome-devtools

— CDT
แหล่งที่มา

218

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

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

แต่อย่างที่ทุกคนได้กล่าวไว้การโหลดซ้ำการเปลี่ยนแปลงครั้งต่อไปจะหายไป - อย่างน้อยก็ให้คุณเรียกใช้ฝั่งไคลเอ็นต์ JS ที่ปรับเปลี่ยนเล็กน้อย

— Ashley Schroder
แหล่งที่มา

10

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

— Nicholas Blasgen

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

— Josh Sutterfield

น่าเสียดายที่นี่ยังไม่ใช่ทางออกที่ดี รหัสที่คุณเพิ่มไม่สามารถใช้ได้ในคอนโซล เช่นการเพิ่มvar foo = 'bar'ในสคริปต์ไม่ได้เปิดเผยfooไปยังคอนโซล

— AgmLauncher

เกิดอะไรขึ้นกับสคริปต์ภายนอก จุดพักดูเหมือนจะหายไปจากพวกเขา

— OlehZiniak

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

— Marek

148

ข่าวดีการแก้ไขจะมาในเดือนมีนาคม 2561 ดูลิงค์นี้: https://developers.google.com/web/updates/2018/01/devtools

"การแทนที่ในเครื่องช่วยให้คุณสามารถทำการเปลี่ยนแปลงใน DevTools และเก็บการเปลี่ยนแปลงเหล่านั้นในการโหลดหน้าก่อนหน้านี้การเปลี่ยนแปลงใด ๆ ที่คุณทำใน DevTools จะหายไปเมื่อคุณโหลดหน้าซ้ำการแทนที่ในเครื่องทำงานได้กับประเภทไฟล์ส่วนใหญ่

มันทำงานอย่างไร:

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

หากต้องการตั้งค่าการแทนที่ท้องถิ่น:

เปิดพาเนลแหล่งที่มา
เปิดแท็บการแทนที่
คลิกการแทนที่การตั้งค่า
เลือกไดเรกทอรีที่คุณต้องการบันทึกการเปลี่ยนแปลงของคุณ
ที่ด้านบนของวิวพอร์ตของคุณคลิกอนุญาตเพื่อให้ DevTools อ่านและเขียนการเข้าถึงไดเรกทอรี
ทำการเปลี่ยนแปลงของคุณ "

อัปเดต (19 มีนาคม 2018): มีการถ่ายทอดสดพร้อมคำอธิบายอย่างละเอียดที่นี่: https://developers.google.com/web/updates/2018/01/devtools#overrides

— นิโก้
แหล่งที่มา

12

ด้วยการเปิดตัว Chrome 65 นี่เป็นคำตอบที่ยอมรับใหม่ (ฟังก์ชั่นนี้มีให้บริการแล้วใน Chrome Canary)

— Micros

1

ฉันมีไฟล์ "a.js? ver = 1.2" มันถูกบันทึกไว้ในโฟลเดอร์แทนที่เป็น "a.js" และไม่ได้โหลดเป็นแทนที่ มันไม่ทำงานเมื่อมีพารามิเตอร์? มีวิธีแก้ปัญหาหรือไม่?

— Ralf

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

— Muhammad Murad Haider

61

แทนที่ทรัพยากรขยายช่วยให้คุณสามารถทำตรงนั้น:

สร้างกฎไฟล์สำหรับ URL ที่คุณต้องการแทนที่
แก้ไข js / css / etc ในส่วนขยาย
โหลดซ้ำได้บ่อยเท่าที่คุณต้องการ :)

— laktak
แหล่งที่มา

1

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

— Ahmad Alfy

ฉันไม่เข้าใจซอฟต์แวร์มีใครสามารถอธิบายได้ว่าฉันต้องตั้งค่าอย่างแน่นอน

— ดำ

0

ฉันรู้ว่าไม่ใช่คำถามที่แม่นยำ (เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome) แต่ฉันใช้วิธีแก้ปัญหานี้กับความสำเร็จ: http://www.telerik.com/fiddler

(ค่อนข้างแน่ใจว่าผู้พัฒนาเว็บบางคนรู้เรื่องนี้แล้ว)

บันทึกไฟล์ไว้ในเครื่อง
แก้ไขตามต้องการ
กำไร!

เอกสารฉบับเต็ม: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS ฉันอยากจะให้มันใช้งานใน Chrome เป็นค่าสถานะpreserve after reloadไม่สามารถทำได้ในตอนนี้ฟอรัมและกลุ่มสนทนาที่ถูกบล็อกในเครือข่ายขององค์กร :)

— ดาวอังคาร Robertson
แหล่งที่มา

-8

ใช่เพียงเปิดแท็บ "แหล่งที่มา" ในเครื่องมือ dev และไปที่สคริปต์ที่คุณต้องการเปลี่ยน ทำการปรับเปลี่ยนโดยตรงในหน้าต่างเครื่องมือ dev จากนั้นกด ctrl + s เพื่อบันทึกสคริปต์ - รู้ว่าจะใช้ js ใหม่จนกว่าคุณจะรีเฟรชหน้าทั้งหมด

— jacksbox
แหล่งที่มา

โครมรุ่นใด ใช่คุณสามารถ "แก้ไข" เนื้อหาของสคริปต์ (ไม่ใช่สคริปต์บนหน้าเว็บด้วยตนเอง) แต่การเปลี่ยนแปลงนั้นไม่มีผลใด ๆ และ ctrl-s / save เช่นเดียวกับให้คุณบันทึกสคริปต์ในเครื่อง (เช่น ctrl-as ใน หน้าต่างหลัก)

— davidkonrad

ฉันใช้เวอร์ชัน 34 - เมื่อฉันแก้ไขสคริปต์เช่นเพิ่ม console.log ไปยังเหตุการณ์คลิก (เชื่อมโยงแล้ว) และบันทึกคอนโซลจะแสดงข้อความต่อไปนี้: "การคอมไพล์ใหม่และอัปเดตสำเร็จ" - หลังจากนั้น. เมื่อฉันทริกเกอร์เหตุการณ์คลิกฉันได้รับบันทึกเอาท์พุทในคอนโซล

— jacksbox

เมื่อคุณโหลดหน้าซ้ำจะไม่ใช้ไฟล์ที่แก้ไขในเครื่อง

— Jake Wilson

32

คุณมีฉันที่ "ใช่" ... แต่จากนั้นคุณก็สูญเสียฉันไปที่ "จนกว่าคุณจะรีเฟรชหน้าทั้งหมด" ....

— Cool Blue