การแก้ไข Javascript โดยใช้ Chrome Developer Tools

95

ฉันกำลังพยายามแก้ไขจาวาสคริปต์บนไซต์โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ฉันได้อ่านเกี่ยวกับ 30 บัญชีเกี่ยวกับวิธีการทำเช่นนี้และดูวิดีโอบางส่วน ความจริงก็คือเมื่อฉันไปที่แท็บแหล่งที่มาและเปิดไฟล์ที่ต้องการแก้ไขฉันไม่สามารถทำอะไรได้เลย มีขั้นตอนบางอย่างที่ฉันพลาดไปหรือไม่?

ฉันสามารถสร้างจุดพักก้าวผ่าน ฯลฯ ... ฉันแก้ไขไม่ได้ ฟังก์ชันนี้ถูกลบเมื่อเร็ว ๆ นี้หรือไม่

javascript google-chrome web-developer-toolbar

— คูเปอร์เรีย
แหล่งที่มา

1

ฉันโทรออกในคอนโซลได้ดี ฉันไม่สามารถแก้ไขสิ่งต่างๆได้

— cooperia

1

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

— Geuis

1

จริงๆแล้วฉันสามารถแก้ไขไฟล์ css ได้ แต่แก้ไขสคริปต์ที่ฝังอยู่ในไฟล์ php ไม่ได้ >.>

— cooperia

1

ฉันสามารถทำสิ่งที่ต้องการได้ด้วย Opera แก้ไขปัญหาการเรียงลำดับ

— cooperia

1

@cooperia ใส่รหัส js ของคุณในไฟล์ * .js จากนั้นคุณจะสามารถแก้ไขและเรียกใช้แบบเรียลไทม์ใน chrome ได้

— Mahn

105

ฉันรู้ว่าคำถามนี้ไม่มีปัญหา แต่ฉันเพิ่งมีปัญหาที่คล้ายกันและพบวิธีแก้ปัญหา

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

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

4

ใช่นั่นช่วยได้ขอบคุณ @raddevon ฉันสามารถแก้ไขได้แล้ว แต่ไม่มีผลใด ๆ เกิดขึ้นกับเพจ

— Bolas

2

สำหรับคนอื่น ๆ ที่ค้นหาหัวข้อนี้: ฉันตั้งค่า prettify เป็น OFF แต่ยังไม่สามารถแก้ไขได้ การเปิดและปิดอีกครั้งช่วยได้ (ขอบคุณ IT Crowd สำหรับคำแนะนำนั้น))

— Drkawashima

3

ต่อ: ไม่ ปรากฎว่าฉันมีปัญหาเดียวกันกับ @raddevon อาจเป็นข้อผิดพลาดใน Chrome คุณสามารถแก้ไขและบันทึกสคริปต์และคุณสามารถกดจุดพักได้เมื่อทำการดีบั๊ก แต่สคริปต์ที่ใช้งานจริงยังคงเป็นเวอร์ชันดั้งเดิมที่ไม่มีการแก้ไข ตัวอย่าง: ฉันแก้ไขสคริปต์แสดงความคิดเห็นทุกบรรทัด แต่ยังสามารถเรียกใช้สคริปต์ตีเบรกพอยต์บนบรรทัดได้เป็นต้นดังนั้นเวอร์ชันที่แก้ไขจึงไม่ทำงานด้วยซ้ำมันเพิ่งปรากฏขึ้น ... แน่นอนว่าฉันเปิดสคริปต์ใหม่ ในรูปแบบต่างๆโดยไม่มีผลใด ๆ

— Drkawashima

4

ในฐานะที่เป็นบันทึกด้านข้างหากคุณ prettify จากนั้นคัดลอกและวางกลับไปที่ไฟล์ต้นฉบับไฟล์นั้นจะเป็นไฟล์ต้นฉบับที่ปรับแต่งแล้วซึ่งสามารถแก้ไขได้

— Eoin

2

