How can Vue projects be debugged lately? - javascript

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.

Related

Visual Studio Code - compile Javascript on save

The tutor of my video tutorial compiles javascript/react on save with his VS Code editor. Mine dont.
How can I config VS Code to do this?
Remark:
I find solution for typescript "Visual Studio Code - compile on save", but suggested solution does not work for me.
#added information:
the project is created with create.react-app. npm start opens chrome, and compilation errors are then shown in Chrome's DEV-Console, as noted by Shishani . My tutor has the code compiled on VS Code Terminal console. This offers a quick check of the code compilation before I go to webbrowser, to check for errors there, which seems to me much more intimidating with it's long callstacks.
If you create your React project with create-react-app, and then start it with npm start, it compiles automatically on save. Also, if it's not a React project, but just JS/HTML/CSS, you can open your project with the "Live Server" extension in VSCode, and it will update your page every time you save a file in your VSCode workspace.
You can even do like I do, and enable constant autosave, with the AutoSave: afterDelay setting in VSCode (if you dare), and then set the save delay to a super small number (mine is 2ms) so you don't even need to hit save anymore (go to File>Preferences>Settings>[Search "Auto Save"]).
If you have created react project using there official cli tool (create-react-app) then on saving js files it gets re-compile. This is because they are using webpack bundler behind the scene.
If you have created normal html or js files without any such cli tools then it won't work directly, You have to use some kind of bundler with dev-server support to do it.
Parcel! is a great bundler to use without configuration

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 ;)

Angular2 no changing in browser when modify typescript file

I'm using angular2 with Visual Studio 2015.
I completely new at angular2 so I'm discovering it step by step, right now I have an app.component.ts, displaying in html file, and everything works but when I'm making changes like the content of template in the typescript file nothing's moving, I style have the older content I tried to rebuild the project, close the project and re open it, tried to disable the cache like said in a topic but nothing works, what am I missing ??
You need to compile the typescript to javascript in order to see the changes. Simply run npm tsc in your console and your script will compile.
In case you are using command line I would suggest to install #angular/cli package. If you use ng serve your app will automatically reload if you change any of the source files.

Keep getting "tsc.exe" exited with code 1

As soon as I add a tsconfig.json file to my Visual Studio 2015 web solution I get the above error.
Also this stops the compiler from re-generating js files even when I set "compileOnSave": true.
When I double click the error it takes me into the Microsoft.Typescript.Targets file which contains a lot of issues such as Unknown Item Group "TypeScriptCompile". In the error list these appear as warnings but they are there whether I have a tsconfig.json file or not.
Is there any way of solving it or getting more information on what the problem is?
Install these 2 NuGet packages:
Microsoft.TypeScript.MSBuild and Microsoft.TypeScript.Compiler
It updates your project with MSBuild task definition and TS compiler and solves the compilation issue
For me installing TypeScript for Visual Studio fixed it, although TypeScript was already installed globally on my machine via npm
I am using a .NET Core 1.0 project and ran into the same situation of getting a tsc.exe return code of 1. My problem was an invalid tsconfig.json. However, msbuild does not provide those details.
The easiest way to find out is to enable detailed output in Visual Studio -> Tools -> Options -> Projects and Solutions -> Build and Run -> MSBuild project build output verbosity. Change this to Detailed. After compiling, find tsc.exe in the output window to see the actual error tsc was throwing.
I had this problem as well after using some standard Angular / Typescript tutorials. The solution was as simple as to update typescript in Visual Studio.
For some reason the default is now 1.8.4. and it does not allow you to automatically update it from Visual Studio Extensions and does not say it is out of date. You just download it from here and install newest version yourself. Download link may change in the future of course.
P.S. I think the problem was caused by the fact that some options that did not exist in older compiler were used.
This worked for TeamCity build server with Visual Studio 2015 when I had upgraded a project from Typescript 1.8 to 2.3
Install package Microsoft.TypeScript.MSBuild
Update *.csproj as follows
Upgrade TypeScriptToolsVersion to 2.3 (in this case)
Remove two lines of Import Project that referred to
Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets
Note
Removing the import elements is important as they are referring to TypeScript installed in the %PROGRAMFILES(X86)% folder.
Installing the package adds import elements that reference the packages folder - making your build more portable
I had same issue and what happened in my case is that the file .ts was in the project but it was not on file system. Something like this . So removed the file from project and everything started to work again.
Move all files within C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\Typ‌​escript into some new folder (e.g. backup), then try again. This will cause MSBuild to select tsc.exe from within the appropriately versioned folder instead of using the one in the C:\Program Files (x86)\Microsoft SDKs\TypeScript.
Installing Microsoft.Typescript.MsBuild fixed the issue for me, but only if I installed the penultimate version. The current (stable) version is 2.0.6, and after I installed it, the issue persisted. When I reverted to 1.8.11, the issue went away.
I had the same issue. Fixed it by removing the following from the project file
<TypeScriptToolsVersion>2.0</TypeScriptToolsVersion>
Double clicking on one of the .ts files inside of visual studio worked for me. It then came up with a dialog box asking if I wanted to update the project to the latest version of TS. After that the project built fine and the compile error was gone.
There is need to Re-Install/Upgrade, Typescript in your system.
As i was facing same issue and after installing Typescript again got resolved the error, as tsc.exe was missing in (C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.1).
We are using npm and angular-cli outside VS to transpile our typescript. I ran into the problem described above on the only dev box that had the Web Essentials extension loaded. After trying installing, and then uninstalling the MS nugets and TypeScript extension described above to no avail, uninstalling Web Essentials finally did the trick.
I was facing same issue, and the reason was, 2 developers were working on same project so when he added new .ts files into project and some angular controllers. The project was rebuilding and running as expected however when another developer tried to take latest source code on his machine and on rebuilding he was getting same error "tsc.exe" exited with code 1.
So reason was the files created/added in source control was not showing added on
developer 2 solution. Please try to check if all the .ts, .js files are up to date on both developers solution.
I had the same issue on a solution using AngularJS but without the compiler (below 2.x so not needed). I simply removed the index.d.ts from script folder and it was ok (no NuGet packages necessary)
If youre are facing this problem when updating from bootstrap 3 to 4 just delete .ts file created inside the Scripts Folder then build again.

polymer does not work when i click on index.html directly

I am using Dreamweaver for developing polymer app. all seems to be fine when i use F12 to preview my work in chrome. when i click on index.html directly, all the elements of polymer are missing.
direct click on chrome
F12 in Dreamweaver (preview in chrome)
what's the problem
Install budo.
npm install budo -g
open the file (you need js file,you can create empty one)
budo index.js
and then go to you chrome
http://localhost:9966/

Categories

Resources