fix: adding missing chromiumPort parameter in web-ext.ts to enable fixed port debugging

[sylvaneau]

This fix enable to setup a fixed port to enable easy debugging with VSCode or other IDEs

Overview

Everything was already there, I've just added the line to pass the parameters sets in wxtUserConfig to the web-ext runner.

Manual Testing

• Set chromiumPort in wxt.config.ts.
• Launch npm run dev
• Browse to chrome://version
• Check that remote-debugging-port is the same as set in config file

You can also setup a fully working environment with this repo https://github.com/sylvaneau/wxt-react-vscode-template and try to debug your project with VSCode.

Related Issue

This PR closes #52

[netlify]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	23dc6eb
🔍 Latest deploy log	https://app.netlify.com/projects/creative-fairy-df92c4/deploys/688f6012ce285d000821f4e3
😎 Deploy Preview	https://deploy-preview-1818--creative-fairy-df92c4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@wxt-dev/analytics

npm i https://pkg.pr.new/@wxt-dev/analytics@1818

@wxt-dev/auto-icons

npm i https://pkg.pr.new/@wxt-dev/auto-icons@1818

@wxt-dev/browser

npm i https://pkg.pr.new/@wxt-dev/browser@1818

@wxt-dev/i18n

npm i https://pkg.pr.new/@wxt-dev/i18n@1818

@wxt-dev/module-react

npm i https://pkg.pr.new/@wxt-dev/module-react@1818

@wxt-dev/module-solid

npm i https://pkg.pr.new/@wxt-dev/module-solid@1818

@wxt-dev/module-svelte

npm i https://pkg.pr.new/@wxt-dev/module-svelte@1818

@wxt-dev/module-vue

npm i https://pkg.pr.new/@wxt-dev/module-vue@1818

@wxt-dev/runner

npm i https://pkg.pr.new/@wxt-dev/runner@1818

@wxt-dev/storage

npm i https://pkg.pr.new/@wxt-dev/storage@1818

@wxt-dev/unocss

npm i https://pkg.pr.new/@wxt-dev/unocss@1818

@wxt-dev/webextension-polyfill

npm i https://pkg.pr.new/@wxt-dev/webextension-polyfill@1818

wxt

npm i https://pkg.pr.new/wxt@1818

commit: 23dc6eb

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

Project coverage is 81.09%. Comparing base (626838e) to head (99a6a6c).

Files with missing lines	Patch %	Lines
packages/wxt/src/core/runners/web-ext.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1818      +/-   ##
==========================================
+ Coverage   81.01%   81.09%   +0.07%     
==========================================
  Files         130      130              
  Lines        6649     6650       +1     
  Branches     1089     1088       -1     
==========================================
+ Hits         5387     5393       +6     
+ Misses       1251     1246       -5     
  Partials       11       11              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[PatrykKuniczak]

@sylvaneau That's amazing, small fix and if it works that's gooooddd job :)

I was wondering to take that task, but it seems done now <3

Last step is to solve CI issue, you need to edit PR title

[sylvaneau]

I do not undernstand the failing checks, it seems it has no relation with the part i've modified.

[PatrykKuniczak]

I do not undernstand the failing checks, it seems it has no relation with the part i've modified.

Check failed because of PR title there's some kind of linter for it, now should be good, but it need to be approved by owner again.

I don't see all CI workflows because i'm on mobile currently 🙂

[sylvaneau]

I do not undernstand the failing checks, it seems it has no relation with the part i've modified.

Check failed because of PR title there's some kind of linter for it, now should be good, but it need to be approved by owner again.

I don't see all CI workflows because i'm on mobile currently 🙂

Hello, no I have already updated the name of the PR, the error is related to a completely different item:

src/virtual/utils/reload-content-scripts.ts(40,51): error TS2322: Type '{ id: string; matches: string[]; js?: string[]; css?: string[]; }' is not assignable to type 'RegisteredContentScript'.

[PatrykKuniczak]

@sylvaneau Yeah, PR title validation is valid right now, you need to fix issue with eslint in code, let's take deeper look on failed workflow

[sylvaneau]

I did had a deeper look in the failed workflow and it is not an eslint issue :-) it's a transpilation issue.

The issue was present on main before my push request and previous merge requests have been accepted with it, so I suppose we just need to wait for the maintainer to accept this one :-)

[PatrykKuniczak]

@sylvaneau Ok, in that case it need to be fix in other PR.
Good job :)

[Timeraa]

Gave this a test run and it doesn't appear that you can set breakpoints on the background script no? I only got the content scripts to trip.

[sylvaneau]

By running npm run dev inside a javascript debug console you can auto attach the vscode debugger. And there is something surprising here, you can set breakpoint in the 'outer' function (like set a breakpoint to defineBackground) but you cannot set breakpoint inside this function. I'll have a look if I can fix that.

[sylvaneau]

So it seems the problem is related to Chrome and VSCode and is not currently really fixed.

Someone has managed to do it but I cannot reproduce...

microsoft/vscode-js-debug#1445

Also the alternative way described by this guy allows to debug background with Chrome tools, but not with vscode...

https://www.youtube.com/watch?v=znL5vqEtsjY

[sylvaneau]

Victory !!! \o/

However I have to admit it is not very straight forward...

So first I've updated my .vscode/launch.json sourcemap paths:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome",
            "port": 9229,
            "request": "attach",
            "type": "chrome",
            "webRoot": "${workspaceFolder}/src",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "../../../src/*": "${webRoot}/*",
                "../../src/*": "${webRoot}/*",
            }
        },
    ]
}

(btw I've updated my template project with this change)

Once you've done that you have to respect a particular sequence to let VSCode to be aware of the background script.

1. run npm run dev
2. on chrome click on your extension icon to display the popup / right click -> 'Inspect'
3. go to the 'Application' tab, select 'Service Workers' on the left panel
4. you will see your background script, next to the 'Status' line click the 'Stop' button
5. now go back to VSCode and hit F5 to attach debugger
6. go back to Chrome, click the 'Start' button and "Voilà" ! you can set breakpoints !

You can even close the chrome developer window afterwards your breakpoints will still be hit.

If you attach VSCode before stopping the service worker it will not work...

[Timeraa]

personally couldn't get that to work yet, I'll try it on a the template extension but something interesting I discovered is that when you have the debugger connected when you open the popup it will always open devtools which is nice

[aklinker1]

Don't use VSCode personally, but this is a good fix regardless. Merged with latest main to fix checks.

[github-actions]

Thanks for helping make WXT better!