使用nuxt.js开发如何调试的问题?

7 / 186

由于 nuxt 的渲染都是在服务端完成的,调试现在很不方便,经过百度发现,目前只能通过 debugger 进行断点调试,发起的 http 接口请求,浏览器 network 也看不到返回数据! 请问有更好的调试方法吗?

  • ## 刚试了一下 错误如下: avatar

  • avatar

  • 随影sky 18天前

    git clone 下来没做什么的修改,我不知道是什么 原因照成的这样?运行其他 script 可以正常 例如 npm run dev 不知道如何发送截图?尴尬了

    报错内容如下: F:\data\project\bbs-go\site>npm run debug

    bbs-go-site@1.0.0 debug F:\data\project\bbs-go\site node --inspect node_modules/.bin/nuxt

    Debugger listening on ws://127.0.0.1:9229/9bc9e5b4-c226-41c5-9d9b-d862bf442fee For help, see: https://nodejs.org/en/docs/inspector F:\data\project\bbs-go\site\node_modules.bin\nuxt:2 basedir=$(dirname"$(echo"$0"| sed -e's,\,/,g')") ^^^^^^^

    SyntaxError: missing ) after argument list at Module._compile (internal/modules/cjs/loader.js:895:18) at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) at Module.load (internal/modules/cjs/loader.js:815:32) at Function.Module._load (internal/modules/cjs/loader.js:727:14) at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10) at internal/main/run_main_module.js:17:11 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! bbs-go-site@1.0.0 debug: node --inspect node_modules/.bin/nuxt npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bbs-go-site@1.0.0 debug script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\linlong\AppData\Roaming\npm-cache_logs\2020-01-04T07_55_26_200Z-debug.log

    发截图你可以熟悉一下 markdown 语法。评论是支持 markdown 的。

  • 搁浅~ 19天前

    1. 首先执行下面命令启动服务

    npm run debug
    

    2. 使用 chrome 打开网页

    使用 chrome 打开网页之后,打开控制台,然后点击下图所示的按钮,连接DevTools

    image.png

    成功连接DevTools会打开下图所示页面。

    image.png

    3. 添加断点

    去你想要添加断点的地方加上debugger,如下图所示:

    image.png

    然后刷新页面,当代码执行到debugger位置的时候就能够进入断点。

    image.png

    git clone 下来没做什么的修改,我不知道是什么 原因照成的这样?运行其他 script 可以正常 例如 npm run dev 不知道如何发送截图?尴尬了

    报错内容如下: F:\data\project\bbs-go\site>npm run debug

    bbs-go-site@1.0.0 debug F:\data\project\bbs-go\site node --inspect node_modules/.bin/nuxt

    Debugger listening on ws://127.0.0.1:9229/9bc9e5b4-c226-41c5-9d9b-d862bf442fee For help, see: https://nodejs.org/en/docs/inspector F:\data\project\bbs-go\site\node_modules.bin\nuxt:2 basedir=$(dirname"$(echo"$0"| sed -e's,\,/,g')") ^^^^^^^

    SyntaxError: missing ) after argument list at Module._compile (internal/modules/cjs/loader.js:895:18) at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) at Module.load (internal/modules/cjs/loader.js:815:32) at Function.Module._load (internal/modules/cjs/loader.js:727:14) at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10) at internal/main/run_main_module.js:17:11 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! bbs-go-site@1.0.0 debug: node --inspect node_modules/.bin/nuxt npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bbs-go-site@1.0.0 debug script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\linlong\AppData\Roaming\npm-cache_logs\2020-01-04T07_55_26_200Z-debug.log

  • 1. 首先执行下面命令启动服务

    npm run debug
    

    2. 使用 chrome 打开网页

    使用 chrome 打开网页之后,打开控制台,然后点击下图所示的按钮,连接DevTools

    image.png

    成功连接DevTools会打开下图所示页面。

    image.png

    3. 添加断点

    去你想要添加断点的地方加上debugger,如下图所示:

    image.png

    然后刷新页面,当代码执行到debugger位置的时候就能够进入断点。

    image.png

  • 搁浅~ 20天前

    可以调试的,明天给你回帖告诉你方法,现在在外面玩,没电脑。

    好的,幸苦大佬了,祝你完得开心~

  • 可以调试的,明天给你回帖告诉你方法,现在在外面玩,没电脑。

公众号
码农俱乐部
关注公众号订阅更多技术干货!