在前端开发中，调试是一项十分重要的工作。一般情况下，我们会使用 console.log() 来输出调试信息，但是这样做存在一些问题，例如：
- 输出内容比较混乱，不利于查看调试信息；
- 如果
console.log()嵌套在循环或回调等异步操作中，会出现不符合预期的输出结果； - 在移动端开发中，由于调试工具不方便，通过
console.log()输出调试信息是十分困难的。
针对以上问题，我们可以使用 debug-popup-log 这个 npm 包来进行优化。
简介
debug-popup-log 是一个能够在页面中弹出调试信息的 npm 包。在使用该包时，你只需要在代码中使用 debug() 方法输出调试信息，就能够在页面中看到一个浮层显示调试信息，方便快捷。
安装
在终端中执行以下命令即可安装 debug-popup-log：
npm install debug-popup-log --save-dev
使用
在使用 debug-popup-log 之前，我们需要先在项目中引入该包：
import debug from 'debug-popup-log';
使用 debug() 方法输出调试信息，例如：
debug('hello world!');然后，在浏览器中打开当前页面，按下 Ctrl + Shift + L 快捷键，即可在页面中看到一个浮层显示调试信息。
配置
debug-popup-log 提供了一些配置选项，可以根据项目需要进行自定义配置。例如：
-- -------------------- ---- ------- -------------- -- ------------ -------- ----- -- ------------ ------ ----- -- ------- --------- ----- -- ---- ------------ ------------- ------ -- ------- ------- ----- -- ------ ----------- ------ -- ------- ----------- ----- -- ------- ------ ---------- ---
示例代码
以下是一个简单的使用示例：
-- -------------------- ---- -------
------ ----- ---- ------------------
--------------
-------- -----
------ -----
---
--- ---- - - -- - - --- ---- -
-------------- ------ -------
-
-------- -------------- -
--------------- ---- ----- ---------
------ ----------
--------- -- -----------
---------- -- -
-------------- ----- --------------------------
------ -----
---
-
------------------------------------------------
---------- -- -------------------通过使用 debug() 方法输出调试信息，我们可以看到在页面中显示了一个浮层，方便我们查看调试信息：
结语
debug-popup-log 是一款非常实用的调试工具，它能够方便我们查看调试信息，提高开发效率。希望本篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005660b81e8991b448e1ef9