विजुअल स्टूडियो 2017

Question

पर गलत जावास्क्रिप्ट स्रोतमैप मैपिंग मैंने वीएस 2017 पर एक नई परियोजना बनाई है। मैं जेएस फाइलों को बंडल करने के लिए वेबपैक का उपयोग कर रहा हूं। मेरी webpack.config.js फ़ाइल है -

module.exports = { 
    entry: "./app.js", // bundle's entry point 
    output: { 
     path: __dirname + "/dist", // output directory 
     filename: "index_bundle.js" // name of the generated bundle 
    }, 
    devtool: "source-map" 
}; 

मैं दृश्य स्टूडियो से डिबग क्रोम कोशिश कर रहा हूँ। अगर मैं index_bundle.js फ़ाइल पर ब्रेकपॉइंट डाल रहा हूं - यह बहुत अच्छा काम करता है, तो यह ब्रेकपॉइंट पर रुक जाता है और यह इसे सही फ़ाइल पर भी मैप करता है। समस्या तब होता है जब मैं मूल js फ़ाइल पर एक को तोड़ने बिंदु जगह की कोशिश करो। उदाहरण के लिए app.js - यह कोशिश करते हैं और बूटस्ट्रैप 14248a9c8b87e0f9032f फ़ाइल पर ब्रेकप्वाइंट स्थापित करेंगे - जो इसे गलत फ़ाइल। मुझे लगता है कि वीएस को मानचित्र फ़ाइल पढ़ने में समस्या है।

{ 
    "version": 3, 
    "sources": [ "webpack:///webpack/bootstrap 14248a9c8b87e0f9032f", "webpack:///./funcs.js", "webpack:///./app.js" ], 
    "names": [], 
} 

लगता है यह रूप में मूल फ़ाइल पर दबाया रिश्तेदार लाइन पर बूटस्ट्रैप फ़ाइल पर ब्रेकप्वाइंट डाल करने के लिए कोशिश करता है की तरह: यहाँ मैं बनाया नक्शा फ़ाइल है। (उदाहरण के लिए, अगर मैं app.js प्रवेश के साथ नक्शा फाइल पर बूटस्ट्रैप प्रविष्टि स्वैप करने के लिए थे - यह सही जगह में ब्रेकप्वाइंट जगह करने लगता है) (BTW, मैं सब मानचित्र फ़ाइल सामग्री डाल नहीं किया - यह बहुत लंबा है, मैपिंग, स्रोत सामग्री, फ़ाइल और स्रोत रूट प्रविष्टियों को नहीं रखा)

Answer 1

मैं एक समान समस्या से भाग गया, लेकिन हम वेबपैक की बजाय ब्राउज़र का उपयोग कर रहे हैं। मुझे इस सप्ताह बीयूआईएलडी में वीएस2017 देव टीम के डेवलपर से बात करने का अवसर मिला और उन्होंने संकेत दिया कि एक सरल जांच यह सुनिश्चित करना है कि एज डीबगर दृश्य में मूल फाइलें देख सके। यदि ऐसा है, तो स्रोतमैप ठीक से उत्पादित किए जा रहे हैं।

मेरे मामले में, मैं कई मुद्दों था।

gulp.task('build:debug:js', function() { 
    return browserify('./wwwroot/js/site.js', { debug: true }) 
     .transform("babelify", { presets: ["es2015"] }) 
     .transform(stringify, { 
      appliesTo: { includeExtensions: ['.html'] } 
     }) 
     .bundle() 
     .pipe(source('site.min.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({ loadMaps: true })) 
     .pipe(uglify()) 
     .pipe(sourcemaps.write('.', { 
      sourceMappingURL: function(file) { 
       return file.relative + '.map'; 
      } 
     })) 
     .pipe(gulp.dest('./wwwroot/js')) 
     .pipe(connect.reload()); 
}); 

मैं एक का उपयोग किया हुआ:

• browserify
• gulp-sourcemaps
• uglify

मेरे gulp कार्य इस प्रकार देखा: यहाँ टूलसेट मैं उपयोग कर रहा हूँ है gulp-sourcemaps का बहुत पुराना संस्करण (1.7 .1)। यह क्या हुआ यह एक नई लाइन के बजाय मेरी मिनीस्क्रिप्ट जावास्क्रिप्ट फ़ाइल के अंत में स्रोतमैप टिप्पणी का उत्पादन कर रहा था। इसके अतिरिक्त, शाब्दिक पाठ null.map के ठीक बाद दिखाई दिया जिसने ब्राउज़र को स्रोतमैप फ़ाइल को देखने से रोक दिया। एक बार जब मैं नवीनतम gulp-sourcemaps (2.6.0) में अपग्रेड कर लिया, तो यह सुनिश्चित हुआ कि स्रोत की टिप्पणी फ़ाइल की आखिरी पंक्ति पर थी और अंत में null नहीं था।

दूसरी समस्या विजुअल स्टूडियो को यह जानने के लिए मिल रही थी कि स्रोत कहां स्थित हैं। अपने प्रोजेक्ट से देखने के लिए रास्तों इस प्रकार है:

• अनुप्रयोग फ़ोल्डर
  • wwwroot
  • js
    • site.min।js
    • site.min.js.map
    • release_dashboard.js

जब होस्टिंग, जावास्क्रिप्ट /js/site.min.js के लिए जा रहा द्वारा पहुँचा है, नहीं/wwwroot/js/site.min.js। हालांकि, इस समय, sourcemaps निम्नलिखित की तरह देखा:

gulp.task('build:debug:js', function() { 
    return browserify('./wwwroot/js/site.js', { debug: true }) 
     .transform("babelify", { presets: ["es2015"] }) 
     .transform(stringify, { 
      appliesTo: { includeExtensions: ['.html'] } 
     }) 
     .bundle() 
     .pipe(source('site.min.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({ loadMaps: true })) 
     .pipe(sourcemaps.mapSources(function (sourcePath, file) { 
      return sourcePath.replace('wwwroot/', ''); 
     })) 
     .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../' })) 
     .pipe(gulp.dest('./wwwroot/js')) 
     .pipe(connect.reload()); 
}); 

:

{ 
    "version":3, 
    "sources":[ 
    "node_modules/browser-pack/_prelude.js", 
    "wwwroot/js/release-dashboard.html", 
    "wwwroot/js/release-dashboard.js", 
    "wwwroot/js/site.js" 
    ], 
    "names":[], 
    "mappings":"SNIP", 
    "file":"site.min.js" 
} 

इसलिए, मैं यह wwwroot को हटाने और एक निर्देशिका sourceroot ऊपर बात करने के लिए प्राप्त करने के लिए निम्नलिखित घूंट कार्य का इस्तेमाल करना पड़ा

यह एक sourcemap कि ऐसा दिखाई देता उत्पादित:

{ 
    "version":3, 
    "sources":[ 
    "node_modules/browser-pack/_prelude.js", 
    "wwwroot/js/release-dashboard.html", 
    "wwwroot/js/release-dashboard.js", 
    "wwwroot/js/site.js" 
    ], 
    "names":[], 
    "mappings":"SNIP", 
    "file":"site.min.js", 
    "sourceRoot":"../" 
} 

इस के साथ

, क्रोम यह कोई मुद्दा बिना उठाया और इसलिए दृश्य स्टूडियो था!