gatsby: Can't add breakpoints in Chrome DevTools

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.

    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```

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 33 (9 by maintainers)

Most upvoted comments

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

+19

max-l on Sep 24, 2019

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.

+10

marcinsydor on Aug 7, 2019

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

wardpeet on Aug 4, 2019

This is still happening, shouldnt be closed

ryudice on Sep 9, 2019

Same problem here, please solve it guys! =/

lucasgdev on Nov 20, 2019

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?

AlbyIanna on Nov 19, 2019

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.

marcinsydor on Oct 29, 2019

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.

MarkosKon on Nov 12, 2019

I’ll close this as resolved this is working in the latest version. We also now use:

https://github.com/gatsbyjs/gatsby/blob/7110189fda3942aba27cf35f577ce14d7b252d0b/packages/gatsby/src/utils/webpack.config.js#L277-L279

LekoArts on May 7, 2021

@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.

ndglover on May 13, 2020

Confirming downgrading to 2.13.25 works by the way.

ryudice on Aug 19, 2019