การแก้ไขในดีบักเกอร์ Chrome

247

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

javascript  google-chrome  debugging 
— ทอม
แหล่งที่มา
5
คุณสามารถใช้ Opera Opera อนุญาตให้แก้ไขไฟล์ JS หลังจากที่คุณรีโหลดหน้าซ้ำการเปลี่ยนแปลงของคุณจะถูกนำไปใช้ คลิกขวา> ที่มา> ทำการเปลี่ยนแปลง> ใช้การเปลี่ยนแปลง
— XP1
นี่คือบทช่วยสอนที่ยอดเยี่ยมสำหรับดีบักเกอร์ Chrome มันแสดงขั้นตอนง่าย ๆ สำหรับการเปลี่ยนแปลง in-debugger กับสคริปต์ของคุณ
— SaganRitual
1
คุณยังสามารถ "ฉีด" รหัสผ่านจุดพักตามเงื่อนไข ในตัวอย่างที่ให้ใช้num = 5, console.log(arguments[0], num), falseเพื่ออัปเดตและบันทึกค่าภายในfooฟังก์ชั่น
— mems
โปรดค้นหาstackoverflow.com/questions/66420/
— stackinfostack

คำตอบ:

80

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

มีวิดีโอจากเหตุการณ์ Google I / O 2010 ที่แนะนำความสามารถอื่น ๆ ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

— อาดัม
แหล่งที่มา
26
ใน Chrome รุ่นที่ใหม่กว่าไอคอนแท็บได้หายไปและแท็บ 'สคริปต์' ถูกเปลี่ยนชื่อเป็น 'แหล่งที่มา' - ดังนั้นอาจไม่ชัดเจนในการค้นหาตัวแก้จุดบกพร่องจาวาสคริปต์ ข้อมูลเพิ่มเติมได้ที่นี่stackoverflow.com/questions/12113769/…
— chrisjleu
9
ไม่มีวิธีการดังกล่าว ฉันไม่สามารถแก้ไขรหัสได้ในแท็บแหล่งที่มา
— Melab
17
ดีบักเกอร์ Chrome ไม่อนุญาตให้แก้ไขจาวาสคริปต์ เท็จ
— ทุก
1
@oMiKeY อะไรคือเท็จ? Chrome แน่นอนอนุญาตให้แก้ไขสคริปต์ในเครื่องมือดีบั๊ก
— JLRishe
6
@oMiKeY คุณสามารถแก้ไขได้หากสคริปต์ไม่ได้รับการ
— กำหนดล่วงหน้า
284

ฉันเจอสิ่งนี้วันนี้เมื่อฉันเล่นกับเว็บไซต์ของคนอื่น

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

เพื่อเป็นการทำงานที่รวดเร็วและถ้ามันทำงานกับสถานการณ์ของคุณ:

  1. เพิ่มจุดพักที่จุดก่อนหน้าในสคริปต์
  2. โหลดหน้าซ้ำ
  3. แก้ไขการเปลี่ยนแปลงของคุณเป็นรหัส
  4. CTRL+ s(บันทึกการเปลี่ยนแปลง)
  5. ยกเลิกการดีบักเกอร์ชั่วคราว
— sjacob
แหล่งที่มา
1
ขอบคุณ! ฉันพบว่าสิ่งนี้ทำงานได้เมื่อต้องการเปลี่ยนแปลงฟังก์ชั่นนิรนามที่ดำเนินการเองซึ่งถูกเรียกใช้ใกล้กับโหลดหน้าเว็บ
— ปีเตอร์
1
อาร์เกเพราะฉันเคยลองมาก่อนหน้านี้แล้วและมันก็ไม่ทำงานและแม้ว่าจะเป็นผู้ชายฉันจะคิดถึงมันอย่างไร แต่ใช่ไม่ได้ผลสำหรับฉัน
— Jamie Hutber
8
สิ่งสำคัญสำหรับฉันคือการรู้ว่าการเปลี่ยนแปลงควรถูกบันทึกไว้ (ขั้นตอนที่ 4) ขอบคุณ!
— Sergey Goliney
3
ใช้งานไม่ได้กับจาวาสคริปต์ในไฟล์ html สำหรับฉัน นอกจากนี้หากคุณเพิ่มโฟลเดอร์ลงในเวิร์กสเปซให้เลือกไฟล์ js ในพื้นที่คลิกขวาและแมปไฟล์นั้นไปยังเครือข่าย
— oo
1
ดังนั้นจึงไม่มีวิธีแก้ไขสคริปต์ในไฟล์ html หรือไม่
— Warrior
13

นี่คือสิ่งที่คุณกำลังมองหา:

1.- นำทางไปยังแท็บแหล่งที่มาและเปิดไฟล์จาวาสคริปต์

2.- แก้ไขไฟล์คลิกขวาและเมนูจะปรากฏขึ้น: คลิกบันทึกและบันทึกในเครื่อง

