Cannot set working breakpoints vscode and chrome browser

[tkassila]

Describe the bug Cannot set working breakpoints in vscode, when starting preact app.

To Reproduce Steps to reproduce the behavior:

1. npm i -D wmr
2. npm init wmr test
3. update package.json into wmr 1.5.1 and preact-iso 1.1.1, preact 10.5.13. (Also tryed without any modifications into package.json file with the same result, problem to debug.)
4. Create vscode js debug session and write: npm run start
5. Add chrome ext. into vscoce
6. Add const onClickButton function into home/index.js and call in + button.

const onClickButton = (event) => { setCount(count + 1); } 6. Set breackpoint into above function. 7. Start npm start 3. When starting F5 browser session, npm start console says: sw-debug.js file missing. 4. See error. That is debugger does not working. 5. I have tryed to find sw-debug.js file content, but it is missing.

Expected behavior A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

• OS: Windows 10, npm 6.14.12, latest
• chrome 89.0.4389.114 (Official Build) (64-bit)
• Node v14.16.1
• WMR Version: 1.5.1 and default generated version

vslauche config:

"configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://192.168.1.107:8080", "sourceMaps": true, "webRoot": "${workspaceRoot}", "trace": true },

package.json: { "scripts": { "start": "wmr", "build": "wmr build --prerender", "serve": "wmr serve" }, "eslintConfig": { "extends": "preact" }, "alias": { "react": "preact/compat", "react-dom": "preact/compat" }, "dependencies": { "preact": "^10.5.13", "preact-iso": "^1.1.1" }, "devDependencies": { "wmr": "^1.5.1" } }

Additional context Add any other context about the problem here.

[rschristian]

sw-debug.js is (more than likely) due to it being installed by Preact-CLI, but never removed. Disconnect it from your browser's dev tools.

Also fill in the issue template, it's not there to just fill space. It'll help us help you.

[tkassila]

I uninstalled preact chrome extendsion and after that it does not any more complain missing sw-debug.js file. But the debugger does not break still! Before npm run start command, breakpoints are ok (=shown as red points), after start, they are unbound breakpoints!

I have new warning on the browser side: A preload for 'http://localhost:8080/index.js' is found, but is not used because the script type does not match. localhost/:1 The resource http://localhost:8080/index.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

Do you had seen my updated message above?

[tkassila]

A small workaround for breakpoints: if I set breakpoints also in browser, then they will stop both on vscode breakpoint and at browser breakpoint. But I cannot see data content of variables. Browser, chrome, has preact dev tools installed as the extension.

[developit]

@tkassila hmm - are you setting breakpoints in the production build (wmr serve), or when running the development server (wmr)?

[tkassila]

in development mode: npm start and enter. What is a right config file for vs code and chrome browser, if I had a wrong one? Possible it is coming from preact-cli project! I have tryed to modify it:

{ "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "sourceMaps": true, "webRoot": "public", "trace": true },

[peterbe]

sw-debug.js is (more than likely) due to it being installed by Preact-CLI, but never removed. Disconnect it from your browser's dev tools.

Also fill in the issue template, it's not there to just fill space. It'll help us help you.

Second that! I created a fresh new project and it failed on the terminal with:

404 ./public/sw-debug.js - File not found

Sure enough, going into the devtools to unregister the existing Service Worker cleared the problem. I too had been using :8080 for a preact-cli based project.

[marvinhagemeister]

Renamed the issue as it is actually two separate ones in disguise and the one about the service worker has been fixed.

[tkassila]

That's right, they are two separate issues!

Now I found that I can now debug on chrome source codes with wmr 3.7.1 and 3.7.2 ("preact": "^10.5.14", preact-iso": "^2.2.0).

Btw: I found a preact-cli vscode configuration project how to debug on vscode and chrome browser With same kind preact js project and old vscode configuration, I got earlier c error exceptions from my chrome browser! With new github project - done somebody - vscode config they has gone away!

Is there a vscode debug configuration for wmr project (=the counter) and what that configuration is (lauch.json and possible task.json file contents)?

Thansk in advance,

Tuomas

[tkassila]

Seems that my vscode does not find js sources when I start my debug sessioin on chrome. (Because before start debug breeakpoint is red and after the start it is only black with white cirkel.) Configuration on launch.json etc?