Chrome Devtools中能否添加指定条件触发的Conditional Logpoint

完全可以，Chrome DevTools 原生支持这个能力，不需要安装任何插件。你已经掌握普通Logpoint和条件断点的用法的话，上手零成本，这个功能没有做单独的右键菜单入口，藏在条件断点的能力里，很多人没注意到而已。

操作步骤 #

• 定位到你需要加日志的代码行，右键点击对应行号，在弹出菜单里选择Add conditional breakpoint（不要选普通的Add logpoint，普通Logpoint没有条件配置入口）
• 根据你的Chrome版本选对应写法即可：
  • 98及以后的新版Chrome：弹出条件输入框后，点输入框上方的模式下拉选择器，把默认的Break when condition is true切换为Log模式，直接在输入框写带条件判断的日志表达式就行，比如：

    if (userId === 'test_001') console.log('匹配到测试用户，当前接口返回值', res)
    

    写完按回车确认就配置完成了，运行时只有条件满足才会在控制台输出日志，全程不会中断代码执行，和普通Logpoint的非阻塞特性完全一致。
  • 旧版Chrome兼容写法：不需要切换模式，直接在条件输入框写短路逻辑表达式，把判断条件放在&&前面，日志逻辑放在后面，比如：

    userId === 'test_001' && console.log('匹配到测试用户，当前接口返回值', res)
    

    这个写法的原理很简单：条件断点只有在输入的表达式返回truthy值时才会触发代码暂停。条件不满足时，&&前面的判断为false，直接短路不执行console.log，整体返回false不会断住；条件满足时，执行完console.log后，因为console.log的返回值是undefined（属于falsy值），整个表达式依然返回falsy，同样不会触发断点暂停，刚好实现「条件满足才打日志、不阻塞代码运行」的效果。

避坑提示 #

• 不要把console.log写在&&运算符前面，否则会变成每次执行到这行都输出日志，完全失去条件过滤的作用
• 输入框里支持写任意合法JS逻辑，不局限于简单的相等判断，你可以写多条件组合、甚至调用自定义工具函数处理要输出的内容，灵活度比独立的条件日志点入口更高
• 配置完成后，行号位置会显示橙色的断点标识，部分版本会在标识上加小标记标注是带条件的日志点，和普通Logpoint视觉差异不大

内容的提问来源于stack exchange，提问作者serge