untuk apa file .map digunakan dalam Bootstrap 3.x?

443

Ada dua file yang disertakan dalam CSSfolder dengan ekstensi file .map. Mereka:

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

Mereka tampaknya file yang diperkecil tapi saya tidak tahu untuk apa mereka.

twitter-bootstrap-3 source-maps wetjosh
sumber

Jawaban:

448

Dari Bekerja dengan preprosesor CSS di Chrome DevTools :

Banyak pengembang menghasilkan style sheet CSS menggunakan preprocessor CSS, seperti Sass, Less, atau Stylus. Karena file CSS dihasilkan, mengedit file CSS secara langsung tidak membantu.

Untuk preprosesor yang mendukung peta sumber CSS, DevTools memungkinkan Anda mengedit langsung file sumber preprosesor di panel Sumber, dan melihat hasilnya tanpa harus meninggalkan DevTools atau menyegarkan halaman. Saat Anda memeriksa elemen yang gayanya disediakan oleh file CSS yang dihasilkan, panel Elemen menampilkan tautan ke file sumber asli, bukan file .css yang dihasilkan.

Steve Jansen
sumber
11
Jawaban ini menjelaskan bahwa mereka digunakan bersama dengan preprosesor CSS - sesuatu yang belum banyak saya jelajahi. Terima kasih
wetjosh
21
Kedengarannya seperti ini analog dengan simbol debug dalam bahasa pemrograman, bukan?
Chris Simmons
1
saya mendapatkan kesalahan js, jadi saya membuat file palsu di direktori itu, untuk menghentikan kesalahan menampilkan.
3
@IssaFarax Anda dapat menonaktifkan memuat peta sumber melalui pengaturan alat ChromeDev. Buka DevTools> Klik gear pengaturan> Hapus centang Aktifkan peta sumber (JavaScript | CSS)
Giles Wells
Anda juga dapat ref: stackoverflow.com/questions/21766880/…
Vivek Panday
173

Jika Anda hanya ingin menghilangkan kesalahan, Anda juga dapat menghapus baris ini di bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */
LeonardChallis
sumber
52
Atau hanya hash #dan itu akan berubah menjadi komentar sederhana, jika Anda ingin kembali nanti.
givanse
1
Jika kita menghapus itu dari bootstrap.css, apakah itu menyebabkan kesalahan atau hal-hal semacam itu?
Harry Suren
4
Tidak, tidak. Itu hanya membuatnya lebih sulit untuk di-debug.
Gfra54
1
Anda tidak ingin ini untuk lingkungan produksi, jadi kompilasi sesuai itu ( gulp --productionjika Anda menggunakan tegukan, ini tidak akan termasuk baris sourceMapping) dan mengecualikan file * .map dari unggahan Anda ke server produksi.
Curvian Vynes
2
Kesalahan apa? Pertanyaannya tidak menyebutkan kesalahan.
bluenote10
70

Ini adalah peta sumber. Berikan ini di samping file sumber terkompresi; alat pengembang seperti yang ada di Firefox dan Chrome akan menggunakannya untuk memungkinkan debugging seolah-olah kode tidak dikompresi.

davidisme
sumber
9

Bootstrap css dapat dihasilkan oleh Less. Tujuan utama file peta digunakan untuk menautkan kode sumber css ke kode sumber lebih sedikit di alat dev krom. Seperti yang biasa kami lakukan. Jika kami memeriksa elemen di alat dev chrome. Anda dapat melihat kode sumber css. Tetapi jika menyertakan file peta di halaman dengan file css bootstrap. Anda dapat melihat lebih sedikit kode yang berlaku untuk gaya elemen yang ingin Anda periksa.

Joe.wang
sumber
8

Pernahkah Anda mendapati diri Anda berharap dapat membuat kode sisi klien Anda dapat dibaca dan lebih penting lagi dapat ditiadakan bahkan setelah Anda menggabungkan dan memperkecilnya, tanpa memengaruhi kinerja? Nah sekarang Anda bisa melalui keajaiban peta sumber.

Artikel ini menjelaskan Source Maps menggunakan pendekatan praktis.

Marcio Mazzucato
sumber
5

Apa itu file peta CSS?

Ini adalah file format JSON yang menautkan file CSS ke file sumbernya, biasanya, file yang ditulis dalam preprosesor (yaitu, Less, Sass, Stylus, dll.), Ini untuk melakukan debug langsung ke file sumber dari web browser.

Apa itu preprocessor CSS? Contoh: Sass, Kurang, Stylus

Ini adalah alat penghasil CSS yang menggunakan kekuatan pemrograman untuk menghasilkan CSS dengan kuat dan cepat.

Shadi Namrouti
sumber
1
Haruskah mereka diperlakukan sebagai file teks, atau stream byte? Haruskah mereka berakhir \n?
Aaron Franke
@ AaronFranke Mereka adalah file teks. Saya sarankan Anda menyalin konten file .map dan menempelkannya di jsonblob.com untuk melihat pasangan kunci / nilai JSON
Shadi Namrouti
-1

Jika Anda bertanya-tanya mengapa Anda kehilangan file peta dengan Bootstrap 3.x; pastikan Anda telah menginstal versi yang benar. Saya harus memuat 3.3.7 untuk mendapatkan efek yang diinginkan yang saya cari.

Kakak
sumber