文本浏览器的Devtools可以帮助我们调试CSS，例如：添加、修改、删除某个CSS属性，查看盒子模型，还有一个颜色选择器供你修改颜色……Chrome也是非常贴心，当你将鼠标移动到某个属性开启时，它会在页面上同步给你展示效果。比如你在.demo中添加了margin:20px0的样式，那么你将鼠标移动到ChromeDevtools.demo的margin属性开启时，所有应用了该样式的元素都会显示在页面，如下图所示：或许这个功能并不让人意外，但是Firefox应该让你赞不绝口！废话不多说，上效果图：transform这个属性应该说是很常见的，translate,rorate,scale这些都是让元素进行各种形式的2D，3D变化的方法，上图演示了当鼠标移动到Devtools中transform的值时，左侧会同步显示元素应用transform前后的对应关系。比如这个变换前的哪个节点对应变换后的节点，变换前后的位置分别在哪里？可能有人要说了，这好像没什么，我肉眼也能看出变化前后的对应关系。emmm，嗯，但重点不是静态的。毕竟我们想把它应用到一些动画中，尤其是非常复杂的动画中。光是想想也不一定能做到。所以接下来，我们将向这个元素添加复杂的元素。动画效果.demo{width:100px;height:100px;background-color:red;margin:300px;/*超复杂变换*/transform:transform:translate(100px,100px)rotate(45deg)scale(0.5)rotateZ(45deg)skewY(45deg);;transition:all4sease;/*添加动画效果*/}先看看不使用Firefox的功能是什么样子的：不显示运动轨迹再看看效果Firefox对应用程序的作用：显示运动轨迹的效果应该很明显。当有运动轨迹时，可以清楚的看到每个节点在变换过程中的运动轨迹。如果还是看不清楚可以把动画时间改成10s20s
