While working on my site I ran into GraphQL errors. I started debugging in VSCode, which has a very nice built in Node debugger. To make the sources readable I decided to modify Gatsby to generate source maps on build.
I must say it works really nice with source maps! I can now just hit F5 and step through the original source of the build process. For anyone who wants to try the VSCode debugger. This is my configuration in launch.json. You need to place this in the .vscode directory.
I use port 7777 to not conflict with any already running instance of gatsby on the default 8000
{
"version": "0.2.0",
"configurations": [{
"name": "Launch",
"type": "node",
"request": "launch",
"protocol": "inspector",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"args": ["develop", "-p", "7777"],
"stopOnEntry": false,
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development",
"DEBUG": "gatsby:*"
},
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": []
}]
}
Here's a working branch in case you're curious. There are also commits for cleaning up the cli code. You can ignore those. I got a bit carried away.
0x80
All 8 comments
Nifty! Add this to https://github.com/gatsbyjs/gatsby/blob/1.0/CONTRIBUTING.md?
The "development tools" section will probably need broken into sub-pages at some point or we add a table of contents but it'd be great to start collecting these sorts of tips.
Feel free to make a PR on the cleanup of the CLI code as well!
KyleAMathews
on 26 Apr 2017
@KyleAMathews I'll try to wrap up that branch and write something about debugging.
Since today, when I start the debugger I keep seeing these errors. Any idea where this might come from?
Error: err {type: "OpenError", name: "OpenError", cause: Error: IO error: lock /Users/me/Development/myproj/.cache/cache/LOCK: Resource tempora…, message: "IO error: lock /Users/me/Development/…ache/cache/LOCK: Resource temporarily unavailable", stack: "OpenError: IO error: lock /Users/me/D…es/abstract-leveldown/abstract-leveldown.js:39:16"}
at emit (events.js:162:6)
at dispatchError (/Users/me/Development/myproj/node_modules/levelup/lib/util.js:63:55)
at (anonymous) (/Users/me/Development/myproj/node_modules/levelup/lib/levelup.js:118:13)
at (anonymous) (/Users/me/Development/myproj/node_modules/abstract-leveldown/abstract-leveldown.js:38:15)
You just have some resources locked, try to kill some process or just reboot your computer ;)
fabien0102
on 30 Apr 2017
This is leveldb complaining as it only lets you start one process at a time
so apparently you have another gatsby process running in addition to your
debugger.
On Sun, Apr 30, 2017, 9:56 AM Fabien BERNARD notifications@github.com
wrote:
You just have some resources locked, try to kill some process or just
reboot your computer ;)—
You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/859#issuecomment-298243512,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh3htDCijrT0Th5egvr6zKYfHhOkaks5r1L1AgaJpZM4NIyiw
.
KyleAMathews
on 30 Apr 2017
@0x80 Am I right in thinking that the debugging will not work without modifying Gatsby to generate source maps on build?
I get the error: Cannot launch program because corresponding JavaScript cannot be found when I tried to use the VSCode debugger with your launch.json configuration.
bluprince13
on 12 Jun 2018
@bluprince13 I was able to get it working on my Mac, but a fellow developer is getting that same error on his PC. It could be an environment issue on PC?
LukeSchlangen
on 3 Aug 2018
@LukeSchlangen A moment ago, I managed to get this to work on PC by changing the program value to "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby".
{
"name": "Launch Gatsby Develop",
"type": "node",
"request": "launch",
"protocol": "inspector",
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
"args": ["develop", "-p", "9229"],
"stopOnEntry": false,
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": ["--nolazy"],
"env": {
"NODE_ENV": "development",
"DEBUG": "gatsby:*"
},
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": []
}
paul-winters
on 13 Aug 2018
@0x80's config worked for me. But note it only worked when using the shorthand options for some reason (e.g -H hostname instead of --host hostname).
I'm still getting this error in the browser console though:
Loading failed for the <script> with source “http://devarity.localhost:8000/commons.js”.
Which seems to be due to this Webpack error in the dev server:
daniel@devarity [04:49:10 PM] [~/Dev/projects/devarity/public] [develop *]
-> % cd /home/daniel/Dev/projects/devarity ; env "NODE_ENV=development" "DEBUG=gatsby:*" /usr/bin/node --nolazy --inspect-brk=39550 node_modules/.bin/gatsby develop "-H devarity.localhost" "-p 8000"
Debugger listening on ws://127.0.0.1:39550/4464f21f-3857-4942-975f-f4e5da75b827
For help see https://nodejs.org/en/docs/inspector
Debugger attached.
success open and validate gatsby-configs — 1.637 s
success load plugins — 0.121 s
success onPreInit — 1.137 s
success delete html and css files from previous builds — 0.016 s
success initialize cache — 0.004 s
success copy gatsby files — 0.037 s
success onPreBootstrap — 0.008 s
success source and transform nodes — 0.029 s
success building schema — 0.238 s
success createPages — 0.002 s
success createPagesStatefully — 0.034 s
success onPreExtractQueries — 0.004 s
success update schema — 0.120 s
⠁ gatsby:query-watcher Static query in /home/daniel/Dev/projects/devarity/src/components/Image.jsx has changed. +0ms
gatsby:query-watcher Static query in /home/daniel/Dev/projects/devarity/src/components/Layout.jsx has changed. +1ms
gatsby:query-watcher Static query in /home/daniel/Dev/projects/devarity/src/components/SEO.jsx has changed. +2ms
success extract queries from components — 0.091 s
success run graphql queries — 0.040 s — 8/8 205.09 queries/second
success write out page data — 0.007 s
success write out redirect data — 0.005 s
⡀ onPostBootstrapdone generating icons for manifest
success onPostBootstrap — 0.225 s
info bootstrap finished - 6.343 s
gatsby:html generating static HTML +0ms
gatsby:webpack-config Loading webpack config for stage "develop-html" +0ms
gatsby:webpack-config Building env for "develop-html" +4ms
gatsby:webpack-config Error resolving user loaders directory { Error: ENOENT: no such file or directory, stat '/home/daniel/Dev/projects/devarity/loaders'
at Object.fs.statSync (fs.js:948:11)
at Object.statSync (/home/daniel/Dev/projects/devarity/node_modules/graceful-fs/polyfills.js:295:24)
at getResolveLoader (/home/daniel/Dev/projects/devarity/node_modules/gatsby/dist/utils/webpack.config.js:390:16)
at /home/daniel/Dev/projects/devarity/node_modules/gatsby/dist/utils/webpack.config.js:421:22
at Generator.next (<anonymous>)
at asyncGeneratorStep (/home/daniel/Dev/projects/devarity/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (/home/daniel/Dev/projects/devarity/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
at tryCatcher (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/util.js:16:23)
at Promise.module.exports.Promise._settlePromiseFromHandler (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:512:31)
at Promise.module.exports.Promise._settlePromise (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:569:18)
at Promise.module.exports.Promise._settlePromiseCtx (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:606:10)
at _drainQueueStep (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:142:12)
at _drainQueue (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:131:9)
at Async._drainQueues (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:147:5)
at Immediate.Async.drainQueues (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:17:14)
at runCallback (timers.js:794:20)
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/home/daniel/Dev/projects/devarity/loaders' } +0ms
gatsby:webpack-config Loading webpack config for stage "develop" +895ms
gatsby:webpack-eslint-config Attempting to load package.json for eslint config check +0ms
gatsby:webpack-eslint-config Checking for eslint config file +1ms
gatsby:webpack-config Building env for "develop" +2ms
gatsby:webpack-config Error resolving user loaders directory { Error: ENOENT: no such file or directory, stat '/home/daniel/Dev/projects/devarity/loaders'
at Object.fs.statSync (fs.js:948:11)
at Object.statSync (/home/daniel/Dev/projects/devarity/node_modules/graceful-fs/polyfills.js:295:24)
at getResolveLoader (/home/daniel/Dev/projects/devarity/node_modules/gatsby/dist/utils/webpack.config.js:390:16)
at /home/daniel/Dev/projects/devarity/node_modules/gatsby/dist/utils/webpack.config.js:421:22
at Generator.next (<anonymous>)
at asyncGeneratorStep (/home/daniel/Dev/projects/devarity/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (/home/daniel/Dev/projects/devarity/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
at tryCatcher (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/util.js:16:23)
at Promise.module.exports.Promise._settlePromiseFromHandler (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:512:31)
at Promise.module.exports.Promise._settlePromise (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:569:18)
at Promise.module.exports.Promise._settlePromiseCtx (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:606:10)
at _drainQueueStep (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:142:12)
at _drainQueue (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:131:9)
at Async._drainQueues (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:147:5)
at Immediate.Async.drainQueues (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:17:14)
at runCallback (timers.js:794:20)
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/home/daniel/Dev/projects/devarity/loaders' } +0ms
DONE Compiled successfully in 2637ms 4:49:36 PM
You can now view devarity in the browser.
http:// devarity.localhost: 8000/
View GraphiQL, an in-browser IDE, to explore your site's data and schema
http:// devarity.localhost: 8000/___graphql
Note that the development build is not optimized.
To create a production build, use gatsby build
ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.
Waiting for the debugger to disconnect...
[1] 21280 killed env "NODE_ENV=development" "DEBUG=gatsby:*" /usr/bin/node --nolazy develop
Here's my config for the VSCode debug server:
{
"type": "node",
"request": "launch",
"protocol": "inspector",
"name": "Run Dev Server",
"cwd": "${workspaceRoot}",
"stopOnEntry": false,
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development",
"DEBUG": "gatsby:*"
},
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"args": [
"develop",
"-H devarity.localhost",
"-p 8000"
],
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": []
}
The dev server works fine when I run it from the command line manually, such as with yarn develop -H devarity.localhost -p 8000, so it's only failing on the VSCode debug server.
Anyone have any ideas? I'm having difficulty troubleshooting this.
dspacejs
on 11 Dec 2018
Related issues
brandonmp
·
3Comments
Oppenheimer1
·
3Comments
timbrandin
·
3Comments
ferMartz
·
3Comments
dustinhorton
·
3Comments
Most helpful comment
@LukeSchlangen A moment ago, I managed to get this to work on PC by changing the program value to "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby".