简介
postcss-devtools 是一款 PostCSS 插件，它可以为开发者提供更加便捷的 CSS 调试工具。通过在浏览器中显示所使用的样式规则，以及从源代码映射回到源文件中，能够更加容易地调试 CSS。
安装
你可以使用 npm 进行安装：
npm install postcss-devtools --save-dev
配置
webpack
如果你使用 webpack 构建项目，你需要在 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- --------------- - ----------------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
---------------
-------------
-
------- -----------------
-------- -
-------- ------------------
--
--
--
--
--
--
-- ---
--Gulp
如果你使用 Gulp 构建项目，你需要添加以下代码：
-- -------------------- ---- -------
----- ------- - ------------------------
----- --------------- - ----------------------------
---------------- -- --
----
-----------------
---------------------------------
------------------------
--使用
当插件安装和配置完成后，即可在开发过程中使用。当你在浏览器中打开页面并启动 devtools 工具时，你将会看到一个 __SOURCE_MAP__ 栏。在该栏中，你可以查看当前使用的样式规则以及从源代码映射回到原始 CSS 文件。
例如：
/* main.css */
body {
background-color: #fff;
}当该文件被编译后，在浏览器中将会生成如下 CSS 规则：
/* Generated by postcss-devtools */
body {
background-color: #fff;
/* src/main.css:2 */
}在这里，我们可以清晰地看到该规则来自于源代码文件的第二行。
总结
postcss-devtools 是一款非常实用的 CSS 调试工具，能够帮助开发者更加便捷地调试 CSS 代码。通过安装、配置和使用该插件，我们可以更快速地追踪问题并提高开发效率。
示例代码：https://github.com/postcss/postcss-devtools
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46600