0.0.4 • Published 2 years ago

beansflight-cli v0.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

脚手架构建知识点

  • package.js 提供了项目的入口文件
      "main": "index.js",  // package.json
        
    #!/usr/bin/env  前边你这一大串是固定写法 官方叫法是shebang    
    index.js 顶部写了如下命令
 #!/usr/bin/env node  前边你这一大串是固定写法 官方叫法是shebang  第一行告诉程序加载器用 NodeJS 解析这个文件
 它的作用是根据当前文件配置的环境,执行当前文件 
  • node 自定义命令

    • 在package.json增加 bin属性
  • npm link 关联自定义命令

学习 nodejs 最重要的是什么?可能每个人都有自己的答案。

运行 nodejs 代码的时候,如果带上了 --inspect(可以打断点) 或者 --inspect-brk(可以打断点,并在首行断住) 的参数,那么就会以 debugger 的模式启动:

图片

为什么 debugger 要启动一个 websocket server 呢?

debugger 的含义就是要在某个地方断住,可以单步运行、查看环境中的变量。那么怎么设置断点、怎么把当前上下文的变量暴露出去呢,就是通过启动一个 websocket server,这时候只要启动一个 websocket client 连接上这个 server 就可以调试 nodejs 代码了。

debugger client

debugger client 一般都是有 ui 的(当然,在命令行里面通过命令来调试也可以,但一般不这么做)。常见的 js 的 debugger client 有 chrome devtools 和 vscode debugger 等。

我们写一个简单的 js 脚本,通过 node --inspect-brk 跑起来:

图片

可以看到它启动在了 9229 端口

然后,我们分别通过两种 client 连上它。

chrome devtools

在 chrome 地址栏输入 chrome://inspect,然后点击 configure 来配置目标端口:

图片

把刚才的端口 9229 填上去:图片

然后就可以看到 chrome 扫描到了这个 target,点击 inspect 就可以连上这个 debugger server。图片

图片

之后就可以设置断点、单步执行、执行表达式、查看作用域变量等,这些功能都是通过 v8 debug protocol 来实现的。

vscode debugger

在 vscode 里面写代码,在 chrome devtools 里调试比较麻烦,vscode 也实现了 debugger 的支持,可以直接用 vscode 来调试。

使用vscode 调试能力的方式是修改项目根目录下的 .vscode/launch.json 配置。

attach

点击右下角的按钮来添加一个配置项。这里选择 nodejs 的 attach:图片

因为已经通过 node --inspect-brk 启动了 websocket 的 debugger server,那么只需要启动 websocket client,然后 attach 上 9229 端口就行。图片

点击左侧的按钮,就可以连上 debugger server 开始调试:图片

launch

这样先通过 node --inspect-brk 启动 debugger server,然后再添加 vscode debug 配置来连接上太麻烦了,能不能把这两步合并呢?图片

当然可以,只要添加一个 launch 的配置:图片

图片

这里的 type 是 launch,就是启动 debgger server 并且启动一个 debugger client 连接上该 server。运行的程序是根目录下的 index2.js,还可以设置 stopOnEntry 来在首行断住。

点击调试,就可以看到能够成功的调试该 js 文件。

图片

vscode 会启动 debugger server,然后启动 debugger client 自动连接上该 server,这些都不需要我们去关心。

这样我们就可以成功的使用 vscode debugger 来调试 nodejs 代码。