Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to set a breakpoint in code in Chrome/Firefox #10160

Open
6 of 7 tasks
vitalyb-qwilt opened this issue May 22, 2024 · 4 comments
Open
6 of 7 tasks

Unable to set a breakpoint in code in Chrome/Firefox #10160

vitalyb-qwilt opened this issue May 22, 2024 · 4 comments
Labels
bug An error in the Docusaurus core causing instability or issues with its execution

Comments

@vitalyb-qwilt
Copy link

vitalyb-qwilt commented May 22, 2024

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have read the console error message carefully (if applicable).
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.

Description

I am unable to set breakpoint in tsx files in neither Chrome or Firefox.

The issue reproduces in a fresh Docusaurus install, both locally and in playground. You can see it in the links:

https://codesandbox.io/p/devbox/affectionate-beaver-qdeo7?privacy=public
https://qdeo7-3000.csb.app/

The lines of the component are grey and I am unable to set a breakpoint. If I try to use the "debugger" command, I get the minified version. Image below.

image

Reproducible demo

https://codesandbox.io/p/devbox/affectionate-beaver-qdeo7?privacy=public

Steps to reproduce

  1. npm start
  2. Navigate to a component, e.g. src/pages/index.tsx
  3. Try to set a breakpoint

Expected behavior

Breakdown should be set

Actual behavior

Breakdown should is not set

Your environment

  • Docusaurus version used: 3.3.2
  • Environment name and version: Reproduces in latest Chrome/Arc and Firefox
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS 14.4.1 (23E224)

Self-service

  • I'd be willing to fix this bug myself.
@vitalyb-qwilt vitalyb-qwilt added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels May 22, 2024
@slorber slorber removed the status: needs triage This issue has not been triaged by maintainers label May 23, 2024
@slorber
Copy link
Collaborator

slorber commented May 23, 2024

Thanks for reporting, agree something is going wrong here.

Can you try adding this little plugin and report if it works as you expect?

  plugins: [
    function myDevtoolPlugin() {
      return {
        name: 'my-devtool-plugin',
        configureWebpack() {
          return {
            devtool: 'eval-source-map',
          }
        }
      };
    }
  ],

It works better to me, but is apparently slower too: https://webpack.js.org/configuration/devtool/

The value we use currently is devtool: isProd ? undefined : 'eval-cheap-module-source-map'

@vitalyb-qwilt
Copy link
Author

Works great, thanks!

@vitalyb-qwilt
Copy link
Author

But with that set, would I now have sourcemaps in production, too? How do I disable it for production?

@slorber
Copy link
Collaborator

slorber commented Jun 3, 2024

Thanks for reporting

You can use process.env.NODE_ENV variable in configureWebpack to return a different value in dev only

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution
Projects
None yet
Development

No branches or pull requests

2 participants