ในการดู diff หรือย้อนกลับการเปลี่ยนแปลงของคุณให้คลิกขวาและเลือกตัวเลือกLocal Modifications ... จากเมนู คุณจะเห็นการเปลี่ยนแปลงของคุณแตกต่างกันไปตามไฟล์ต้นฉบับหากคุณขยายเวลาที่แสดง

ข้อมูลรายละเอียดเพิ่มเติมได้ที่นี่: http://www.sitepoint.com/edit-source-files-in-chrome/

— artemisian
แหล่งที่มา
5

ค่อนข้างง่ายไปที่แท็บ 'สคริปต์' และเลือกไฟล์ต้นฉบับที่คุณต้องการและดับเบิลคลิกที่บรรทัดใดก็ได้เพื่อแก้ไข

— gnur
แหล่งที่มา
4
มันจะยอดเยี่ยมถ้าคุณสามารถบันทึกการเปลี่ยนแปลงของดิสก์ในกรณีของไฟล์: // URLs
— Jim Blackler
3
นั่นคือสิ่งที่ฉันทำ แต่การเปลี่ยนแปลงไม่ได้สะท้อนให้เห็นในหน้าอย่างที่ใคร ๆ คาดหวัง ฉันต้องเปลี่ยน $ (selector) .fadeIn () ... เป็น $ (selector) .stop (true, true) .fadeIn () ... Y'know? และฉันต้องการที่จะเห็นสิ่งที่เกิดขึ้นบนหน้า
— Tom
1
โอ้เจ้าพูดถูกแล้ว ตอนนี้ผมสงสัยว่าทำไม Chrome ช่วยให้เราสามารถแก้ไขอะไรถ้ามันไม่ได้มีผลกระทบใด ๆ ..
— gnur
"บันทึกเป็น ... " บันทึกไฟล์ลงในคอมพิวเตอร์ของคุณเท่านั้น ไม่ใช้การเปลี่ยนแปลงหลังจากที่โหลดหน้าซ้ำ หากคุณต้องการใช้การเปลี่ยนแปลงกับไฟล์ JS สำหรับการดีบักคุณสามารถใช้ Opera
— XP1
1
และอันนี้เรียกว่า tincr: chrome.google.com/webstore/detail/…
— JustGoscha
3

เนื่องจากเป็นคำถามยอดนิยมที่เกี่ยวข้องกับการแก้ไขสดของ JS ฉันต้องการชี้ให้เห็นตัวเลือกที่มีประโยชน์อื่น ตามที่อธิบายโดย svjacob ในคำตอบของเขา:

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

วิธีการแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉันสำหรับ JS ที่ค่อนข้างใหญ่ (ชุด webpack - เวอร์ชันย่อขนาด 3.21MB, โค้ด 130k บรรทัดในเวอร์ชันที่กำหนดล่วงหน้า) - โครเมี่ยมหยุดทำงานและขอโหลดหน้าใหม่ซึ่งเปลี่ยนการเปลี่ยนแปลงที่บันทึกไว้ วิธีที่จะไปในกรณีนี้คือพู้ทำเล่นที่คุณสามารถตั้งค่าตัวเลือก AutoRespond เพื่อแทนที่ทรัพยากรระยะไกลใด ๆ กับไฟล์ใด ๆ จากคอมพิวเตอร์ของคุณ - ดูคำถาม SO นี้สำหรับรายละเอียด

ในกรณีของฉันฉันยังต้องเพิ่มส่วนหัว CORS พู้ทำเล่นเพื่อตอบสนองการจำลองที่ประสบความสำเร็จ

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

หากจาวาสคริปต์ที่ทำงานบนปุ่มคลิกจากนั้นทำการเปลี่ยนแปลงภายใต้แหล่งที่มา> แหล่งที่มา (ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน chrome) และกด Ctrl + S เพื่อบันทึกก็เพียงพอแล้วแล้ว ฉันทำสิ่งนี้ตลอดเวลา

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

— developer747
แหล่งที่มา
2

ตอนนี้ google chrome ได้แนะนำคุณสมบัติใหม่ โดยใช้คุณสมบัตินี้คุณสามารถแก้ไขรหัสของคุณในการเรียกดูโครเมี่ยม (เปลี่ยนรหัสตำแหน่งอย่างถาวร)

สำหรับที่กด F12 -> แท็บที่มา - (ด้านขวา) -> ระบบไฟล์ - ในนั้นโปรดเลือกตำแหน่งของรหัส จากนั้นเบราว์เซอร์ chrome จะขออนุญาตจากคุณและหลังจากนั้นรหัสจะจมด้วยสีเขียว และคุณสามารถแก้ไขรหัสของคุณและมันจะสะท้อนให้เห็นถึงคุณรหัสสถานที่ตั้ง (มันหมายความว่ามันจะเป็นการเปลี่ยนแปลงถาวร)

ขอบคุณ

— stackinfostack
แหล่งที่มา
2

เช่นเดียวกับคำตอบของ @mark เราสามารถสร้างตัวอย่างใน Chrome DevTools เพื่อoverrideจาวาสคริปต์เริ่มต้น สุดท้ายเราสามารถเห็นผลกระทบที่เกิดขึ้นบนหน้าเว็บ

