在前端开发中，调试是一个不可避免的过程。随着浏览器越来越强大，Chrome浏览器也提供了丰富的调试功能，开发者们也借助这些调试工具提高了调试效率。本文介绍了通过npm包chrome-debugging来使用Chrome调试工具的方法，让我们可以更加方便地调试我们的应用程序。
安装chrome-debugging
chrome-debugging是一个npm包，我们需要先安装该包。可以使用如下命令来安装：
npm install -g chrome-debugging
启动调试
安装完成后，我们可以通过chrome-debugging命令来启动调试。如下例所示，启动调试前，我们先需要启动需要调试的应用程序（netcoredemo）：
ng serve --open
然后使用如下命令来启动chrome-debugging：
chrome-debugging
这将会打开Chrome浏览器开发工具并自动显示调试窗口：
可以看到左侧有一些调试选项，右侧是显示网页的窗口。这是Chrome浏览器开发工具的常规操作界面，在这个界面上，我们可以执行常规的调试操作，如打断点，检查代码等。
进行调试
接下来让我们开始进行调试操作。
设置断点
首先，我们需要在代码中设置断点，以便能够在运行中暂停代码执行。只需打开文件并在要设置断点的行上单击即可。在本例中，我们将在“app.component.ts”文件中设置断点:
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ -------------------- -- ---
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - --------------
-- ---
----------- -
------------ ---------
-
-在这个示例代码中，我们在两个位置上设置了断点，分别在行1和行10上。我们还设置了一个“greetUser”函数用于在单击按钮时弹出一个警告。这是一个非常简单的示例，我们将在下面进行更多的调试操作。
在浏览器上测试
接下来让我们测试应用程序并查看这些断点的效果。然后打开http://localhost:4200/URL，应用程序就会在浏览器窗口中显示出来。
在网页上单击“点击我”按钮，它将调用“greetUser”函数。此时将在行10上停止代码执行。可以按F12打开Chrome浏览器开发工具，打开控制台可以看到如下信息:
在调试窗格中，可以查看程序状态和调用堆栈。如果您需要更多的调试信息，您可以在右侧面板中选择调试器选项卡来调试。在这个选项卡中，您可以查看变量、堆栈和代码。
高级操作
chrome-debugging还提供了其他调试工具，如设置条件断点等。例如，我们可以设置只有在满足特定条件时才停止执行：
greetUser(userName:string) {
if(userName == 'testuser')
return;
alert('Hello World!');
}在以上示例中，如果userName等于“testuser”，那么返回，不会弹出“Hello World”警告。如果要在特定条件下停止执行，可以在断点设置对话框中设置条件。
我们也可以通过打印日志来调试代码。如下代码所示：
title = 'netcoredemo';
constructor() {
console.log('Hello Constructor'); // 打印信息
}将在控制台窗口中显示日志信息。
结论
chrome-debugging是一个非常强大的npm包，可以方便地使用Chrome浏览器开发工具。我们可以使用它来进行高效的调试，以便更快地检测和修复错误。它提供了许多强大的调试功能，如断点设置、条件断点设置、设置异常、日志打印等。本文介绍了使用chrome-debugging的基础知识，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005577b81e8991b448d47a8