các tệp .map được sử dụng trong Bootstrap 3.x là gì?


443

Có hai tệp được bao gồm trong CSSthư mục có phần mở rộng tệp .map. Họ đang:

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

Chúng dường như là các tệp được thu nhỏ nhưng tôi không biết chúng dùng để làm gì.

Câu trả lời:


448

Từ làm việc với các bộ tiền xử lý CSS trong DevTools của Chrome :

Nhiều nhà phát triển tạo các biểu định kiểu CSS bằng cách sử dụng bộ tiền xử lý CSS, chẳng hạn như Sass, Less hoặc Stylus. Bởi vì các tệp CSS được tạo, việc chỉnh sửa trực tiếp các tệp CSS không hữu ích.

Đối với các bộ tiền xử lý hỗ trợ bản đồ nguồn CSS, DevTools cho phép bạn chỉnh sửa trực tiếp các tệp nguồn tiền xử lý trong bảng Nguồn và xem kết quả mà không phải rời DevTools hoặc làm mới trang. Khi bạn kiểm tra một phần tử có kiểu được cung cấp bởi tệp CSS được tạo, bảng Thành phần sẽ hiển thị một liên kết đến tệp nguồn gốc, chứ không phải tệp .css được tạo.


11
Câu trả lời này giải thích rằng chúng được sử dụng cùng với các bộ tiền xử lý CSS - điều mà tôi chưa khám phá nhiều. Cảm ơn
wetjosh

21
Nghe có vẻ như đây là những biểu tượng khó hiểu để gỡ lỗi trong một ngôn ngữ lập trình, phải không?
Chris Simmons

1
Tôi đã nhận được lỗi js, vì vậy tôi đã tạo một tệp giả mạo trong thư mục đó, để ngăn lỗi hiển thị.

3
@IssaFarax Bạn có thể tắt tải bản đồ nguồn thông qua cài đặt công cụ ChromeDev. Mở DevTools> Nhấp vào thiết bị cài đặt> Bỏ chọn bản đồ nguồn Bật (JavaScript | CSS)
Giles Wells

bạn cũng có thể tham khảo: stackoverflow.com/questions/21766880/ từ
Vivek Panday

173

Nếu bạn chỉ muốn thoát khỏi lỗi, bạn cũng có thể xóa dòng này trong bootstrap.css:

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

52
Hoặc chỉ là hàm băm #và nó sẽ biến thành một nhận xét đơn giản, trong trường hợp bạn muốn nó trở lại sau.
givanse

1
Nếu chúng ta loại bỏ nó khỏi bootstrap.css, nó có gây ra bất kỳ lỗi hoặc loại điều gì không?
Harry Suren

4
Không, nó không. Nó chỉ làm cho nó khó khăn hơn để gỡ lỗi.
Gfra54 7/2/2015

1
Bạn không muốn điều này cho môi trường sản xuất, vì vậy hãy biên dịch nó cho phù hợp ( gulp --productionnếu bạn sử dụng gulp, điều này sẽ không bao gồm dòng sourceMapping đó) và loại trừ các tệp * .map khỏi tải lên của bạn đến máy chủ sản xuất.
Curvian Vynes

2
Lỗi gì? Câu hỏi không đề cập đến một lỗi.
bluenote10

70

Đây là những bản đồ nguồn. Cung cấp chúng cùng với các tệp nguồn nén; các công cụ dành cho nhà phát triển như Firefox và Chrome sẽ sử dụng chúng để cho phép gỡ lỗi như thể mã không được nén.


9

Css bootstrap có thể được tạo bởi Ít. Mục đích chính của tệp bản đồ được sử dụng để liên kết mã nguồn css với mã nguồn ít hơn trong công cụ chrome dev. Như chúng ta đã từng làm. Nếu chúng ta kiểm tra phần tử trong công cụ chrome dev. bạn có thể xem mã nguồn của css. Nhưng nếu bao gồm tệp bản đồ trong trang với tệp css bootstrap. bạn có thể thấy ít mã hơn áp dụng cho kiểu phần tử bạn muốn kiểm tra.


8

Bạn đã bao giờ thấy mình muốn bạn có thể giữ mã phía máy khách của bạn có thể đọc được và quan trọng hơn là có thể gỡ lỗi ngay cả sau khi bạn kết hợp và rút gọn nó, mà không ảnh hưởng đến hiệu suất? Bây giờ bạn có thể thông qua sự kỳ diệu của bản đồ nguồn.

Bài viết này giải thích Bản đồ nguồn bằng cách sử dụng một cách tiếp cận thực tế.



5

Tệp bản đồ CSS là gì?

Đó là một tệp định dạng JSON liên kết tệp CSS với các tệp nguồn của nó, thông thường, các tệp được viết bằng các bộ tiền xử lý (ví dụ: Ít hơn, Sass, Bút stylus, v.v.), đây là để gỡ lỗi trực tiếp cho các tệp nguồn từ web trình duyệt.

CSS tiền xử lý là gì? Ví dụ: Sass, Ít hơn, Bút stylus

Nó là một công cụ tạo CSS sử dụng sức mạnh lập trình để tạo CSS mạnh mẽ và nhanh chóng.


1
Chúng nên được coi là tệp văn bản, hoặc luồng byte? Họ có nên kết thúc \n?
Aaron Franke

@AaronFranke Chúng là các tệp văn bản. Tôi khuyên bạn nên sao chép nội dung của tệp .map và dán nó vào jsonblob.com để xem các cặp khóa / giá trị JSON
Shadi Namrouti

-1

Nếu bạn đang tự hỏi tại sao bạn lại thiếu các tệp bản đồ với Bootstrap 3.x; đảm bảo bạn đã cài đặt phiên bản chính xác. Tôi đã phải tải 3.3.7 để có được hiệu ứng mong muốn mà tôi đang tìm kiếm.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.