L
L
LB7772015-03-09 15:08:51
JavaScript
LB777, 2015-03-09 15:08:51

How to debug javascript using map file in PHPStorm/WebStorm/IntelliJ IDEA?

For file compression, I use UglifyJS, which can create a map file for debugging.
The File Watchers configuration arguments say:

$FileName$ -o $FileNameWithoutExtension$.min.js --source-map $FileNameWithoutExtension$.map --source-map-root http://flexbox.zz/js/

fd7ee96154dc440b9a209af9f4042e0a.jpg
The flexbox.zz domain is a local domain created by OpenServer and is defined in the IDE debugger settings.
Accordingly, Google Chrome is configured to detect a .map file.
4d08a60bc2d74bd7a119188925fa255f.jpg
The app.min.js file is included with the site, and the app.js file comes from the .map file.
But when the debugger is launched in the IDE, breakpoints are not processed, the IDE sees only the chrome console and only what appeared there at the time the site was loaded. Those. subsequent events (when the button is clicked) are not output to the IDE debugger console.
ec314af642cf4fd9979922ee984ff10b.jpg4303fb3a12a84351ad3442a196f67ed3.jpg
How to set up PHPStorm/WebStorm/IntelliJ IDEA , .map, UglifyJS, GoogleChrome so that the IDE can track breakpoints on the site through a map file?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question