有没有办法去调试比如webpack这些的脚步命令呢？

Question

比如一个script的命令是
npm run dev
webpack xxxx
这种
我只想npm run dev的时候怎么才能进到断点里面去？
怎么打断点？
想通过这种方式学习一些源代码相关的东西

Answer 1

双越 2020-01-04 22:39:41

第一，在想要打断点的地方，写 debugger

第二，将 npm dev 命令改成  "dev": "./node_modules/.bin/nodemon --inspect=9229 bin/www" （得安装 nodemon）

第三，打开浏览器访问  chrome:inspect ，接口看到调试链接

第四，访问 nodejs 服务，即可断点

• 提问者 李行知 #1

  bin/www 是什么意思？那webpack跟gulp这些命令怎么写呢？

• 双越 回复 提问者 李行知 #2

  你去找 gulp 的入口文件，一般在 package.json 中，找 main 字段。

• 提问者 李行知 回复 双越 #3

  还是有问题
  以gulp作为例子，我写了两条命令
      "dev:debug": "./node_modules/.bin/nodemon --inspect=9229 ./node_modules/gulp/bin/gulp.js",
  
  如果使用这个得话，那么我写在gulpfile.js中的内容会执行，但是不会debug住，也不会出现对于的inspect
  而使用
      "dev:d2": "./node_modules/.bin/nodemon --inspect-brk=9229 ./node_modules/gulp/index.js"
  
  那么文件的内容就不会执行，断点位置也不正确

点开查看后面1条评论

Answer 2

双越 2020-01-04 17:57:26

没看懂你的问题。你是想要启动 webpack 项目，运行它的源码？

• 提问者 李行知 #1

  举个例子，我现在允许npx gulp执行gulp命令，然后我在gulpfile.js中使用了gulp的相关api，我现在想做的事情是，在一开始的地方打一个debugger，然后程序运行到这里的时候停止下来，然后我一步步的看一下，通过debugger深入到gulp的源代码中去，帮助我理解gulp到底做了什么事情，感觉这样比干看源代码会更加的好一点