面试题：JavaScript异步编程中如何利用Chrome DevTools调试Promise

Question

在JavaScript异步编程里，Promise是常用的异步处理方式。请描述一下如何借助Chrome DevTools来调试包含Promise的代码，例如如何查看Promise的状态变化、捕获Promise的拒绝原因等。

Answer 1

查看Promise状态变化

1. 断点调试：在包含Promise的代码中设置断点。在Chrome DevTools的Sources面板中，找到对应的JavaScript文件，点击行号添加断点。当代码执行到断点处，在Scope面板中，展开Local作用域，可以看到Promise对象。如果Promise已经解决（resolved），会显示[[PromiseState]]: "fulfilled"和[[PromiseResult]]（存储解决的值）；如果是被拒绝（rejected），会显示[[PromiseState]]: "rejected"和[[PromiseReason]]（存储拒绝原因）。
2. 使用console.log：在Promise的then和catch回调函数中使用console.log输出状态信息。例如：

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});

promise.then(value => {
    console.log('Promise resolved with:', value);
}).catch(reason => {
    console.log('Promise rejected with:', reason);
});

在Chrome DevTools的Console面板中，就可以看到输出的状态信息。

捕获Promise的拒绝原因

1. 使用catch块：在Promise链的末尾添加catch块来捕获拒绝原因，并在其中使用console.log输出。如上述代码中，catch块会捕获Promise被拒绝时的原因并打印。
2. 未处理的Promise拒绝监控：Chrome DevTools提供了对未处理的Promise拒绝的监控。在Console面板中，当有未处理的Promise拒绝时，会有相应的警告信息显示，点击该警告可以跳转到发生拒绝的代码位置，并在右侧的详细信息中看到拒绝原因。还可以通过在代码中使用window.addEventListener('unhandledrejection', function(event) { console.log('Unhandled Promise rejection:', event.reason); });来主动捕获未处理的Promise拒绝，并打印拒绝原因。