Sourcemaps ออกทีละบรรทัดใน Chrome พร้อม Ruby on Rails, Webpack และ React JS

ฉันมีปัญหาที่ซอร์สแมปที่สร้างโดย Webpack โดยใช้การinline-source-mapตั้งค่าการกำหนดค่าถูกปิดทีละบรรทัดเมื่อฉันใช้ดีบักเกอร์ Chrome devtools Webpack ได้รับการตั้งค่าภายในแอปพลิเคชัน Ruby on Rails เพื่อสร้างไฟล์ JavaScript ที่ต่อกันและไม่รวมกันซึ่งประกอบด้วยโมดูลสองสามโมดูล โมดูลเหล่านั้นส่วนใหญ่เป็นส่วนประกอบของ ReactJS และถูกแยกวิเคราะห์โดยตัวjsxโหลด จากนั้นเอาต์พุตจาก Webpack จะรวมอยู่ในapplication.jsไฟล์พร้อมกับไลบรารี JavaScript อื่น ๆ ที่สร้างโดยอัญมณี

ตอนใช้eval-source-mapก็ไม่มีปัญหา บางอย่างเกี่ยวกับการใช้inline-source-mapสาเหตุที่ทำให้หมายเลขบรรทัดถูกโยนออกไปทีละรายการ

การตรวจสอบ JavaScript ที่ไม่ใช่คอมโพเนนต์ React ยังคงมีปัญหานี้อยู่ดังนั้นฉันไม่คิดว่ามันเกี่ยวข้องกับการใช้ jsx

มีข้อบกพร่องใน chrome ให้ลองใช้เวอร์ชันล่าสุดและในการกำหนดค่า webpack ของคุณให้ลองใช้ซอร์สแมปอื่นบน devtool ลองใช้สิ่งเหล่านี้ทั้งหมดเพื่อดูว่ามีอันใดที่ใช้ได้กับแผนผังแหล่งข้อมูลแบบอินไลน์:

• อินไลน์แหล่งที่มาแผนที่

• ราคาถูกอินไลน์แหล่งแผนที่

สำหรับการกำหนดค่าอื่น ๆ ที่แตกต่างกัน:

• ราคาถูกแหล่งแผนที่

• ราคาถูกโมดูลแหล่งแผนที่

• ราคาถูกโมดูลประเมินแหล่งที่มาแผนที่

บน webpack config:

{

...

devtool:'source-map'

...

}