Chrome 开发工具中的调试技术答案

【问题标题】：Debugging techniques in Chrome Dev ToolsChrome 开发工具中的调试技术
【发布时间】：2017-10-11 11:58:05
【问题描述】：

以下是我正在调试的 Redux 代码的 sn-p，真的没什么特别的。我的问题是关于在 Chrome 开发工具中调试它。

问题是在回调.then(({ data }) => dispatch({ 中设置断点（bp）。我可以在这条线上设置一个 bp，但是由于箭头函数调度，我不能在这个函数中在 user: data.results[0], 上设置一个 bp。

我可以做些什么来设置一个 bp 以便我可以检查 data 或 data.results[0]
我可以以某种方式调试承诺链吗？

export const login = (username, password) => (dispatch) => {
  return dispatch({
    type: LOGIN,
    payload: {
      username,
      password,
    }
  })
  .then(({ data }) => dispatch({
    type: LOGIN_SUCCESS,
    payload: {
      user: data.results[0],
    },
  }))
  .catch((error) => {
    dispatch({
      type: LOGIN_FAIL,
      payload: {
        error: error.message,
      },
    });
  });
};

【问题讨论】：

为什么不将dispatch 的调用以与.catch 相同的方式封装在大括号中？那么这是一个单独的语句，您可以在其上设置断点。是的，最终的代码不一定需要它，但是好的代码也可以让你轻松调试 - 选择让你的生活变得最简单的东西，不一定是绝对干净的代码
据说Chrome现在可以handle breakpoints on inline functions & arrows了。虽然在使用源地图时对我不起作用 - 但你可能会取得更大的成功
干杯詹姆斯和 Codingintrigue

标签： javascript google-chrome ecmascript-6 promise

【解决方案1】：

用下面给出的文本替换 .then 函数：

  .then(function({ data }) { 
    dispatch({
        type: LOGIN_SUCCESS,
        payload: {
          user: data.results[0],
        },
      })
    })

现在你应该可以调试了。

您可以参考JavaScript promise resolving with setTimeout 了解更多 => 和 function(){}

【讨论】：

【解决方案2】：

你试过了吗

debugger;

和断点一样，但是调试后别忘了去掉=)

【讨论】：

这将是多余的。为了引入debugger; 语句，您需要引入一个代码块。无论如何，您都可以在其上设置断点...