利用webstorm 或 node-inspector + chrome 调试nodejs项目

利用Express生成器,几行命令,分分钟即可搭建WEB服务框架, 活跃的社区环境也提供了大量的模块以提高开发效率,githube挂载了许多开源的项目供参考和学习,总之这样一款优秀的框架很值得我们学习。

框架的搭建,官网有述, 简单至及, 略......

下面介绍一下nodejs的调试方法:

首先简单介绍一下用webstorm调试



下面介绍一下使用node-inspector 和chrome浏览器调试程序

1, 首先使用npm安装:$ npm install -g node-inspector

2,验证是否安装成功:$ node-inspector -v 正常的话会显示版本号 例 Node Inspector v0.12.5

3,打开cmd窗口,运行程序, 进入Debug模式:$ node --debug ./bin/www (这里用的是Express 4, 所以入口文件为./bin/www)

4,打开浏览器,访问程序页面:http://localhost:3000/ (这里用的是Express 4,默认端口3000,下面使用node-inspector 也要监听这个端口)

5,打开新的cmd窗口,运行node-inspector: $ node-inspector --web-port=3000 (这里的3000要和上面4中的端口匹配)

6,运行5后,会提示Visit http://127.0.0.1:3000/?ws=127.0.0.1:3000&port=5858 to start debugging. 打开浏览器,在新窗口中访问前面的地址,得到如下画面


7, 回到浏览器,在程序页面发送数据或请求,程序会自动在断点处停下,鼠标悬停,可以查看变量的值, 如下图:



本人也是刚接触nodejs不久, 希望能和大家共同进步, 贴中如有差错, 请留言, 我会尽快修改。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用webstorm导入element-ui时,可能会出现警告。这个警告通常是由于缺少样式文件导致的。我们可以通过以下几种方法来解决这个问题: 1. 完整引入Element:这种方法是在入口文件中引入Element的样式文件,可以解决警告问题。具体步骤如下: - 打开项目,使用webstorm导入element-ui。 - 在入口文件中引入Element的样式文件,可以参考中的代码示例。 - 重新运行项目,警告应该已经消失了。 2. 按需引入Element:按需引入只导入所需的Element组件和样式,可以减小打包体积。具体步骤如下: - 打开项目,使用webstorm导入element-ui。 - 执行命令 `npm i babel-plugin-component -D` 安装 `babel-plugin-component`。 - 在项目的Babel配置文件中添加以下代码: ``` module.exports = { plugins: [ ['component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }] ] } ``` - 在需要使用Element组件的文件中按需引入,可以参考中的代码示例。 - 重新运行项目,警告应该已经消失了。 3. 使用npm安装:如果以上方法无法解决问题,可以尝试使用npm的方式安装element-ui,这种方式能够更好地和webpack打包工具配合使用。具体步骤如下: - 打开项目,使用webstorm导入element-ui。 - 执行命令 `npm i element-ui -S` 安装element-ui。 - 重新运行项目,警告应该已经消失了。 综上所述,你可以根据你的需求选择合适的方法来解决webstorm导入element-ui的警告问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值