Debuging javascript - all variables are undefined. Vue/Nuxt/Webpack

Hi!

I tried to debug javascript Nuxt.js app. I am using IntelliJ IDEA Ultimate but other users using WebStorm have the same problems:

  1. Debugger doesn't stop at breakpoints
  2. All variables are undefined. So the debugging is useless.

 

Here is the whole topic on the nuxt github:

https://github.com/nuxt/nuxt.js/issues/1577

 

Any feedback would be very helpful.

 

 

 

15 comments
Comment actions Permalink

Please forget all the instructions from provided link as, well, a nightmare. You'd like to debug your Vue application, not Nuxt itself, right? it just works (tested with basic starter template):

Steps:

 

- create a new JavaScript Debug run configuration, set http://localhost:3000 as URL

- add breakpoints to your .vue files

- run Nuxt with npm run dev (can be done in IDEA using NPM tool window)

- once the application is started, press Debug to debug the configuration above

- when application is loaded, refresh the page to get breakpoints kin code executed on page loading hit

0
Comment actions Permalink

Hi! Thanks for your feedback but it doesn't work.

 

I created clean nuxt project:

vue init nuxt-community/starter-template test-debug
cd test-debug
npm install

 

Than added JavaScript Debug

 

Than started project:

npm run dev

 

Then started Debug:

 

 

But the breakpoints doesn't work :(

 

0
Comment actions Permalink

Did you try refreshing the browser? see my comment above: "when application is loaded, refresh the page to get breakpoints in code executed on page loading hit"

I'd also suggest adding the following mappings:

 

this will make hitting breakpoints more accurate:

0
Comment actions Permalink

Hi Elana,

 

Thanks for your feedback. We are closer to solve it. Thank you!

I added the remote URL, and tagged "Use JB Chrome Extionsion".

Whiteout "Use JB.." it doesn't work.




 

 

Now, when I reload the page the dubegger stops but in the Chrome. No debugger at IDE.

After one step in Chrome Debugger (F10 key), the Debugger in IDE shows up.

 

