Ruby on Rails, Webpack ve React JS ile Chrome'da tek satırlık kaynak haritaları

inline-source-mapChrome devtools hata ayıklayıcısını kullandığımda Webpack tarafından yapılandırma ayarı kullanılarak oluşturulan kaynak haritaların bir satır kapalı kalmasına neden olan bir sorun yaşıyorum . Webpack, birkaç düzine modülden oluşan birleştirilmiş, küçültülmemiş JavaScript dosyası oluşturmak için bir Ruby on Rails uygulamasının içinde kurulur. Bu modüllerin çoğu ReactJS bileşenleridir ve jsxyükleyici tarafından ayrıştırılır . Webpack'ten elde edilen çıktı daha sonra gemler application.jstarafından oluşturulan diğer bazı JavaScript kitaplıklarıyla birlikte dosyaya eklenir .

Kullandığım zaman eval-source-mapsorun yok. Kullanımıyla ilgili bir şey inline-source-map, satır numaralarının birer birer atılmasına neden olur.

React bileşeni olmayan JavaScript'i incelemek hala bu sorunu yaşıyor, bu yüzden bunun jsx kullanımıyla ilgili olduğunu düşünmüyorum.

— cennet
kaynak

Sanki bir taraf ilk satırı bir satır olarak 0kabul ederken, diğer taraf onu doğru olarak kabul ediyor 1. Sadece bir tanım seçmeniz ve diğer şekilde çalışan herhangi bir şeyin değerini ayarlamanız gerekebilir.

— Carl Smith

Tarayıcının kaynak haritalardaki satır numaraları için kullandığı değeri ayarlamanın bir yolu varsa, bu, sorunu potansiyel olarak çözebilir. Ayrıca o zamandan beri biraz deneme yaptım ve Webpack tarafından oluşturulan JS'yi işleyen Sprockets olmadan Rails'i kullanırken sorun ortadan kalkıyor. Satır numarası yalnızca hem web paketi hem de zincir dişlileri kullanılırken kapalıdır.

— paradasia

Hiçbir fikrim yok. CoffeeScript'in kaynak haritalarını Mozilla'nın kaynak haritası JS kitaplığıyla kullanıyordum. Her şey olması haricinde iyiydi columnaşağıdaki kodda arg çok yüksek 1'de geçirilir: window.onerror = function(message, url, line, column){}. Azaltmak bunu düzeltti. Not: Bu, Chrome'a özeldir, diğer tarayıcılar hakkında bilgim yok.

— Carl Smith

Bu alakalı görünüyor: github.com/plumberjs/plumber-requirejs/commit/… çünkü bu, require.js için problemi çözdü

— justingordon

Sürecin herhangi bir yerine, örneğin bir telif hakkı beyanı gibi bir başlık satırı ekleyebilir misiniz?

— rogierschouten

Chrome'da bir hata oluştu, en son sürümü deneyin, ayrıca web paketi yapılandırmanızda devtool'da farklı kaynak haritaları kullanmayı deneyin, birinin satır içi kaynak haritası için çalışıp çalışmadığını görmek için bunların hepsini deneyin:

satır içi kaynak haritası
ucuz satır içi kaynak haritası

diğer farklı yapılandırmalar için:

ucuz kaynak haritası
ucuz modül kaynak haritası
Cheap-module-eval-kaynak-haritası

webpack yapılandırmasında:

{

...

devtool:'source-map'

...

}

— Agamennon
kaynak