更新记录

0.0.5（2026-04-30） 下载此版本

• 当选中的是解构左侧元素，且当前行末尾进入了 { 结构时，日志会生成在 }) 或 } 的下一行。

0.0.4（2026-04-21） 下载此版本

• 优化选中对象或数组左侧变量插入位置

0.0.3（2026-04-16） 下载此版本

• 选中对象或数组声明左侧变量名时，生成的日志会插入到对应 } 或 ] 之后，不再插入到对象 / 数组内部。
• 优化多行表达式场景，选中赋值左侧变量名时，日志会尽量插入到整个表达式结束之后。
• 优化 map、forEach 等链式调用场景，选中调用左侧对象时，生成的日志会放到整段调用结束后。

平台兼容性

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件

# Quick Log Plugin

Quick Log Plugin 是一个面向 HBuilderX 的日志辅助插件，专门用来提升调试效率。

功能概览

插件当前提供 5 个命令：

快速开始

安装方式

1. 将当前插件目录放入 HBuilderX 的 plugins 目录。
2. 重启 HBuilderX。
3. 打开任意代码文件，在编辑器右键菜单中即可看到 Log 相关命令。

快捷键

Log 生成日志 已绑定快捷键：

• Windows：Ctrl + Alt + D
• macOS：Command + Alt + D

使用前请确保编辑器处于焦点状态。

详细用法

1. 生成日志

当你在编辑器中选中变量或表达式后，执行 Log 生成日志，插件会根据代码结构自动选择更合适的插入位置。

示例：

const count = total;

选中 count 后执行命令，会生成：

const count = total;
console.log('count: ', count)

2. 根据代码结构智能选择插入位置

插件会尽量把日志放在“当前结构之外”或“当前作用域之内”的合理位置，常见规则如下。

普通变量默认在当前行下一行插入：

const count = total;
console.log('count: ', count)

当选中的是对象或数组声明左侧变量名时，日志会插入到对象 / 数组闭合之后，而不是插入到内部：

const obj = {
    name: 'demo'
}
console.log('obj: ', obj)

const list = [
    1,
    2
]
console.log('list: ', list)

当右侧是多行链式表达式时，选中赋值左侧变量名，日志也会插入到整个表达式结束之后：

const arr3 = arr2.map(item => {
    return item * 2
})
console.log('arr3: ', arr3)

当左侧是解构赋值，且当前行末尾进入了对象字面量或函数传参中的对象结构时，选中解构元素也会插入到整个表达式结束之后：

const { data } = foo({
})
console.log('data: ', data)

const { info } = {
}
console.log('info: ', info)

const [ data ] = {
}
console.log('data: ', data)

当选中链式调用左侧对象名，且后面紧跟 map、forEach 等多行调用时，日志同样会插入到整个调用结束之后：

arr2.forEach(item => {
    return item * 2
})
console.log('arr2: ', arr2)

但如果选中的是箭头函数参数，例如 item => {} 里的 item，日志会优先插入到函数体内部第一行，方便调试回调参数：

arr2.forEach(item => {
    console.log('item: ', item)
})

外置打印时，生成的 console.log 会与当前语句所在层级对齐，不会额外缩进到对象内部或回调函数内部。

目前这类“外置打印”规则主要覆盖以下场景：

• 对象或数组声明左侧变量名
• 多行赋值表达式左侧变量名
• map、forEach 等链式调用左侧对象名
• 对象属性赋值左侧对象名，例如 obj2.arr = [] 中选中 obj2
• 解构赋值左侧元素，且当前行末尾进入了 { 结构

3. 自动补全对象链

插件支持向左补全连续的对象访问链。

例如原代码：

user.name

如果你只选中 name，插件不会只生成 name，而是会识别前面的访问链，最终生成：

console.log('user.name: ', user.name)

更长的链式访问同样适用，例如：

form.user.profile.nickname

如果只选中 nickname，会生成：

console.log('form.user.profile.nickname: ', form.user.profile.nickname)

4. 未选中文本时复制当前行

如果没有选中任何内容，执行 Log 生成日志 时不会生成 console.log，而是复制当前行到下一行，方便你快速复制代码结构。

5. 注释所有日志

执行 Log 注释所有日志 后，插件会批量处理当前文档中的整行 console.log，例如：

console.log('count: ', count)

会变为：

// console.log('count: ', count)

这个操作适合临时关闭调试输出，但保留代码以便稍后恢复。

6. 取消所有注释日志

执行 Log 取消所有注释日志 后，插件会恢复已被注释的整行日志：

// console.log('count: ', count)

会变为：

console.log('count: ', count)

7. 清理未注释日志

执行 Log 清除所有未注释日志 后，插件会删除当前文档中所有未注释的整行 console.log。

适合在提交代码前快速清理活跃调试输出。

8. 清理已注释日志

执行 Log 清除所有已注释日志 后，插件会删除已经被 // 注释的整行 console.log。

适合在临时调试结束后彻底移除历史日志痕迹。

适用范围说明

当前版本的批量注释、取消注释、删除逻辑，主要面向“整行 console.log(...)”场景。

这意味着以下写法是插件最稳定的处理目标：

console.log('value: ', value)

而对更复杂的内联表达式、字符串拼接或嵌套场景，建议先确认代码结构后再执行批量操作。