Gatsby: Can't add breakpoints in Chrome DevTools

[marcinsydor]

Description

I'm not able to add breakpoints in Chrome DevTools after updating gatsby to version: 2.13.45

Steps to reproduce

Use official theme starter
https://github.com/gatsbyjs/gatsby/tree/master/themes/gatsby-starter-theme

Expected result

Be able to debug website in DevTools

Actual result

When I click on the line number bar I can't add a breakpoint. If I right-click and choose "Add breakpoint" the breakpoint is not showing up.

Just noticed that I'm able to add a breakpoint but on the first line only.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System: OS: macOS 10.14.5 CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 10.16.0 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Languages: Python: 2.7.10 - /usr/bin/python Browsers: Chrome: 75.0.3770.142 Firefox: 66.0.3 Safari: 12.1.1 npmPackages: gatsby: ^2.13.45 => 2.13.45 gatsby-theme-blog: ^1.0.0 => 1.0.0 gatsby-theme-notes: ^1.0.0 => 1.0.0 npmGlobalPackages: gatsby-cli: 2.4.8

[elken]

AFAIK you can only debug the build process as documented here with node. As you linked just a theme, there isn't anything to debug.

[marcinsydor]

I'm not talking about the build process, I'm just trying to debug React components. Have not had any problem with it so far. But since I updated Gatsby to the latest version I can't do it anymore. I tested it on tow different MacBooks. I also updated Chrome to version 76 but nothing has changed.
If I add debugger code line to my component in the editor then the breakpoint is cached but it is moved to the first line in the component.

[elken]

Seems to be a visual bug with manual debugger lines.

Image

I can still step through and the locals update accordingly.

[marcinsydor]

Just to confirm, did you use gatsby-starter-theme project to replicate this issue? Could also please fix that image link so I can see it?

[elken]

Yep, just cloned it fresh. Updated comment but: https://prnt.sc/on092g

[marcinsydor]

Thanks, I can see you can replicate it. You won't be able to add a breakpoint to e.g. line number 9. All the line numbers part of 1 are greyed out.

[elken]

Nope but manual debugger lines work fine. If you want to debug react components in isolation I would recommend storybook.

⁣Regards,
Ellis Kenyő

GitLab | GitHub | Keybase | elken.me​

On 1 Aug 2019, 15:08, at 15:08, Marcin Sydor [e-mail] wrote:

Thanks, I can see you can replicate it. You won't be able to add a
breakpoint to e.g. line number 9. All the line numbers part of 1 are
greyed out.

--
You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
https://github.com/gatsbyjs/gatsby/issues/16281#issuecomment-517303345

[marcinsydor]

I just want to debug my sites in DevTools the same way I've been doing so far.
If you can't replicate this issue can I ask you do make the same screenshot but with the blue breakpoint on the number lines block, please?

[elken]

I have replicated this issue and marked as a bug. In the meantime, manual debugger lines work fine apart from the visual representation on the code. Stepping works fine.

[marcinsydor]

Sorry, I misunderstood you, I see what mean now.

[kimbaudi]

I'm glad I found this issue. I was going crazy because I can no longer add breakpoints to source files in Chrome DevTools when I was able to do so before.

BTW, thank you all for mentioning debugger. I learned something new today.

[wardpeet]

Thanks for reporting. It seems like source-maps are broken on develop. We'll investigate 🕵

[yoavniran]

Ive also been experiencing this since i upgraded to version 2.13.39
been going crazy, thinking it was something i was doing wrong.
makes it very difficult to develop... :( hopefully will be fixed soon

[marcinsydor]

Yes, it's very difficult to debug but also if you have an error in the app it's not showing the right line of the problem which is very confusing. I've changed the version strictly to 2.13.25 and all works fine now.

[Galzk]

Thanks for reporting. It seems like source-maps are broken on develop. We'll investigate 🕵

In the babel config - babel-preset-gatsby
"sourceMaps": "inline"
Might solve the problem?
Interesting why the regression has occured, but for now as @marcinsydor pointed 2.13.25 works well with the debugger

[ryudice]

I'm having this issue as well. Is there any workaround or should we just downgrade to 2.13.25?

[ryudice]

Confirming downgrading to 2.13.25 works by the way.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[ryudice]

This is still happening, shouldnt be closed

[patspam]

Thanks for reporting. It seems like source-maps are broken on develop. We'll investigate 🕵

In the babel config - babel-preset-gatsby
"sourceMaps": "inline"
Might solve the problem?
Interesting why the regression has occured, but for now as @marcinsydor pointed 2.13.25 works well with the debugger

FYI The sourceMaps inline suggestion didn't work for me.

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[max-l]

Please reopen this issue ! Not being able to debug from the browser is a pain !

[jeeyyy]

Is there a fix to this yet?

[marcinsydor]

Just tested 2.17.6 version and nothing has changed. I reported it 3 months ago I also spoke to @davidbailey00 about that problem on Gatsby Days London a few weeks ago. It's a shame that we still need to work with 2.13.25 version.

[MarkosKon]

Changing the webpack devtool to eval-source-map during develop stage solves the issue for me:

// gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage === "develop") {
    actions.setWebpackConfig({
      devtool: "eval-source-map",
    })
  }
}

I still have to reload the page to hit the breakpoints. Also, the breakpoints in JSX are sometimes 1 line off.

[ryudice]

Are we ever getting a fix for this?

[AlbyIanna]

Changing the webpack devtool to eval-source-map during develop stage solves the issue for me:

// gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage === "develop") {
    actions.setWebpackConfig({
      devtool: "eval-source-map",
    })
  }
}

I still have to reload the page to hit the breakpoints. Also, the breakpoints in JSX are sometimes 1 line off.

This worked for me! As a temporary fix, just paste those lines at the end of your gatsby-node.js file.

@wardpeet are you going to implement this solution in the default webpack config?

[lucasgdev]

Same problem here, please solve it guys! =/

[kaceto104]

Hi...!!!

Not being able to debug from the browser.. please help guys

[xuchen509]

The workaround doesn't work for me. I'm on Gatsby 2.15.x and please address the issue thanks!

[KunalBurangi]

yes, this issue is happening with me too and I am also unable to resolve it completely. But I got a workaround just add a comment above the line you are trying to add a breakpoint. once you do that the below line will be available for adding the breakpoint. I don't know if this will work for everyone but it worked for me

[ndglover]

@KunalBurangi - this worked for me when using version 2.17.54.

Since updating to the gatsby 2.21.27 it is no longer an issue for me and doesn't require any workarounds.