ไฟล์. map ที่ใช้ใน Bootstrap 3.x คืออะไร?

443

มีไฟล์สองไฟล์ที่รวมอยู่ในCSSโฟลเดอร์ที่มีนามสกุลไฟล์. map พวกเขาคือ:

bootstrap-theme.css.map
bootstrap.css.map

ดูเหมือนว่าจะเป็นไฟล์เล็ก แต่ฉันไม่รู้ว่ามันมีไว้เพื่ออะไร

twitter-bootstrap-3 source-maps

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

448

จากการทำงานกับตัวประมวลผลล่วงหน้า CSS ใน Chrome DevTools :

นักพัฒนาหลายคนสร้างสไตล์ชีต CSS โดยใช้ตัวประมวลผลล่วงหน้า CSS เช่น Sass, Less หรือ Stylus เนื่องจากไฟล์ CSS ถูกสร้างขึ้นการแก้ไขไฟล์ CSS โดยตรงจึงไม่เป็นประโยชน์

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

— Steve Jansen
แหล่งที่มา

11

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

— wetjosh

21

ดูเหมือนว่านี่คือสัญญาณที่ดีในการดีบักสัญลักษณ์ในภาษาการเขียนโปรแกรมใช่ไหม?

— Chris Simmons

1

ฉันได้รับข้อผิดพลาด js ดังนั้นฉันจึงสร้างไฟล์ปลอมในไดเรกทอรีนั้นเพื่อหยุดข้อผิดพลาดจากการแสดง

3

@IssaFarax คุณสามารถปิดการโหลดแผนที่แหล่งผ่านการตั้งค่าเครื่องมือ ChromeDev เปิด DevTools> คลิกที่เฟืองการตั้งค่า> แผนที่แหล่ง Uncheck Enable (JavaScript | CSS)

— Giles Wells

คุณสามารถอ้างอิง: stackoverflow.com/questions/21766880/…

— Vivek Panday

173

หากคุณต้องการกำจัดข้อผิดพลาดคุณสามารถลบบรรทัดนี้ในbootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */

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

52

หรือเพียงแค่แฮช#และมันจะเปลี่ยนเป็นความคิดเห็นง่ายๆในกรณีที่คุณต้องการกลับมาใหม่ในภายหลัง

— givanse

1

หากเราลบสิ่งนั้นออกจากbootstrap.cssนั้นจะทำให้เกิดข้อผิดพลาดหรือสิ่งใด ๆ

— Harry Suren

4

ไม่เลย มันทำให้การดีบักยากขึ้น

— Gfra54

1

คุณไม่ต้องการสิ่งนี้สำหรับสภาพแวดล้อมการผลิตดังนั้นให้รวบรวมตามนั้น ( gulp --productionถ้าคุณใช้อึกนี่จะไม่รวมบรรทัดซอร์สแมปนั้น) และไม่รวมไฟล์ * .map จากการอัพโหลดของคุณไปยังเซิร์ฟเวอร์การผลิต

— Curvian Vynes

2

ข้อผิดพลาดอะไร คำถามไม่ได้กล่าวถึงข้อผิดพลาด

— bluenote10

70

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

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

9

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

— Joe.wang
แหล่งที่มา

8

คุณเคยคิดว่าคุณต้องการให้โค้ดฝั่งไคลเอ็นต์ของคุณสามารถอ่านได้และที่สำคัญกว่านั้นคือ debuggable แม้หลังจากที่คุณรวมและย่อขนาดมันโดยไม่ส่งผลกระทบต่อประสิทธิภาพหรือไม่? ตอนนี้คุณสามารถผ่านความมหัศจรรย์ของแหล่งที่มาของแผนที่

บทความนี้อธิบายแผนที่แหล่งที่มาโดยใช้วิธีการปฏิบัติ

— Marcio Mazzucato
แหล่งที่มา

5

สำหรับทุกคนที่มาที่นี่เพื่อค้นหาไฟล์เหล่านี้ (เช่นฉัน) คุณสามารถค้นหาไฟล์เหล่านี้ได้โดยเพิ่ม.mapที่ส่วนท้ายของ URL:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

ให้แน่ใจว่าได้แทนที่รุ่นด้วย Bootstrap ที่คุณใช้อยู่

— เทรวิส Heeter
แหล่งที่มา

5

ไฟล์แผนที่ CSS คืออะไร?

มันเป็นไฟล์ฟอร์แมต JSON ที่เชื่อมโยงไฟล์ CSS กับไฟล์ต้นฉบับโดยปกติไฟล์ที่เขียนด้วยตัวประมวลผลล่วงหน้า (เช่น Less, Sass, Stylus เป็นต้น) นี่คือการดีบักสดกับไฟล์ต้นฉบับจากเว็บ เบราว์เซอร์

ตัวประมวลผลล่วงหน้า CSS คืออะไร ตัวอย่าง: Sass, Less, Stylus

มันเป็นเครื่องมือสร้าง CSS ที่ใช้พลังการเขียนโปรแกรมเพื่อสร้าง CSS อย่างแข็งแกร่งและรวดเร็ว

— Shadi Namrouti
แหล่งที่มา

1

พวกเขาควรจะถือว่าเป็นไฟล์ข้อความหรือไบต์สตรีม? พวกเขาควรจะจบลงด้วย\n?

— Aaron Franke

@AaronFranke พวกเขาเป็นไฟล์ข้อความ ฉันขอแนะนำให้คุณคัดลอกเนื้อหาของไฟล์. map และวางลงบน jsonblob.comเพื่อดูคู่คีย์ / ค่า JSON

— Shadi Namrouti

-1

หากคุณสงสัยว่าทำไมคุณจึงพลาดไฟล์แผนที่ด้วย Bootstrap 3.x; ตรวจสอบให้แน่ใจว่าคุณติดตั้งรุ่นที่ถูกต้อง ฉันต้องโหลด 3.3.7 เพื่อให้ได้ผลตามที่ฉันต้องการ

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