What is the process for creating a sourceMap with WebOptimizer in ASP.NET?

I've encountered a situation in my startup.cs file where I'm implementing the following code snippet

services.AddWebOptimizer(pipeline =>
{
    // bundle .js files
    pipeline.AddJavaScriptBundle("/bundle.js", // creating a bundle file in memory 
                                "/assets/js/jquery-1.12.4.min.js",
                                //"/assets/js/bootstrap-4.3.1.min.js",
                                "/assets/js/crypto-js.4.0.0.min.js",
                                "/assets/js/gijgo.min.js", // causing draggable errors when removed
                                "/assets/js/plugins.js",
                                //"/assets/js/jquery.slicknav.js", // responsible for breaking the footer
                                //"/assets/js/slick.js",
                                //"/assets/js/main.js",
                                "/js/siriwave.umd.js",
                                "/js/dat.gui.js",
                                "/js/speech-bundle.js",
                                "/js/pageLoad.js",
                                "/assets/js/html2canvas.min.js");

    // bundle .css files
    pipeline.AddCssBundle("/bundle.css",
                            //"/assets/css/bootstrap-4.3.1.min.css", // causes css issues when bundled
                            "/assets/css/slicknav.min.css",
                            "/assets/css/flaticon.min.css",
                            "/assets/css/animate.min.css",

I am now looking to enable source maps so that debugging is possible in production or staging environments. Can anyone guide me on how to achieve this? Unfortunately, there seems to be no mention of this feature in the official documentation.

javascriptasp.net-corebundling-and-minificationweboptimizer

Answer №1

After reviewing the source code, we can easily enable sourceMap functionality as shown below.

By default, the value of GenerateSourceMap is set to false.

services.AddWebOptimizer(pipeline =>
{
    // bundle .js files
    pipeline.AddJavaScriptBundle("/bundle.js", 
                                // enabling sourceMap feature
                                new WebOptimizer.Processors.JsSettings { GenerateSourceMap = true },
                                "/assets/js/jquery-1.12.4.min.js",
                                ...);
                                
    // bundle .css files
    pipeline.AddCssBundle("/bundle.css",
                            "/assets/css/slicknav.min.css",
                            "/assets/css/flaticon.min.css",
                            "/assets/css/animate.min.css",
                            ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging an array of objects by their unique identifiers

Given an array of objects containing root and list elements in a tree structure, how can I efficiently organize them into a tree with an unknown depth? Each object has a parent element ID property. I am currently working on building a menu. While I have s ...

javascriptarrays

Is there a way to verify if a value is undefined before including it as an object field?

I'm currently working on an Angular project and I have a query regarding TypeScript. It's about correctly handling the scenario where a field should not be included in an object if its value is undefined. In my code, I am initializing an object ...

javascriptangulartypescriptjavascript-objects

Issues arise when attempting to include a hyphenated '_' attribute to a tag via the assign method within a function

Currently, I am utilizing a function to dynamically generate input-groups based on the number chosen by the user: const tag = (tag, className, props = {}) => Object.assign(document.createElement(tag), {className, ...props}); Everything is function ...

javascriptdombootstrap-4

Looking for a way to include an input box within a react-select option dropdown menu

Currently, I am facing a situation where I need to include an input box within my dropdown option menu. The challenge is that I cannot utilize the custom tag creator feature of react select to create a new option with the dropdown. Upon going through the ...

javascriptreactjstypescriptreact-select

Determining the scroll position of a JQuery Mobile collapsible set upon expansion

I am utilizing jQueryMobile (v1.4.0) collapsible set / accordions to showcase a list of elements along with their content, which can be seen in this jsFiddle. <div id="List" data-role="collapsible-set"> <div data-role="collapsible" data-conte ...

javascriptjquery-mobilemobilescrolljquery-mobile-collapsible

Connecting the value of one input to influence another input

There are two input boxes provided - one for current address and another for permanent address. When the checkbox is clicked, the value of the current address should be displayed in the permanent address box. However, I am facing an issue where when I unc ...

javascriptjqueryangularjs

Error in parsing JSON: An unexpected token < was encountered at the beginning of the JSON input, causing a SyntaxError at position 0 when parsing with

I need to transfer an array from a PHP file to JavaScript and save it in a JavaScript array. Below is the snippet of JavaScript code: xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 ...

javascriptphpjqueryarraysjson

Leveraging jQuery with PHP's POST method

I have limited knowledge in jquery and ajax, but I am in need of a specific functionality on my website. Once users log in successfully, they should be able to download PDF files from the page. There is a collapsible div where users can select which file ...

javascriptphpjquery

handlebars and expressjs having trouble displaying the data

Hey there! I'm currently working on an application with express.js and handlebars. I've set up a get method to retrieve employee data when the user enters http://localhost:3000/id/2 in their browser. The id should be 2, and it's supposed to ...

javascriptnode.jsexpress

Utilizing JQuery and Jade to extract and display information from a Node.js server

I am currently working with the Jade framework for frontend and using Node.js & express for backend development. When rendering a view with data, I am encountering an issue where I can't access this data using JQuery. Below is my service in Node.js ...

javascriptjquerynode.jsexpresspug

Activate the display of a subcategory when the class is modified

For the past couple of days, I've been grappling with this issue. Despite my best efforts, being new to javascript may be hindering my progress. My goal is to create a Side Navigation that highlights the current section you are on. Fortunately, I stu ...

javascriptjqueryhtmlcss

Storing an inner object within a map using Javascript

// Here we have a script that aims to store 3D mesh objects in a map // The problem arises when attempting to access the stored object later this.meshMap = new Object(); // Function to add a mesh to the map using a specified key and URL t ...

javascriptdictionarythree.js

WebpackError: The global object "document" could not be found

I am encountering an issue with my website build using gatsby.js and bulma. While building the site, I receive the following error message: WebpackError: document is not defined The only instance where I use document is for the navbar-burger toggle code ...

javascriptreactjsgatsbybulma

In ReactJS, one can create a variable and include a map function by first declaring the variable and then using the map function within the component. If you

Having trouble integrating the accordian.js page into the app.js main page for compilation. Need help defining and writing out the function correctly, any suggestions? Below is my code: App.js: How do I incorporate the components from the accordian.js pa ...

javascriptreactjsundefined

Wiredep reports that the Bower packages have not been correctly installed

I’ve encountered an issue with my wiredep task: gulp.task('wiredep', function () { log('Installing Bower Components in HTML files...') return gulp .src('./Views/Shared/_Layout.cshtml') .pipe(wiredep( ...

visual-studionpmgulpbowerasp.net-core

Utilize an A-frame conditional statement to check a variable and dynamically display various glTF models depending on its value

Is it possible to use JavaScript and A-frame () to create a scenario like this? I want to have an onload function named load() that will evaluate the value of variable x. If x is equal to one, I want the gltf with the ID of 1 to be visible while hiding th ...

javascripthtmlthree.jsaframewebvr

Curious about the method of refining a list based on another list?

As a beginner in coding, I am facing a challenge in my code.org assignment. I need to filter songs by a specific artist from a dataset. Currently, I have code that randomly selects an artist, but I am struggling to filter out songs by that artist from the ...

javascripthtml

What is the best way to apply margins to a nested div element in relation to its parent div element using CSS?

My Coding Dilemma: #b { width: 700px; height: 150px; margin-top: 10%; margin-left: 20%; text-align: center; border: 2px solid black; } .block { width : 10%; height : 10%; border: 2px solid black; padding: 40px 40px; margin: inheri ...

javascripthtmlcss

Creating an HTTP request inside an Export Function in a MEANJS application

Initially, I utilized the Yo MeanJs generator to kickstart my project. As a newcomer in the world of MeanJs, things are starting to look quite complex for me. Currently, my MeanJs application is supposed to retrieve data from an HTTP request but, unfortun ...

javascriptnode.jsmeanjs

Tips for combining text and variable outcomes in printing

I created a calculator that is functioning correctly and displaying results. However, I would like to include a text along with the results. For example: You spent "variable result" dollars in the transaction. Currently, the results are shown only after ...

javascripthtml