@Eoin มหัศจรรย์! นั่นเป็นเคล็ดลับทั้งหมด และด้วยฟังก์ชัน "Local Overrides" จึงทำงานได้อย่างสมบูรณ์แบบ ขอบคุณสำหรับคำใบ้ :-)

— Xan-Kun Clark-Davis

52

คุณสามารถแก้ไขจาวาสคริปต์ในเครื่องมือสำหรับนักพัฒนาบนแท็บ "แหล่งที่มา" แต่จะอนุญาตให้คุณแก้ไขจาวาสคริปต์ในไฟล์ของตัวเองเท่านั้น สคริปต์ที่ฝังอยู่ในไฟล์ HTML (หรือ PHP) จะยังคงเป็นแบบอ่านอย่างเดียว

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

4

ฉันใช้ chrome บน linux และยังไม่สามารถแก้ไข javascript ได้แม้ว่าจะเป็นไฟล์. js ไฟล์เดียวก็ตาม

— roopunk

2

หมายเหตุที่น่าสนใจเล็กน้อย: การเปิด / ปิด Pretty Print (ไอคอน "{}") จะเปิดใช้งานการแก้ไข js ที่ฝังไว้ แต่การเปลี่ยนแปลงจะไม่ส่งผลใด ๆ ดังนั้นจึงยังไม่ใช่สิ่งที่เรากำลังมองหา (Chrome 29)

— Patrick

นั่นคือสิ่งที่ฉันต้องรู้ ขอบคุณ.

— geeves

29

มีข้อ จำกัด บางประการ:

ต้องเป็นไฟล์ JS ไม่สามารถฝังแท็กในหน้า html
ไม่สามารถกำหนดไว้ล่วงหน้าได้

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

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

— Erhhung

ฉันแทบจะบ้าเพราะไฟล์ใหม่นี้ฝัง js ไว้ แต่ฉันไม่สามารถแก้ไขได้ .. ฉันไม่เข้าใจว่าทำไม .. ขอบคุณ #gcb และ #welah

— carinlynchin

เป็นไปได้ไหมที่จะยกเลิกการรวมไฟล์ JS จากรายการภายใต้Sourcesแท็บของเครื่องมือสำหรับนักพัฒนา

— techie_28

@ techie_28 ไม่แน่ใจเปิดคำถามอื่น แต่ฉันจะเขียนส่วนขยายอย่างรวดเร็วสำหรับสิ่งนั้น

— gcb

13

ฉันไม่รู้ว่าคุณต้องการสิ่งนี้เพื่อบันทึกอย่างถาวรหรือไม่ แต่ถ้าคุณต้องการเพียงแค่แก้ไข js ชั่วคราว:

ฉันสามารถคัดลอกจาวาสคริปต์ที่ฉันต้องการแก้ไขลงในโปรแกรมแก้ไขข้อความแก้ไขแล้ววางลงในคอนโซลและจะกำหนดฟังก์ชันใหม่หรืออะไรก็ตามที่ฉันต้องการกำหนดใหม่

ตัวอย่างเช่นหากหน้ามี:

<script>
var foo = function() { console.log("Hi"); }
</script>

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

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

และมันจะได้ผลสำหรับฉัน

หรือถ้าคุณชอบ

function foo() {
    doAThing();
}

คุณสามารถป้อน

function foo() {
    doSomethingElse();
}

และ foo จะถูกกำหนดใหม่

อาจไม่ใช่วิธีแก้ปัญหาที่ดีที่สุด แต่ก็ใช้ได้ผล จะใช้งานได้จนกว่าคุณจะโหลดหน้านี้ซ้ำ

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

5

ฉันค้นหา "chrome dev tool edit javascript" หน้านี้เป็นผลการค้นหาแรก แต่มันล้าสมัยเกินไปก็ไม่ได้ช่วยอะไรฉัน

ฉันใช้ Chrome 73 Chrome เวอร์ชันนี้มีตัวเลือก "Enable Local Overrides" เมื่อใช้ฟังก์ชันนี้ฉันสามารถแก้ไขจาวาสคริปต์และสามารถเรียกใช้และแก้ไขข้อบกพร่องได้

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