I've got a NextJS app that I'm running in VSC. When debugging, it seems like I'm hitting breakpoints in the /.next build folder but I can't explain why.
This is the launch.json file I'm using:
{
"name": "Launch Next.js app",
"request": "launch",
"runtimeArgs": ["run", "dev"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**", "${workspaceRoot}/.next/**/*", "${workspaceRoot}/node_modules/**/*"],
"type": "node"
}
I'm guessing it's a sourcemap issue but I'm not very experienced with this, so I'm hoping someone might be able to help as it's incredibly annoying.
Related
I created a fresh gatsby site by using the command npm init gatsby on a M1 Mac. I kept all options to default in the wizard and started by npm run develop. I immediately get this error on every refresh:
Although it's annoying the site is working fine. The error doesn't give much information and I couldn't find anyhting on google. My node version is v17.2.0 and this is the auto generated package.json:
{
"name": "my-gatsby-site",
"version": "1.0.0",
"private": true,
"description": "My Gatsby Site",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"dependencies": {
"gatsby": "^4.3.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
EDIT:
I'm using Firefox.
There's a lack of details despite being a starter command (browser, browser version, etc). I'd try to follow one of the suggestions of this GitHub thread:
If you are registering a service worker, try commenting/removing it
If not, play around with the browser cookies (allowing or disallowing):
Allowing the localhost:8000 cookies.
In the same way, using the opposite cookie approach, you can disable the "Delete cookies and site data when Firefox Developer Edition is closed" option.
This solved the problem, no error anymore:
I worked around the issue by disabling the "Delete cookies and site
data when Firefox Developer Edition is closed" option
Source: https://github.com/gatsbyjs/gatsby/issues/16076#issuecomment-536152468
My dev team configured a Node.js project with TypeScript to use Vite as dev server, using the npm script panel of VsCode.
Is there a way to attach the debugger into this Vite server so we can debug the TSX code within the editor?
Go to the debug tab and click "create debug.json".
Then adapt the url port to use 4000 if you want to use the Vite plugin for VSCode. Or 3000 if you run it with yarn dev, npm run dev or vite from your console.
I also had to adapt the webRoot as I've created an app folder which is my root folder.
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4000",
"webRoot": "${workspaceFolder}/app"
}
]
}
I write another answer, because the ones that are below were incomplete for me.
First, paste in your launch.json file this code:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4000",
"webRoot": "${workspaceFolder}/app"
}
]
}
Then go to package.json, and add this to your dev command:
"dev": "vite --port 4000"
Then you run the command npm run dev and finally you can press F5 to start debugging.
The previous answer is for debugging in Chrome, if you prefer Firefox, here's the debug.json.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
}
]
}
Very important: the "webRoot": "${workspaceFolder}/src", needs to point the the directory where your 'Vue.app' file is located. If that doesn't work, put the directory where your 'index.html' file is located. One of these two should work.
Further info can be found in this discussion on the official Vite GitHub repo: https://github.com/vitejs/vite/discussions/4065
I am trying to host my web site using Github Pages. I am currently using Web Components and Lit-HTML (No Lit Element). No server side code. Just using NPM and Node Modules. I am wanting to build the site and publish to my git branch gh-pages but I am not quite sure what steps I need to take as currently the page error as it can not find the dependencies.
I am currently running the site locally using WAMP on my Windows Machine. Works perfectly here. Not sure if its possible to compile the code so that its in a Jekyll format
EDIT: I know how to push the code to Github. Just not sure how Github uses Node Modules to build the site.
Here is my Package.json
{
"name": "Repo",
"version": "1.0.0",
"description": "Description",
"dependencies": {
"#webcomponents/webcomponentsjs": "^2.2.1",
"lit-html": "^1.0.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/username/Repo.git"
},
"author": "ME",
"license": "ISC",
"bugs": {
"url": "https://github.com/username/Repo/issues"
},
"homepage": "https://homepage.com"
}
It depends from where you want to get the dependencies.
Do you want to host them yourself on your own site? Maybe it's not necessary. Instead you could get them directly from their original CDN.
For webcomponentsjs, according to their website, it's on the unpkg.com CDN.
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#^2/webcomponents-bundle.js"></script>
For lit-html, according to the doc, it's on the unpkg.com CDN too:
import {html, render} from 'https://unpkg.com/lit-html?module'
I'm trying to debug a VUE component in Laravel 5.5 project using VS Code.
The last version of VS Code is installed.
Debugger for Chrome 4.2.0 is installed.
All Chrome processes are killed.
launch.json in .vscode folder has the following code:
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8000",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"runtimeArgs": [
"--remote-debugging-port=9222"
]
},
]
I start the project from CMD like this:
λ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>
I set a breakpoint in Vue component and start debugging
(see image)
As the result, the project page is opened in Chrome, but breakpoint doesn't work.
It is greyed out with the following message:
Unverified breakpoint, Breakpoint ignored because generated code not found
(source map problem?)
I found 4 files with the name "webpack.mix.js" in the project folder. I have added the ".sourceMaps();" to each of them like this:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sourceMaps();
After that I rebuild the project by:
npm run dev
But I didn't find any map files in CSS folder and the problem is still here.
This is the configuration that worked for me, it allows me to set breakpoints for .vue and .js files directly in VSCode:
VSCode's launch.json:
{
"version": "0.2.0",
"configurations": [{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/public",
"sourceMapPathOverrides": {
"webpack:///resources/assets/js/*.vue": "${workspaceFolder}/resources/assets/js/*.vue",
"webpack:///./resources/assets/js/*.js": "${workspaceFolder}/resources/assets/js/*.js",
"webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*"
}
}]
}
webpack.mix.js:
let mix = require('laravel-mix');
mix
.js('resources/assets/js/app.js', 'public/js')
.sourceMaps(false, 'source-map')
.sass('resources/assets/sass/app.scss', 'public/css');
Unfortunately ".sourceMaps()" doesn't help, but the "debugger" keyword can be used instead of standard breakpoints in this case. You just have to add it to needed line of code and the code stops there.
I have exactly the same behavior. Debugger word in code works, but vscode red dot regular breakpoints doesn't.
I tried many fixes and combinations with sourceMapOverrides paths, but finally only set my devtools sourcemaps type to
cheap-module-eval-sourcemap solve problem for my project!
In your webpack.mix try this line:
mix.webpackConfig({ devtool: 'cheap-module-eval-sourcemap' })
See my github comment and issue to get more details
Maybe it would be good to try all of that types if that does not working
Here is my debug config:
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost",
"webRoot": "${workspaceFolder}/public",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///resources/js/*.vue": "${workspaceFolder}/resources/js/*.vue",
"webpack:///./resources/js/*.js": "${workspaceFolder}/resources/js/*.js",
"webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*"
},
},
Another solution is to use VueJS chrome dev tool extension from here
as advised is this answer here
I have setup a skeleton project for react with web-dev-server and hot reload. I have also created a dev-server.js file to run all this config with node so that I am able to start a debug session from VSCode like so :
I have some code located in this repo : Learn-React
everything works fine when I run the command
>node dev-server
I also created a launch in vscode that looks like this:
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
"configurations": [
{
"name": "Launch server.js",
"type": "node",
"program": "server.js",
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": ["--nolazy"],
"env": {
"NODE_ENV": "development"
},
"sourceMaps": true,
"outDir": "public"
}
]
}
I would like to add a breakpoint in VSCode on a jsx file so that I could debug inside VSCode. it's working when I start from command line an add a "debugger;" expression in the code. it stops on breakpoint in chrome dev tool
Question : How could I add a breakpoint to jsx files and debug inside VSCode
It is currently not possible to debug jsx that is bundled by webpack-dev-server from inside vscode. It could be possible with chrome debugger but this doesn't work with the current debugger version because webpack-dev-server is keeping the bundled js files in memory while the debugger is looking for the files on disk.
but the good news is webpack-dev-server will soon be supported by vscode chrome debugger: https://github.com/Microsoft/vscode-chrome-debug/issues/40
to use chrome debugger in combination with webpack you can create webpack tasks in tasks.json and set the preLaunchTask property in launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "./src",
"preLaunchTask": "webpack dev",
"sourceMaps": true
}
]
}
tasks.json will look like this:
{
"version": "0.1.0",
"command": "node",
"isShellCommand": true,
"echoCommand": true,
"suppressTaskName": true,
"tasks": [
{
"args": [
"server.js"
],
"taskName": "webpack dev"
},
{
"args": [
"${workspaceRoot}\\node_modules\\webpack\\bin\\webpack.js",
"--config",
"${workspaceRoot}\\webpack.production.config.js",
"--progress",
"--profile",
"--colors"
],
"taskName": "webpack dist",
"isBuildCommand": true
}
]
}
UPDATE 2015-12-07
It is now possible to debug .js files with webpack-dev-server and vscode-chrome-debugger. .jsx file support will be added in a future release https://github.com/Microsoft/vscode-chrome-debug/issues/62
UPDATE 2015-12-09
A simple react hot boilerplate for vscode can be found here: https://github.com/skolmer/react-hot-boilerplate-vscode
UPDATE 2016-04-25
Updated boilerplate project to React Hot Loader 3.0
I've been trying to get the github project working, but it is not hitting my break points. I have a vid here (if you can handle my fumbling around) where I make sure everything is installed, set some break points, follow your instructions as per the github readme. If you have any advice, it would be appreciated.
https://www.youtube.com/watch?v=gIo7RXZwgHI&feature=youtu.be