如何在浏览器中查看Promise resolve返回的data值？

现有如下JavaScript代码：

const myPromise = new Promise((resolve, reject ) => {
    setTimeout(() => { 
        console.log("log1!")
        resolve({
            name: 'whatever',
            age: 17
        })
    }, 3000)
})

myPromise.then((data) => data.age) // 此处设置断点

调试时遇到的问题：在上述代码的then行设置断点，只会在Promise触发时暂停，无法查看resolve后的data；尝试用浏览器的“美化打印”功能也无法拆分该行，没法添加断点查看结果。

以下是几种可行的解决办法：

• 把箭头函数拆成多行写法，手动拆分后就能给回调函数单独加断点：

  myPromise.then((data) => {
    // 在这里加断点，resolve执行后会自动暂停，直接查看data
    return data.age;
  })
  

  这种方式不需要额外调试技巧，修改代码后调试器能识别函数体的行，断点触发时就能看到data的具体内容。

• 使用调试器的日志断点或条件断点：
  不用改代码，在原断点行右键选择“编辑断点”，可以添加日志语句（比如console.log(data)），Promise resolve后会自动在控制台打印data；也可以设置条件为data，当data存在时调试器会暂停，此时就能查看data。

• 利用浏览器的Promise调试监听：
  打开开发者工具的Sources面板，找到“Event Listener Breakpoints”并展开，找到“Promises”分类，勾选“Resolve”选项。当Promise被resolve时，调试器会自动暂停，此时在调用栈中找到then的回调函数，就能查看data参数的内容。

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