将浏览器变成超级调试英雄的 6 种方法（ft. node.js + next.js！）

与我的其他一些帖子不同，这篇帖子将会非常直白。

我将介绍一些我在职业生涯中使用过的不常用的浏览器开发工具功能。

为了不浪费你的时间，一些基本操作被排除在外。例如
使用“console.log”，在样式面板中编辑 CSS，在“元素”选项卡中编辑 HTML，$0 元素引用等等。

目录：

1. 断点
2. 性能分析
3. 响应模式
4. 灯塔
5. 图层
6. Console.notJustLog

奖金：

1. Node.js 调试 + typescript
2. Next.js 服务器端调试

出发啦！ 🚀🚀🚀

1. 断点！[🔝]

天哪，这是第一个让我震惊的调试器，它让我明白了为什么调试器实际上是有用的。

这个想法很简单。代码是逐行编写的。
当你试图发现错误时，你正在逐行跟踪执行流程。
变量被赋值，函数被调用，循环运行等等，所有这些都会从各个地方读取或写入数据。

您会在 DevTools 的SOURCES选项卡中找到此内容。

通过设置断点，您可以查看代码状态以及其中包含的数据，从而了解代码的实际运行情况。
这使得查找错误变得容易得多！这比到处设置一百万个断点要快得多console.log。您甚至可以在断点处修改内存中的值！

它实际上就像双击一个值来更改它一样简单！（大多数情况下）

进一步阅读：使用断点暂停代码 | Chrome DevTools | Chrome for Developers

2. 性能分析[🔝]

“为什么这个操作花费的时间比预期的要长？我这里又没有进行任何 API 调用。”

代码（有时）的运行方式很神秘。
这显然不应该，但你经常会发现自己身处遗留代码库，或者只是一些随着时间的推移变得有点混乱的代码库。一些功能或操作本应非常简单易懂，但最终却会导致 UI 卡顿、触发重新渲染、多次 API 调用等等。

当您遇到用户交互（非异步操作）没有在 UI 上“几乎立即”发生的情况时，您可能让 CPU 承受了过高的负载。

可能发生这种情况的示例：

• 修改大量项目列表
• 在浏览器上根据数据集计算一些统计数据
• 复杂的 map/filter/reduce 用法
• 浏览器端对数据集进行搜索

一种方法是了解这些“阻塞时间”都花在了哪里。
“性能分析器”就在这里！就在开发者工具的“性能”选项卡里！（谁能想到呢？）

您已经看过上面的屏幕截图，但您是否知道您还可以设置 CPU 的速度限制以及可以同时使用多少个内核？

您还可以打开“源”面板来查看源文件，以准确了解所有时间都花在了哪些行上。

不幸的是，如果你有一个中间构建步骤，比如webpack、rollup等，这个功能可能不会那么直接有用，因为你的 JS 代码会被“编译”（或者如果你喜欢这样称呼它，则被“转译”）成看起来非常不同的东西。

看看！我明显遇到了一些递归调用问题，而且一些 CPU 占用高的逻辑也出现了。而且，通过上面的“Sources”面板，我可以看到这个问题，因为我为了这个例子创建了一个相当大的 for 循环。😄

3. 响应模式（又名设备模式）[🔝]

你有 99.8765% 的机会知道这是什么。
现在大部分互联网流量都来自移动设备。你肯定没调整过浏览器窗口大小无数次，看看它在不同设备上的显示效果。

但响应式模式的可配置性比大多数人想象的要高得多。
一般来说，人们会坚持使用设备预设。它的下拉菜单看起来有点像这样：

然而，它常常感觉不足以告诉您如何真正了解您的媒体查询处理有多全面，您的网络应用程序使用了哪些断点，并且只是让您很难理解您的应用程序如何在各种设备上运行......
再次，我在谈论如果您只坚持预设会发生什么。

释放“响应模式”的全部潜力

启用“响应模式”后，看到顶部那个三点的小菜单了吗？
打开该菜单后，它会“显示”所有允许启用的功能。
最后，将“尺寸”下拉列表的值设置为“响应式”。