Some variables are available but not all :( There are no Local Variables, No Watch.

And there is NPE Exception.

 

After I resume the app there are lots of errors on the Chrome console:

 

The Uncaught Natives disabled from the chrome console close up:
up:

 

There are some errors in the IDE too:

When I reload the page (F5) the dubegger doesn't stops any more. I need to restart the dubegger in the IDE.

 

 

 

0
Comment actions Permalink

>I added the remote URL, and tagged "Use JB Chrome Extionsion".

Mapping for pages is wrong on your screenshot (note that extra dot). And, as you can see from my screenshot, I have "Use JB Chrome Extionsion" disabled. What IDEA build do you work with?

>Now, when I reload the page the dubegger stops but in the Chrome. No debugger at IDE.

sorry? Do you have Chrome Dev Tools opened? But, when Chrome extension is used for debugging, it can't work if Dev Tools are active - due to a known Chrome limitation, all attached debug extensions are disconnected once Dev Tools are opened

0
Comment actions Permalink

When I setup mappings as You and hit apply, close configuration, and then open it again IDE changes the mappings. From

 

To:

 

 

 

Then. When I run Debug with disabled "Use JB.." the IDE opens the browser, but the page loading indicator is spinning.

 

The IDE dubugger doesn't stops. The only solution to resume is to open dev console at chrome and resume with F8.

The chrome dev tools was of course closed before this.

There is nothing on the IDE console too:

 

I am using:

 

 

I tried the same with

and it seems to work!!!


 

So the problem is either with IDEA or just with the EAP version. I will do downgrade to the normal release of IDEA and let you know in the evenings.



Thank you for your help

0
Comment actions Permalink

In WebStorm 2017.3 EAP (build 173.2941.6) everything works fine, with and without the extension.

Smth might be broken in IDEA EAP. Will check

0
Comment actions Permalink

Just tried IDEA 173.2941.3 (installed from scratch, all default settings, Vue.js installed) - works like a charm...

looks as if your IDEA setup is somehow broken...

0
Comment actions Permalink

Hi Elena!

In my version when I reload the page I get en error in IDEA:

null
java.lang.NullPointerException
at com.intellij.openapi.projectRoots.impl.RootsAsVirtualFilePointers.getFiles(RootsAsVirtualFilePointers.java:45)
at com.intellij.openapi.projectRoots.impl.ProjectJdkImpl$MyRootProvider.getFiles(ProjectJdkImpl.java:287)
at org.jetbrains.builtInWebServer.DefaultWebServerRootsProviderKt$findInLibrariesAndSdk$2$inSdkFinder$1.invoke(DefaultWebServerRootsProvider.kt:261)
at org.jetbrains.builtInWebServer.DefaultWebServerRootsProviderKt$findInLibrariesAndSdk$2$inSdkFinder$1.invoke(DefaultWebServerRootsProvider.kt)
at org.jetbrains.builtInWebServer.DefaultWebServerRootsProviderKt$findInLibrariesAndSdk$2.invoke(DefaultWebServerRootsProvider.kt:264)
at org.jetbrains.builtInWebServer.DefaultWebServerRootsProviderKt$findInLibrariesAndSdk$$inlined$computeIfAny$lambda$1.compute(actions.kt:71)
at com.intellij.openapi.application.impl.ApplicationImpl.runReadAction(ApplicationImpl.java:939)
at org.jetbrains.builtInWebServer.DefaultWebServerRootsProviderKt.a(DefaultWebServerRootsProvider.kt:299)
at org.jetbrains.builtInWebServer.DefaultWebServerRootsProviderKt.a(DefaultWebServerRootsProvider.kt:236)
at org.jetbrains.builtInWebServer.DefaultWebServerRootsProviderKt.access$findInLibraries(DefaultWebServerRootsProvider.kt:1)
at org.jetbrains.builtInWebServer.DefaultWebServerRootsProvider.resolve(DefaultWebServerRootsProvider.kt:129)
at org.jetbrains.builtInWebServer.WebServerPathToFileManager.doFindByRelativePath$built_in_server(WebServerPathToFileManager.kt:145)
at org.jetbrains.builtInWebServer.WebServerPathToFileManager.getPathInfo(WebServerPathToFileManager.kt:118)
at org.jetbrains.builtInWebServer.WebServerPathToFileManager.findVirtualFile(WebServerPathToFileManager.kt:108)
at org.jetbrains.builtInWebServer.WebServerPathToFileManager.findVirtualFile$default(WebServerPathToFileManager.kt:107)
at com.intellij.javascript.debugger.DebuggableFileFinderImpl.findFileByAuthority(DebuggableFileFinderImpl.kt:96)
at com.intellij.javascript.debugger.DebuggableFileFinderImpl.findFile(DebuggableFileFinderImpl.kt:91)
at com.intellij.javascript.debugger.RemoteDebuggingFileFinder.findFile(RemoteDebuggingFileFinder.kt:87)
at com.intellij.javascript.debugger.JavaScriptDebugProcess.findFile(JavaScriptDebugProcess.kt:280)
at com.intellij.javascript.debugger.JavaScriptDebugProcess.findFile(JavaScriptDebugProcess.kt:526)
at com.intellij.javascript.debugger.JavaScriptDebugProcess.isLibraryFileUsingIndex(JavaScriptDebugProcess.kt:985)
at com.intellij.javascript.debugger.JavaScriptDebugProcess.isLibraryFile(JavaScriptDebugProcess.kt:979)
at com.intellij.javascript.debugger.JavaScriptDebugProcess.isLibraryFile$default(JavaScriptDebugProcess.kt:954)
at com.intellij.javascript.debugger.JavaScriptDebugProcess$MyDebugEventListener.suspended(JavaScriptDebugProcess.kt:724)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at com.intellij.util.EventDispatcher.dispatch(EventDispatcher.java:99)
at com.intellij.util.EventDispatcher.access$200(EventDispatcher.java:35)
at com.intellij.util.EventDispatcher$2.invoke(EventDispatcher.java:79)
at com.sun.proxy.$Proxy119.suspended(Unknown Source)
at org.jetbrains.wip.WipSuspendContextManager.pausedEventDataReceived(WipSuspendContextManager.kt:30)
at org.jetbrains.wip.WipSuspendContextManager$1.invoke(WipSuspendContextManager.kt:20)
at org.jetbrains.wip.WipSuspendContextManager$1.invoke(WipSuspendContextManager.kt:11)
at org.jetbrains.jsonProtocol.EventMap.handleEvent(EventMap.kt:49)
at org.jetbrains.wip.WipCommandProcessor.acceptNonSequence(WipCommandProcessor.kt:64)
at org.jetbrains.wip.WipCommandProcessor.acceptNonSequence(WipCommandProcessor.kt:12)
at org.jetbrains.rpc.MessageManager.processIncoming(MessageManager.kt:91)
at org.jetbrains.wip.WipCommandProcessor.processIncomingJson(WipCommandProcessor.kt:71)
at org.jetbrains.wip.StandaloneWipVm.textFrameReceived(StandaloneWipVm.kt:51)
at com.jetbrains.debugger.wip.WipRemoteVmConnection$connectDebugger$3.textFrameReceived(WipRemoteVmConnection.kt:208)
at org.jetbrains.io.webSocket.WebSocketProtocolHandler.channelRead(WebSocketProtocolHandler.kt:22)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:362)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:348)
at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:340)
at io.netty.handler.codec.MessageToMessageDecoder.channelRead(MessageToMessageDecoder.java:102)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:362)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:348)
at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:340)
at io.netty.handler.codec.MessageToMessageDecoder.channelRead(MessageToMessageDecoder.java:102)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:362)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:348)
at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:340)
at io.netty.handler.codec.ByteToMessageDecoder.fireChannelRead(ByteToMessageDecoder.java:310)
at io.netty.handler.codec.ByteToMessageDecoder.channelRead(ByteToMessageDecoder.java:284)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:362)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:348)
at io.netty.channel.AbstractChannelHandlerContext.fireChannelRead(AbstractChannelHandlerContext.java:340)
at io.netty.channel.DefaultChannelPipeline$HeadContext.channelRead(DefaultChannelPipeline.java:1334)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:362)
at io.netty.channel.AbstractChannelHandlerContext.invokeChannelRead(AbstractChannelHandlerContext.java:348)
at io.netty.channel.DefaultChannelPipeline.fireChannelRead(DefaultChannelPipeline.java:926)
at io.netty.channel.nio.AbstractNioByteChannel$NioByteUnsafe.read(AbstractNioByteChannel.java:134)
at io.netty.channel.nio.NioEventLoop.processSelectedKey(NioEventLoop.java:644)
at io.netty.channel.nio.NioEventLoop.processSelectedKeysOptimized(NioEventLoop.java:579)
at io.netty.channel.nio.NioEventLoop.processSelectedKeys(NioEventLoop.java:496)
at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:458)
at io.netty.util.concurrent.SingleThreadEventExecutor$5.run(SingleThreadEventExecutor.java:858)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)

 

