前段时间帮一个朋友排查前端问题。他在页面里引了一个第三方库，打包上线之后某个功能挂了，但本地开发环境跑得好好的。
我说："那你直接在源码里打个断点看看呗。"
他说："源码我改了，但打包之后不是压缩了嘛，整个文件就一行，几万个字符。我在那一行打了断点，程序停下来了，但我根本不知道它停在哪一句上。"
我凑过去看了一眼。那一行确实很长，横向滚动条拖到底都看不到头。他在那一行上打了一个红点，调试器确实停住了，但调用栈里的位置显示的是“这一整行”，而不是具体的某个语句。
他试着用 console.log 往里面插，但压缩代码没法直接改。他又试着把那行拆开，结果发现拆完之后打包配置又对不上。
折腾了半个下午，最后是靠二分法一点点缩小范围找到的问题。
当时我就想：如果断点能打在这一行里的某个具体位置，而不是整行，是不是就不用这么折腾了？
后来我才发现，VS Code 其实已经加了类似的功能，叫列断点（Column Breakpoints）。
为什么一行多语句这么难调？
正常写代码的时候，我们通常是一行一个语句。这种情况下，行断点够用。
但有些场景，一行里会塞进多个语句：
压缩后的代码。 打包工具把整个文件压成一行，几千个语句挤在一起。你在这一行打断点，程序停了，但停在哪一句？不知道。
链式 Promise。 JavaScript 里常见的写法：
fetchData().then(res => res.json()).then(data => process(data)).catch(err => handleError(err));
这一行里有四个可执行语句。你想知道是 fetchData 出了问题，还是 process 出了问题，行断点只会告诉你“这一行有问题”，但不会告诉你具体是哪一个。
逗号表达式。 C 语言里的 a = 1, b = 2, c = 3;，一行三个赋值操作。
列断点就是为了解决这种“一行多语句”的调试场景而生的。
它怎么用？
在调试会话中，把光标放在某一行的某个位置，按 Shift + F9，断点会打在这个“列位置”上，而不是整行上。
如果你在同一行的不同位置分别按 Shift + F9，就会在同一行上生成多个断点，每个断点对应一个不同的语句。
vscode更强的一点是，为了管理多个列断点，还支持编辑它们
在调试面板里，这些断点会按列位置分开显示，让你一眼就能看出程序到底停在了哪个语句上。
说实话，这个功能不是给所有人用的。但如果你曾经在一行几百个字符的压缩代码里，对着一个行断点发呆，不知道程序到底停在哪——这个功能，就是为你准备的。
