抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

需求

使用 Hexo 的过程中发现了一些小问题,可能是插件导致的,一般程序出现异常,进入 debug 调试模式是比较稳妥的方案,于是就想 Hexo 是不是也能调试一下。Hexo 是基于 Node.js 的一个静态站点生成框架,所以调试代码自然也是没问题。

创建配置文件

在 Visual Studio Code 中 使用 VSCode 打开 Hexo 项目,点击左侧的 Debug 图标,再点击 Create a launch.json file

方法1:Node.js运行

修改文件内容如下:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug hexo",
            // #hexo可执行文件位置
            "program": "${workspaceFolder}/node_modules/hexo/bin/hexo",
            "args": [ //#这里是参数,根据自己情况酌情修改
                "g",
                "--debug"
            ],
            "console": "internalConsole",
            "outputCapture": "std"
        }
    ]
}

参数说明:

request

  • launch:启动独立的具有 debug 模式的程序
  • attach :监听已经启动的程序

args

  • g:执行 hexo g 生成静态文件的时候启动调试,也可以设置为 deploy 等其它命令,当执行这些命令的时候就进入调试模式了。

方法2:NPM 运行

  1. 打开根目录下的 package.json 文件,添加这个选项:

      "scripts": {
        "build": "hexo generate",
        "clean": "hexo clean",
        "deploy": "hexo deploy",
        "server": "hexo server"
      }
  2. 修改 launch.json 文件

    {
        "version": "0.2.0",
        "configurations": [
          {
            "type": "node",
            "request": "launch",
            "name": "Debug Hexo via npm",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
              "run", "build"
            ],
            "console": "internalConsole",
            "outputCapture": "std"
          }
        ]
    }

    参数说明

    runtimeArgs:这里的 build 可以设置为第一步选项中的命令

方法3:node-cli

  1. 安装依赖模块 node-cli

    $ npm install -save-dev node-cli
  2. 打开根目录下的 package.json 文件,添加这个选项:

      "scripts": {
        "build": "hexo generate",
        "clean": "hexo clean",
        "deploy": "hexo deploy",
        "server": "hexo server",
        "debug-generate": "node ./node_modules/hexo-cli/bin/hexo generate --debug"
      }
  3. 修改 launch.json 文件

    {
        "version": "0.2.0",
        "configurations": [
          {
            "type": "node",
            "request": "launch",
            "name": "Debug Hexo via npm",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
              "run", "debug-generate"
            ],
            "console": "internalConsole",
            "outputCapture": "std"
          }
        ]
    }

启动调试

  1. 不管使用以上哪种方法,修改配置文件后保存。
  2. 打开 node_modules 目录找到需要调试的插件添加断点
  3. 点击 Visual studio code 左侧的 Debug 图标,再点击“绿色三角调试按钮”(或 F5)即可进入调试模式。

说明

launch.json 文件中的 console 参数设置为:internalConsole,调试信息显示在 VSCode 的 DEBUG CONSOLE 窗口,也可以设置为: integratedTerminal,调试信息将会显示在 TERMINAL 终端窗口中。

评论