9

Ben WebStorm aşağıdaki yapılandırma ayarı: Ben hata ayıklama tıkladığınızdaKesme noktaları JavaScript hata ayıklama için ulaşmıyorsanız

enter image description here

üzerinde Chrome ince başlattı ve sayfaya gider, ama benim kırılma noktaları vurmak asla . WebStorm'daki tüm console.log() çıktısını aldığım için bir şekilde bağlı.

Ekran görüntüsünde belirtilen URL'ye gitmeye çalışıyorum ve main.js adresinde kesme noktaları var, ancak beklendiği gibi çalışmıyor (bkz: hiç). Ne eksik olduğumdan tam olarak emin değilim. Uzak URL'ler bölümündeki belirli main.js dosyası için uzak bir URL ayarlamayı denedim, ancak bu da işe yaramadı.

Başvuru için uygulamayı bra run ve npm run watch aracılığıyla çalıştırıyorum.

Hızlı Güncelleme

Yani aslında vurmak için bir kesme noktası almak mümkün oldum ama (farklı yolu) Farklı bir dosyada var:

../public/app/core/routes/dashboard_loaders.ts beni kopma noktalarında durdurmak için izin verir ancak ../public/dashboards yapmıyor. Ben http://localhost:3000/dashboard/script/main.js?orgId=1 gittiğinizde

enter image description here

, bu rotayı vurur:

sonuçta yükünü dosya ../public/dashboards/multi.js yapar
.when('/dashboard/:type/:slug', { 
    templateUrl: 'public/app/partials/dashboard.html', 
    controller : 'LoadDashboardCtrl', 
    reloadOnSearch: false, 
    pageClass: 'page-dashboard', 
    }) 

- ama hiçbir kırılma noktaları vuruluyor.

Daha Güncellemeler

Bu komut dosyası (../public/app/features/dashboard/dashboardLoaderSrv.js olarak) the following command aracılığıyla sunulmaktadır benziyor:

/*jshint -W054 */ 
var script_func = new Function('ARGS','kbn','dateMath','_','moment','window','document','$','jQuery', 'services', result.data); 
var script_result = script_func($routeParams, kbn, dateMath, _ , moment, window, document, $, $, services); 
$routeParams type:script ve slug:main.js olan

- Bu işlevin adım, ben olsun bir Benim gerçek main.js dosya ile aynı anonim (?) dosya, ama isim main.js yerine 43550 gibidir - Ben bu temel bir l kaynamaya olduğunu düşünüyorum JavaScript'in bölümümdeki bir şeyi nasıl ele aldığının bilinmesi. :)

+0

Tarayıcınız IntelliJ ayıklama eklentisi var (ve üstüne bir sarı bayrak olarak mevcut olduğu mu IDE'den hata ayıklamaya çalıştığınızda)? –

+0

Ben sadece sağ tıklayıp 'WebStorm'de inceleme' seçeneğini belirlediğimde görünüyorum - sayfayı yeniden yüklüyor, ancak kesme noktaları hala vurulmuyor (ve WebStorm'da konsol günlüğü durur) – MrDuk

+1

Gerçekten bilmiyorum Sorununuz için kaynak, ancak bir çözüm olarak Chrome hata ayıklayıcısını kullanabilir ve "hata ayıklayıcı" yazabilirsiniz. Javascript kodunuzda ve geliştirme araçları açıksa Chrome bu noktada kırılacaktır. WebStorm-hata ayıklayıcısını [uyarı ve hatalar için uygun renklendirme] kullandığından daha çok beğendim (https://stackoverflow.com/questions/32330022/webstorm-debugging-with-chrome-best-workflow-with-useful-console -ve sertleşen-b). – Compufreak

cevap

0

Düzenleme: Bunu buldum issue for using webstorm with grafana (ikinci düzenleme) gibi görünüyor. Bağlantının ne olduğunu bir sourceUrl bildirerek çözdüğünü düşünüyorum, o zaman dosyanız "anonim" değil, daha dinamik.

//# sourceURL=filename.js 

yani

//# sourceURL=main.js 


Referans How to debug dynamically loaded JavaScript (with jQuery) in the browser's debugger itself?

İşte her şeyin doğru kurulduğundan yapmak WebStorm içinde hata ayıklamayı belgeler ve video.(I.E Varsayılan ayarım projem yerine dizin dosyamda hata ayıklamaktı). Eğer olduğundan emin olun onların Chrome extension veya Firefox Extension

General JS Debugging in Webstorm

Debugging for Chrome in Webstorm

Debugging for Firefox in Webstorm

Debugging Node.JS in Webstorm

+0

Git sorunlarını inceledikten sonra güncellendi – puppet

İlgili konular