Develop Reference

How can Vue projects be debugged lately?

I'm maintaining a Vue2 project in which I've recently upgraded #vue/cli-service to version 5.0.4 (from 4.5.0).
Now I've noticed that I can't use my browser devtools to debug the app anymore. Specifically, when I open the devtools and press CTRL+P and type App.vue, the browser opens a compiled version of that file. Previously, it would open the original source file and allow me to place working breakpoints in that file.
This problem occurs in Chrome, Edge, and Firefox.
This problem even happens to the default project scaffold generated by the latest #vue/cli (version 5.0.4 also), with typescript and babel disabled (eg the project generated using vue create testProject).
As a matter of fact, this problem even happens to the default Vue3/Vite project scaffold generated by npm init vue#latest. With or without typescript. I have no idea how anyone in the Vue ecosystem are debugging their projects anymore.
I've already tried setting configureWebpack.devtool = 'source-map' - that hasn't had any effect.
Am I doing something wrong?

This is working for me. I tried to reproduce (npm init vue#latest). When I hit ctrl-p, the first App.vue that's suggested is, as you say, a compiled version. But if you keep hunting down the list, look for the App.vue that has a directory path after it, and you should see your source and be able to put breakpoints. I also like to open my source directory in the filesystem sub-tab of the sources tab in devtools, and this works fine as well, breakpoints included.

Electron project : open index.html or npm start, what changes?

When I run npm start, it opens a GUI electron and it works fine.
On the other hand, When I open index.html, it opens chrome and it seems that not all sources are loaded.
What is the difference ?

Electron provides a host of APIs and a Node.js backend that you don't get if you open an HTML document in a regular browser.

Gatsby hot reloading does not reload in the Hello World starter project

Description
I am following along with the instructions here: https://www.gatsbyjs.org/tutorial/part-one/
When I start the dev server and make a change to src/pages/index.js it is not hot reloaded in my browser.
Steps to Reproduce
Using gatsby-cli:
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
cd hello-world
gatsby develop
change the text inside of the div in src/pages/index.js
Expected Result
Page would automatically reload with new text.
Actual Result
Page would not change unless a manual refresh was applied in the browser.
Specs
OS: Ubuntu 18.04.3 LTS running in WSL on Windows 10 Pro
Node: 12.12.0
NPM: 6.11.3
Gatsby CLI: 2.8.8
Gatsby: 2.17.6
Browsers: Chrome 77.0.3865.120, IE 11.1006.17134.0, Firefox 70.0
I've tried multiple browsers with the same result so I ran devtools in firefox and examined the console output when I make a change and I see this error:
The connection to http://localhost:8000/__webpack_hmr was interrupted while the page was loading. client.js:88
[HMR] Update check failed: hotDownloadManifest/</request.onreadystatechange#http://localhost:8000/commons.js:42:16
process-update.js:147
Error: Manifest request to /d528b21bff3fd2caa92d.hot-update.json timed out. bootstrap:41
Firefox can’t establish a connection to the server at http://localhost:8000/__webpack_hmr. client.js:88
I've also looked around on github and here and haven't found a solution to my problem. Any ideas on a workaround, solution, or insight into why this might not be working for me would be greatly appreciated!

I was having same problems. Gatsby Develop hot reload was not working whenever I made changes to files, plus, Gatsby Develop was terribly slow to compile code and get the dev server up and running. I found out that if I create my Gatsby project in Linux directory structure instead of Windows, everything works out good and is blazing fast. So my solution was following.
Create your project in /home/<your_username> directory in WSL. Simply go to /home/<your_username> and make a folder there with mkdir; go to that folder and then run Gatsby create my_project command in that folder.
That way your project will reside in Linux directory structure, making everything run smoothly.

I faced the similar scenario today. Below steps made it work however warning message is persistent in the console.
Delete package.lock.json and node_modules folder
Delete the content present inside C:\Users\\AppData\Roaming\npm and npm-cache
Do a npm i.

Im running gatsby develop on windows. After trying many things, including wsl, npm clenaup etc, I realized that my antivirus sophos was blocking the webpack hot reload socket __webpack_hmr.
All I had to do is to disable the antivirus for a while. ( You are free to uninstall it or maybe change to another one ).
hope it works for you ;)

Vue DevTools could detect Vue.js but does not show in F12 panel

I am trying to debug a webpage written in Vue. I want to look into the Vue data using Vue DevTools. I installed it on Chrome and it could detect my webpage :
However when I Click F12 to open the DevTools, the Vue tab could not appear on panel:
I also tried to install VUE devtools locally (downloaded from github, using npm run build) and had the same result.
Any suggestions for solving this issue?

The possible reason maybe vue devtools can't detect vue code, you can test it by https://vuejs.org/index.html.

Change the vue source <script src="//cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
to <script src="//cdn.bootcss.com/vue/2.5.17/vue.js"></script> could solve this issue

Eclipse does not support web projects or web file types after installing WTP. Am I installing it incorrectly?

I currently have the latest version of Eclipse (Juno) and I have installed ADT with no problem. I have moved on to a web based project and I require support for JavaScript and HTML etc. I installed WTP through the update manager and you can see that all of the required packages appear to be installed:
However, within Eclipse there is very little evidence that anything has been installed. I have read in this jsdt tutorial that I should be able to create web projects such as "Static Web Project" and have text editting support for HTML and JavaScript. However, I see no web project options, HTML or JavaScript file options, no perspective options for HTML or JavaScript, and no support for editing html/javascript files.
Here you can see an html file I attempted to create. Notice the lack of syntax colouring:
Here you can also see all the project creation options that are available to me:
So how should I have installed WTP? Should I not have installed it thought Eclipse's software manager? I would like to do this without having to re-install Eclipse if possible.

This problem seems to exclusively occur in Windows 7. I managed to successfully install the desired software by right clicking on the Eclipse icon, selecting "Run As Administrator" and then re-installing all packages. I did not have to do this in Windows Vista.
If you are experiencing this problem and you are using Windows then follow these steps.
Right click on the Eclipse icon and select Run As Administrator.
Once you have opened your Workspace go to Help -> Install New Software.
Any installed packages that you installed when you did not Run As Administrator should now not appear to be installed. So install them again.
Restart eclipse (normally if you wish) and your desired packages should be installed correctly.