您现在可以执行以下操作：

媒体查询
它会显示你的 Web 应用中使用的媒体查询。点击它们会将视口调整到所选宽度。我不确定是否也可以调整高度，但如果你知道，请留言。😃

标尺
无需猜测当前视口宽度。一把沿两个轴的精准标尺会告诉你……嗯……正是你期望的结果。

设备像素比
这在日常使用中不会造成太大困扰，因为浏览器会自动处理。
但这个选项指的是渲染一个软件像素需要多少个硬件像素。
抱歉，我不会在这篇文章中深入探讨这个话题，不过 MDN 上已经涵盖了：
Window: devicePixelRatio 属性 - Web API | MDN

当您使用 HTML Canvas 进行某些操作时，此属性尤其重要。

设备类型
这更像是一个用户代理类型的东西。更改此值可以告知目标服务器/网站访问页面的设备类型，以及该设备是否支持触摸。

不同的网站处理网络和移动设备的 UI 的方式非常不同。

您甚至可以通过拖动右下角来非常方便地调整其大小，而无需调整整个窗口的大小。

4. Lighthouse（和核心网络指标）[🔝]

如果你错过了，Lighthouse是一款可以告诉你网页整体“质量”的工具。你绝对猜不到它会在哪个标签页下。（提示：它和 Bright-house 押韵）

质量涵盖哪些内容？

• 页面加载性能和体验
• 页面可供有特定限制的人士访问
• SEO（即在搜索结果中显示的效果）
• 以及其他“最佳实践”

一般来说，灯塔分数越高越好：

• 您的用户体验将是
• 搜索结果的可见性将是

更好的可见性+更多的用户==金钱（通常）
所以，这对你可能很重要。

Lighthouse 可以为您提供有关如何进一步改善页面的相当全面的数据！

5. 图层检查器[🔝]

“为什么我的模态框会出现在这个工具提示的上方？”
“为什么这个按钮会出现在这个叠加层的上方？”
图层检查器是浏览器中最酷炫的功能之一，它允许您：

• 查看元素的堆叠上下文
• 了解是否有元素无意地呈现在其他元素之下或之上
• 确定某些层中的性能问题
• 查看可能部分或全部在屏幕外渲染的元素
• 最重要的是……感觉你的工作超级酷。我的意思是……看看这个！

PS：Edge 将其称为 3D 视图，但它也是一个功能略有不同的功能，但仍然可以实现许多相同的功能。

故事时间：

最近，我们意识到我们的产品登陆页面有一个错误，每个单独的图像和菜单项都被渲染了两次，并且精确地堆叠在一起，从视觉上看不出有什么问题。

我正在调查菜单中的一些内容，结果发现它们看起来不对劲，因为我引入了一些透明样式，这让菜单看起来很奇怪。

决定Cmd+Shift+C检查一下元素样式。没什么特别的异常。但我注意到该元素有两个实例。

现在我决定检查一下图层检查器，你看！我们的静态网站构建器也导致了很多其他图片的重复实例！感谢图层！

6. Console.notJustLog [🔝]

你知道吗……
console.log这是 2015 年的调试方法？

console这个对象允许你做很多事情。
以下是所有功能截图！

tl;dr：去读一下这个：控制台 - Web API | MDN

我将在下面介绍我最喜欢的 5 个功能console。

1.console.table太疯狂了！
这无疑是可视化大多数基本对象的最佳方法之一。虽然对于深度嵌套的对象来说效果可能不太好，但你知道，对于大多数对象来说，它已经足够好了！

2.console.group有助于限制日志过载，让你的眼睛
看不到。好吧，没有人会摆脱它console.log。但有时你可能需要记录太多的东西，然后真正有用的信息就会开始迷失在其他不太有用的日志的海洋中。
console.group允许您将日志嵌套在可能有多层深度的组中！

PS：console.groupCollapsed如果您不想默认开放您的群组，也可以这样做。

3.console.assert对于条件日志记录
如果你曾经做过类似的事情：

if (mycondition) console.log('Log stuff')

你可以利用它console.assert代替。

