Is there a way to locate the position in the original JavaScript file using the position in the minified file and sourcemap file through programming?

When I have the files script.js (original), script.minified.js (minified), and script.minified.js.map (source map), how can I determine the position in the original file based on a random position in the minified file using the source map file?

For instance:

If I have a position in the minified file such as script.minified.js:100:30 (indicating the 100th line and 30th column in the minified file)

What I want to retrieve:

The corresponding position in the original file like script.js:200:30 (meaning it's the 200th line and 30th column in the original file)

An example pseudo function would be:

getOriginalPositionFromMinifiedPosition(minifiedJs, originalJs, sourceMapFile, row, column)
returns [originalRow, originalColumn]

There was a similar question asked but unfortunately left unanswered here Google Chrome: how to find original line from minified line using a source map?

javascriptsource-maps

Answer №1

Great news! I stumbled upon a fantastic tool called https://github.com/sokra/source-map-visualization that precisely matches positions in minified and original files. Although I was aware of this tool previously, I had not realized it offered this feature.

In addition, I just discovered another tool similar to the first one but with less code. Surprisingly, it performs even better with larger source maps when compared to the earlier project. https://github.com/evanw/source-map-visualization

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

Guide on launching a Firefox browser through Selenium 3.6.0 with a different profile in JavaScript

How can I customize the Firefox browser settings in selenium-webdriver 3.6.0 for automated testing? I need Firefox to download files without prompting and save them to a specific directory. For Google Chrome, the approach is as follows: if (this.bName == ...

javascriptfirefoxselenium-webdriver

What is the best way to transfer a property-handling function to a container?

One of the main classes in my codebase is the ParentComponent export class ParentComponent extends React.Component<IParentComponentProps, any> { constructor(props: IParentComponent Props) { super(props); this.state = { shouldResetFoc ...

javascriptreactjstypescript

Combine HTMLPlugin with react-chartjs-2 version 4

I'm attempting to implement a customized Label using a plugin with react-chartjs-2. Here are the versions I am currently using "chart.js": "^3.9.1", "react-chartjs-2": "^4.3.1", "chartjs-plugin-datalabels& ...

javascriptreactjschartspluginsreact-chartjs-2

Accordion in Bootstrap 5.3 behaving independently of data-bs-parent

I am currently working on designing an accordion feature where the headers are displayed in a column on the left side, and when expanded, the content appears in a column on the right side. Everything is working perfectly except for the fact that I have t ...

javascriptcssdjangobootstrap-5

Build React separately with embedded fonts included

My React JS project currently utilizes Google Fonts through URL imports in SASS files, but now I need to create a version that can be used on a standalone local network without internet access. This means the fonts must be included within the project. I a ...

javascriptreactjssassfonts

Automatically synchronize dynatable with AJAX requests and JSON responses

I'm currently facing a bit of confusion as my code appears to be functioning properly, but the table is not updating as expected. xD I am fetching data from my database and loading it into a table, aiming for it to automatically update every three se ...

javascriptphphtmlajaxjson

Manipulate image position with touchmove event using CSS3 transformations on an iPad

Looking to adjust the position of an image on my iPad3, but running into some difficulties. The movement isn't as smooth as desired and seems to lag behind the gestures being made. This is what I have so far (a 3MB base64 image) <img src="data:i ...

javascriptperformanceipadcsstransform

Tips for resolving the [vue/no-use-v-if-with-v-for] warning in Vue

I am encountering an issue with a div element that supports v-for and v-if. The output is correct, however, there is a warning that I find quite annoying: [vue/no-use-v-if-with-v-for] The 'prit_type_ids' variable inside the 'v-for' dir ...

javascriptvue.jsfrontendbackendvue-cli-3

I am looking to eliminate an object from an array based on the object's unique identifier

I am facing an issue with filtering an object based on the id in order to remove it from the array. The filter function I am using is not working as expected. My goal is to only remove the object that matches the provided id, while sending the remaining ...

javascriptreactjs

A step-by-step guide on generating orders and order line items in Odoo with the help of Node.js

Struggling to create orders and add order-lines to the odoo database? Getting stuck with an error message faultString: ('The requested operation ("create" on "Sales Order" (sale.order)) was rejected because of the following rules:\\n\&b ...

javascriptpythonnode.jsodooodoo-10

Enhancing the Bootstrap container using JavaScript

I am working with a Bootstrap container: <div class="container"> <div class="jumbotron"> <div class="row"> <div class="col-lg-8"> <form action="upl ...

javascriptphpwebbootstrap-4

What is the best way to add a bootstrap file to my ejs templates?

I recently installed bootstrap using npm with the command 'npm -bootstrap@3'. However, when attempting to include the bootstrap.min.css file from node_modules in my application, I encountered an error message on my console. Here is a screenshot o ...

javascriptcssnode.jstwitter-bootstrapejs

Troubleshooting problems with AJAX call in custom validation for Knockout JS

I have created a custom validation function that checks whether a zip code entered in a form field is valid for the selected state from a dropdown. The validation works correctly when I initially select a state and then input a zip code, but if I change th ...

javascriptajaxvalidationknockout.js

Ways to avoid an infinite loop caused by onAuthStateChanged Firebase Authentication

I have a provider setup that initializes the authentication context from Firebase Auth. Everything is working well, but when I tried to introduce persistence by adding an observer with onAuthStateChanged, it caused an infinite loop. Despite including an u ...

javascriptreactjs

Exploring the topic of AngularJS unit testing and working with httpBackend timeouts

I have experience in the testing world, particularly with TDD using tools like mocha, sinon, chai, and nodejs. Recently, I've been finding AngularJS testing a bit challenging to grasp and implement. Currently, I am trying to test the simplest method ...

javascriptangularjsunit-testing

I aim to prevent users from liking a post multiple times within Firebase

I came up with this code snippet to implement the Like functionality: /*Incrementing by 1 every time a user submits a like*/ db.collection("post").doc(postId).update({ likes: increment }) /*Collecting the UID of the user who submitted the l ...

javascriptreactjsfirebasegoogle-cloud-firestore

A guide to implementing the map function on Objects in Stencil

Passing data to a stencil component in index.html <app-root data="{<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d4d7d6f5d2d8d4dcd99bd6dad8">[email protected]</a>, <a href="/cdn-cgi/l/email-pro ...

javascriptstenciljs

Conceal the menu on jQuery click event anywhere on the page

There is a button on my interface that, when clicked, opens a menu. The button appears blue when selected and the menu opens, but when a menu item is chosen, the menu closes and the button returns to its original state. However, my problem arises when I ...

javascriptjqueryhtmlevents

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

javascriptcssreactjsreact-native

In Chrome, there is a flicker in the jQuery animated fade out before the callback function is triggered

I created a small feature that allows users to click on a text element, causing it to animate and fly to a specific location before disappearing. Check out this demo of the functionality. Below is the code snippet from the click handler (written in coffe ...

javascriptjquerygoogle-chromecoffeescript