ภาพ

— ไวน์คามิ
แหล่งที่มา
1

นี่เป็นการแนะนำตัวดีบักเกอร์ js ใน Chrome อย่างอ่อนโยน อาจจะช่วยให้ผู้อื่นมองหาข้อมูลเกี่ยวกับสิ่งนี้: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

— meeech
แหล่งที่มา
1
นั่นเป็นการเขียนที่ดี น่าเสียดายที่มันไม่ได้กล่าวถึงการแก้ไข JS ในโปรแกรมดีบั๊กซึ่งเป็นงานที่ต้องสงสัย
— Bruno Bronosky
ไม่เห็นด้วย คุณจะเห็นในตอนท้ายฉันให้ตัวอย่างวิธีการ "แก้ไข" แบบไดนามิก "รหัส JavaScript ในการดีบัก Chrome" ซึ่งเป็นส่วนหนึ่งของคำถาม
— meeech
1
meeech ยกเว้นว่าฉันเข้าใจผิดคุณโพสต์คุณแสดงให้เห็นถึงวิธีการประเมิน JS ที่คอนโซล มันแตกต่างจากการแก้ไขฟังก์ชั่นดังนั้นเมื่อเรียกใช้ฟังก์ชั่นในอนาคตมันจะทำงานแตกต่างกัน
— Bruno Bronosky
ยุติธรรมพอสมควร ฉันเข้าใจการแก้ไขเพื่อหมายถึงการเปลี่ยนแปลงค่าของหน้าสดและคิดว่าการเขียนจะช่วยได้เนื่องจากเมื่อคุณมีในคอนโซลคุณสามารถเล่นกับค่าและสิ่งอื่นใด js ในบริบทการดำเนินการ
— meeech
1
ใช่ meeech ฉันทำสิ่งที่คุณอธิบายมาหลายปีแล้ว ในที่สุดฉันก็รู้สึกหงุดหงิดที่ไม่สามารถบรรลุผลตอบรับที่ดีสำหรับการแก้ไขตัวจัดการเหตุการณ์ โดยเฉพาะอย่างยิ่งสิ่งที่ทริกเกอร์ระหว่างการโหลดหน้าเว็บ AaronLS และฉันพูดถึงในความคิดเห็นของคำตอบของ gnur บางครั้งการแก้ไขใน DevTools> แหล่งที่มา> แหล่งที่มาของงานและเวลาอื่น ๆ ที่ไม่ได้ แต่เมื่อมันได้ผลมันก็ค่อนข้างหวาน!
— Bruno Bronosky
1

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

— Seif Tamallah
แหล่งที่มา
คุณต้องเปิดคอนโซลไว้เพื่อให้โครเมี่ยมหยุดในจุดพักมิฉะนั้นโครเมี่ยมจะเพิกเฉยต่อจุดพัก
— Seif Tamallah
ไม่ทำงาน. ฉันโหลดใหม่โดยใช้ F5 และหยุดฉันเปลี่ยนไฟล์จากนั้นฉันยังคงทำงานต่อและฉันได้รับข้อผิดพลาดเดิมที่ฉันเพิ่งแก้ไข มันเป็นไฟล์ js ข้างหน้าหลัก.
— darkgaze
1

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

  1. ตั้งค่าเบรกพอยต์ในบรรทัดแรกของสคริปต์ที่คุณต้องการเปลี่ยนและดีบัก

  2. โหลดหน้านี้ใหม่เพื่อให้เบรกพอยต์ถูกตี

  3. วางสคริปต์ใหม่ของคุณและตั้งจุดพักที่ต้องการ

  4. Ctrl + s และหน้าจะรีเฟรชทำให้เบรกพอยต์นั้นในบรรทัดแรกถูกกด

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

— 100R
แหล่งที่มา
0

Chrome DevTools มีแผงSnippetsซึ่งคุณสามารถสร้างและแก้ไขรหัส JavaScript ได้ตามต้องการในเครื่องมือแก้ไขและเรียกใช้งาน เปิด DevTools จากนั้นเลือกพาเนล Sources จากนั้นเลือกแท็บ Snippets

https://developers.google.com/web/tools/chrome-devtools/snippets

ป้อนคำอธิบายรูปภาพที่นี่

— เครื่องหมาย
แหล่งที่มา
0

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

  1. สร้างโฟลเดอร์ภายใต้เครื่องมือสำหรับนักพัฒนา> แหล่งข้อมูล> การแทนที่
  2. Chrome จะขออนุญาตไปยังโฟลเดอร์คลิกอนุญาต
  3. แก้ไขไฟล์ในแหล่งที่มา> หน้าจากนั้นบันทึก (ctrl-s) จุดสีม่วงจะระบุว่าไฟล์ถูกบันทึกไว้ในเครื่อง

แท็บย่อยแทนที่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

— มาร์คโฟร์แมน
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.