仅当第一个参数是时才记录false。

4.console.count用于“增量”日志记录。
您是否曾经觉得需要检查某个函数被调用了多少次，或者只是检查某些逻辑的运行次数，或许可以了解某个函数useEffect被触发的频率？
就在这里。

你不必传递像count label这样的静态字符串。
传递类似user.id或 的任何存储在你的对象或变量中的内容，你会看到你的逻辑使用这些特定值运行了多少次。

例如，useEffect当用户 ID 为 时，我的 被触发了多少次1001-1234？你可以用这个来回答console.count(user.id)！

5.console.trace理解函数是如何被调用的
。函数可以在任何地方被调用。
有时，理解一个特定的函数是如何被调用的，以及它从哪里被调用，可能会令人困惑。这部分内容会有所帮助。

额外福利：console.log。*很有天赋！ *
有时候，纯文本根本满足不了你的需求……这种时候，你可以用这个：

console.log('%cRed Text', 'color: red;');
console.log('%cGreen Text', 'color: green;');
console.log('%cBlue Text with Larger Font', 'color: blue; font-size: 18px;');
console.log('%cStyled Text', 'color: white; background-color: black; padding: 2px;');

[BONUS] 7. 在 Chrome 中调试 Node.js？[🔝]

你可以同时对 Javascript 和 Typescript 文件进行调试！
“什么？真的吗？我完全不知道！！但这怎么可能？！？”
好吧，我知道，太多了。
如果你已经熟悉这些，我很想听听你是如何在浏览器中使用 Node.js 进行调试的。如果你有什么我不知道的很棒的新想法，我会把它添加到帖子里！（当然，这归功于你）

但对于很多不知道这是可能的人来说，你可以看看这个……

1. 使用标志启动您的节点服务器--inspect。node --inspect index.js
   1. 如果您tsx碰巧使用，它的工作方式相同。tsx --inspect index.tsx
2. 前往 chrome://inspect/#devices。如果你使用的是基于 Chromium 的浏览器（例如 Edge、Brave、Arc），这个网址应该可以正常使用。
   1. 您应该会看到类似这样的内容。
   2. 点击检查
   3. 您应该会看到一个新窗口打开，如下所示：
      • 您会注意到我能够打印process对象的值。
      • 这是因为这个 devtools 实例在 node.js 上下文中运行

就是这样！
就像调试浏览器端代码一样，你也可以用它调试服务器端代码。

看我把调试器放好了！
注意：看到 xmas.ts 和 utils.ts 这两个文件了吗？它们各自都有一个“sourcemap”文件。
好奇那是什么项目吗？快来看看！
jayantbh/xmas-cli：圣诞树生成器

[BONUS/2！] 8. Next.js 服务器端调试？！[🔝]

哦，是的！您可以使用 Chrome Devtools 的所有功能来调试 Next.js 应用程序的服务器端逻辑。非常简单，就像 1、2、3 一样！

先决条件：您已在本地设置了 nextjs 应用程序并安装了所有软件包。

1. 运行NODE_OPTIONS='--inspect' yarn dev或NODE_OPTIONS='--inspect' npm run dev
   • 等到日志显示类似以下内容：Debugger listening on ws://127.0.0.1:9230/3473fa37-03ec-4dc9-9769-3fd97998f0b7 For help, see: https://nodejs.org/en/docs/inspector
2. 转到 chrome://inspect/#devices 和inspect代表您的应用的目标
   • 你可能会看到类似这样的内容：
   • 在这种情况下，next/dist/server/lib/start-server.js我需要inspect
   • DevTools 的一个实例将会打开。
3. 加载你的应用！前往 localhost:3000 或任何你应用需要加载的地址。就这样！
   • 一开始，您可能不会在源面板中看到与您的应用程序相关的任何文件，但是当您加载应用程序的各个部分时，它将开始显示在 devtools 中。
   • 一旦完成，您就可以放置断点、查看内存中的值、更改事物等！

希望这篇文章对你有用。🎉
我很想在评论区分享你如何用浏览器打造世界上最棒的调试器，无论是客户端还是服务器端！😃