Bootstrap 3.x'te kullanılan .map dosyaları nelerdir?

443

CSS.Map dosya uzantılarına sahip klasörde iki dosya vardır . Onlar:

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

Dosyaları küçültülmüş gibi görünüyorlar ama ne için olduklarını bilmiyorum.

twitter-bootstrap-3 source-maps

— wetjosh
kaynak

448

Gönderen Chrome Geliştirme Araçları CSS önişlemciler ile Çalışma :

Birçok geliştirici, Sass, Less veya Stylus gibi bir CSS ön işlemcisi kullanarak CSS stil sayfaları oluşturur. CSS dosyaları oluşturulduğundan, CSS dosyalarının doğrudan düzenlenmesi yardımcı değildir.

CSS kaynak eşlemelerini destekleyen ön işlemciler için DevTools, Önişlemci kaynak dosyalarınızı Kaynaklar panelinde canlı olarak düzenlemenize ve DevTools'tan ayrılmanıza veya sayfayı yenilemenize gerek kalmadan sonuçları görüntülemenize olanak tanır. Stilleri oluşturulan bir CSS dosyası tarafından sağlanan bir öğeyi incelediğinizde, Öğeler paneli, oluşturulan .css dosyasına değil, orijinal kaynak dosyaya bir bağlantı görüntüler.

— Steve Jansen
kaynak

11

Bu cevap, CSS ön işlemcileri ile birlikte kullanıldığını açıklıyor - henüz çok fazla araştırmadım. Teşekkürler

— wetjosh

21

Bunlar bir programlama dilinde sembollerin hatalarını ayıklamaya benzer , değil mi?

— Chris Simmons

1

i js hatası alıyordum, bu yüzden hatayı gösteren durdurmak için bu dizinde sahte bir dosya yaptı.

3

@IssaFarax ChromeDev araçları ayarlarından kaynak eşlemelerin yüklenmesini devre dışı bırakabilirsiniz. DevTools'u açın> Ayarlar dişli çark simgesini tıklayın> Kaynak haritalarını etkinleştir (JavaScript | CSS) işaretini kaldırın

— Giles Wells

ayrıca başvurabilirsiniz: stackoverflow.com/questions/21766880/…

— Vivek Panday

173

Sadece hatadan kurtulmak istiyorsanız, şu satırı da silebilirsiniz bootstrap.css:

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

— LeonardChallis
kaynak

52

Ya da sadece karma #ve daha sonra tekrar isterseniz, basit bir yoruma dönüşecektir.

— givanse

1

Bunu kaldırırsak, bootstrap.cssherhangi bir hataya ya da bir şeylere neden olur mu?

— Harry Suren

4

Hayır. Hata ayıklamayı zorlaştırır.

— Gfra54

1

Bunu üretim ortamı için istemezsiniz, bu nedenle uygun şekilde derleyin ( gulp --productiongulp kullanıyorsanız, bu sourceMapping satırını içermez) ve * .map dosyalarını yüklemelerinizden üretim sunucusuna hariç tutun.

— Curvian Vynes

2

Ne hatası? Soru bir hatadan bahsetmiyor.

— bluenote10

70

Bunlar kaynak haritalar. Bunları sıkıştırılmış kaynak dosyalarıyla birlikte sağlayın; Firefox ve Chrome gibi geliştirici araçları bunları kod sıkıştırılmamış gibi hata ayıklamaya izin vermek için kullanır.

— davidism
kaynak

9

Bootstrap css, Less tarafından oluşturulabilir. Eşleme dosyasının temel amacı, css kaynak kodunu chrome dev aracında daha az kaynak koduna bağlamaktır. Eskiden yaptığımız gibi. Chrome dev aracındaki öğeyi incelersek. css kaynak kodunu görebilirsiniz. Ancak harita dosyasını bootstrap css dosyasıyla sayfaya ekleyin. incelemek istediğiniz öğe stiline uygulanan daha az kodu görebilirsiniz.

— Joe.wang
kaynak

8

Kendinizi, müşteri tarafı kodunuzu, performansı etkilemeden birleştirip küçültüldükten sonra bile okunabilir ve daha önemli bir şekilde hata ayıklayabileceğinizi düşündünüz mü? Artık kaynak haritaların büyüsü ile yapabilirsiniz.

Bu makalede Kaynak Haritalar pratik bir yaklaşım kullanılarak açıklanmaktadır.

— Marcio Mazzucato
kaynak

5

Bu dosyaları (benim gibi) aramaya gelen herkes için genellikle .mapURL'nin sonuna ekleyerek bu dosyaları bulabilirsiniz :

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

Sürümü, kullandığınız Bootstrap sürümüyle değiştirdiğinizden emin olun.

— Travis Heeter
kaynak

5

CSS harita dosyası nedir?

CSS dosyasını kaynak dosyalarına bağlayan bir JSON format dosyasıdır, normalde önişlemcilere yazılan dosyalar (yani, Less, Sass, Stylus, vb.), Bu web'den kaynak dosyalara canlı bir hata ayıklama yapmak içindir tarayıcı.

CSS ön işlemcisi nedir? Örnekler: Sass, Less, Stylus

CSS'yi güçlü ve hızlı bir şekilde üretmek için programlama gücünü kullanan bir CSS jeneratör aracıdır.

— Shadi Namrouti
kaynak

1

Metin dosyaları veya bayt akışları olarak mı işlem görmeli? Onlar bitmeli \nmi?

— Aaron Franke

@AaronFranke Bunlar metin dosyalarıdır. Bir .map dosyasının içeriğini kopyalamanızı ve JSON anahtar / değer çiftlerini görmek için jsonblob.com'a yapıştırmanızı öneririm

— Shadi Namrouti

-1

Bootstrap 3.x ile harita dosyalarını neden kaçırdığınızı merak ediyorsanız; doğru sürümün kurulu olduğundan emin olun. Aradığım istenen efekti elde etmek için 3.3.7 yüklemeliydim.

— TheJoe
kaynak