Clion: Debug Vue mappings not working correctly / breakpoints not copied

Hello,

I am trying to debug my Vue application with CLion. This works ok, but the breakpoints are not copied to the Chrome instance. And the mappings are also not always working correctly. Probably that's the same issue.

CLion 2025.2.4
Archlinux
Browser: google-chrome-stable
Node interpretor from CLion: 22.21.1 / npm 10.9.4

npm configuration: `run serve` without other arguments, node options or environment variables. Browser / Live Edit: Browser Chrome starts after launch with JavaScript debugger.
JavaScript Debug configuration: Browser is set correctly, `Ensure breakpoints are detected when loading scripts` is set. And `Activate tool window`. 
When clicking on the dots behind `Browser`, I enabled `For HTML files` and enabled `Allow unsigned requests`.

With Archlinux, the breakpoints that are set are not sent to Chrome. Earlier, the debugging lines were off as well, so when I added `debugger;` in the code, that was hit and I could debug through the code (stepping in the browser Developer Tools and in Clion vue files). However, it did step through the html part in CLion, instead of the javascript (in the browser it worked well, but line 54 in the browser is not the same as line 54 in the vue files, so it stepped through the template part of the vue file instead of the js code). This is magically working now (not sure why), because it now opens a new file `app.something.hot-update.js`, which it didn't do before. But still, I can not set breakpoints in my code which are then also set in the browser.

With the same settings I can debug normally with Ubuntu, and the breakpoints are recognized. 

 

Any idea what can cause this?

0
3 comments

It looks like a problem with sourcemaps. Such problems are usually not OS-specific, not sure what is going on.

Would it be possible to collect the log files after reproducing the issue and share them in a new youtrack ticket as the initial troubleshooting step?
Logs can be collected with the Help > Collect Logs and Diagnostic Data menu action.
 

0

Which log do you need? So I can clean it up a bit with removing names from a customer's project.

0

The idea.log mostly; a video recording of the issue would be also helpful.

0

Please sign in to leave a comment.