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.

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

How to have Grunt launch a packaged Chrome App

I've used the [yeoman chromeapp generator][1] to scaffold out a Google Chrome Packaged App. The instructions for that generator say running the command grunt debug should launch the packaged app in the Chrome App container, but it doesn't. Instead it opens the packaged app as a regular hosted web app in a tab. Though I am a Grunt noob I'm looking at Gruntfile.js trying to figure out why it doesn't launch the app as a packaged app in the app container, but can't see where the problem is. What's the proper way to get Grunt to launch a Chrome App?

Had the same issue with the Yeoman live-reload—not great for testing actual apps with background js, native permissions, etc.
To manually launch a Chrome app from a folder, I've been using this idiom: ~/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=/path/to/chrome/app/"
There's also this project chrome-app-livereload (blog post) which supposedly swaps out livereload's standard reload with one suitable for inclusion in an app.

You have to go to chrome://extensions, check the box Developer Mode and then click Load Unpacked Extension and point it to your manifest file. This will load your app in a Chrome App Container.

Install Google Chrome extension from script

I have created my Google-chrome extension (crx file) but I don't want to upload it on Chrome web store.
Now how can I install this crx file in Google chrome programmatically (using JavaScript or chrome API) ?
I have searched all over the place and the only solution was to upload extension on chrome web store and the use chrome inline_installation.
Is there any other way ?
(and I don't want pre-installed-extensions I want to install when user visits my site and click on install button)

Here and here are instructions to hosting an installable .crx file on your own server.
Basically:
Google Chrome considers a file to be installable if either of the following is true:
The file has the content type application/x-chrome-extension
The file suffix is .crx and both of the following are true:
The file is not served with the HTTP header X-Content-Type-Options: nosniff
The file is served with one of the following content types:
empty string
"text/plain"
"application/octet-stream"
"unknown/unknown"
"application/unknown"
"*/*"
UPDATE
Chrome no longer allows extensions to be automatically installed from outside the app store. The user must download the .crx file drag the extension to the chrome://extensions page.
Source

There is a simple way to install locally-hosted Chrome extensions for personal use. I use this method for my own authoring, testing, and use on my machine.
If it is just an extension, you can put all of your files (background, manifest, etc) into a directory on your computer. Then, open Chrome and do the following:
Navigate to chrome:extensions in the omnibar.
Make sure the Developer Mode box is checked
Click on "Load unpacked extension
In the file browser, navigate to your directory and click Open
Chrome will install the extension to your machine. No need for the .crx file. To distribute this to colleagues, you could host the file for download in Dropbox or your Drive account. They would need to follow the same process to install the extension on their machine.
Do note that if you make updates to the extension for stability or other compatibility upgrades, each person with the extension will need to download the updated directory and then update the extension manually.

IntelliJ debugger doesn't work with Dojo require

I'm having problem with JavaScript debugger under project that uses dojo.require() to load JavaScript files.
Under debugger I can see only files loaded using standard <script/> tag. Also I cannot see any debugger "frame".
Setup:
Mac
Intellij 10.5
Fx 10 with Intellij extension
Above setup works fine under other projects.

There is an open bug for this:
IDEA-63523 Can't debug Dojo Widgets