90% 的前端工程师都不知道的浏览器调试骚技巧

2023-12-03 18:54:47

前言

作为一名前端工程师，我们经常需要调试代码来解决各种问题。而浏览器调试工具是我们的好帮手，可以让我们快速定位和解决问题。但你知道吗？在浏览器调试工具中还有很多鲜为人知的骚技巧，可以极大地提高我们的调试效率。今天，我就来分享两个这样的技巧：条件断点和重新发起请求。相信我，90% 的前端工程师都不知道这些骚操作，绝对让你眼前一亮，直呼：好骚啊！

条件断点

条件断点允许我们在满足特定条件时才触发断点。这对于调试复杂代码非常有用，因为我们可以只关注特定条件下的代码执行情况。

使用方法：

在断点行号处，右键单击并选择 "Add conditional breakpoint..."，然后输入条件表达式。例如，要仅在 count 等于 10 时触发断点，我们可以输入 count == 10。

重新发起请求

重新发起请求功能允许我们重新发送之前发送过的请求，而无需刷新页面。这对于调试 API 请求非常有用，因为我们可以轻松地修改请求参数或 headers，并查看服务器的响应。

使用方法：

在网络面板中，找到要重新发起的请求，然后右键单击并选择 "Replay XHR"。

骚气十足的应用场景

场景 1：调试异步代码

条件断点可以帮助我们调试异步代码，例如 Promise 或回调函数。我们可以设置条件，只在特定值或错误发生时触发断点，从而专注于调试关键代码路径。

场景 2：调试网络请求

重新发起请求功能可以帮助我们调试网络请求，例如 API 调用。我们可以修改请求参数或 headers，重新发起请求，并查看服务器的响应。这可以帮助我们快速定位和解决 API 问题。

场景 3：调试复杂条件

条件断点允许我们设置复杂的条件，以触发断点。这对于调试条件复杂的代码非常有用，我们可以只关注满足特定条件下的代码执行情况。

结语

条件断点和重新发起请求是浏览器调试工具中的两个强大的技巧，可以极大地提高我们的调试效率。掌握这些技巧，相信你也能成为一名调试高手，轻松解决各种前端问题。

最后，为了让大家更好地理解这些技巧，我准备了两个示例代码片段。第一个示例展示了如何使用条件断点调试异步代码，第二个示例展示了如何使用重新发起请求调试 API 调用。

示例代码片段 1：

async function myFunction() {
  const result = await fetch('https://example.com/api');
  if (result.status !== 200) {
    throw new Error('API call failed');
  }
  return result.json();
}

条件断点： result.status !== 200

示例代码片段 2：

fetch('https://example.com/api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'John Doe' }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));