If i have I will try with clean one but prefer not too.

0
Comment actions Permalink

@Artur, similar issue is tracked as https://youtrack.jetbrains.com/issue/WEB-29116 (also submitted against IDEA 2017.3 EAP), but we have no idea how to reproduce it so far, as the user refuses to share any details for security reasons.

Any help in tracking it down would be highly appreciated... Please can you recreate the issue and provide your idea.log (https://intellij-support.jetbrains.com/hc/en-us/articles/207241085-Locating-IDE-log-files), IDEA settings (File | Export settings) and (if you can recreate the issue with sample project created with vue init nuxt-community/starter-template) the project (including .idea folder)?

0
Comment actions Permalink

Elena, can I send the whole pack (log, .idea, settings) to your email to not expose it to public?
If so please contact me directly.

0
Comment actions Permalink

Unfortunately I have no idea how to contact you directly, and I don't like publishing my email here:(

Please can you create a new support ticket (https://intellij-support.jetbrains.com/hc/en-us/requests/new?ticket_form_id=66731) for WebStorm project, attaching files to it?

0
Comment actions Permalink

You don't want to post your email but you want me to post my whole configuration including my personal data :)

 

Do you have a company email like support@ that I can use to send the whole package?

Or please give me your bitbucket user name. So I can share the repository only with you?

0
Comment actions Permalink

I don't want you to publish anything. Support tickets are kept private, nobody (except for the responsible support engineer) will have access to your files

0
Comment actions Permalink

ok, understand. I will open the issue. Thanks!

0

Please sign in to leave a comment.