如何通过 Chrome 浏览器 “开发者工具” 查看 页面层级分布（Layers 工具）

           刚才在阅读《浏览器工作原理和实践》第六章------HTML、CSS和JavaScript 是如何呈现页面的。这一章节时。文中提到通过“你可以打开 Chrome 的“开发者工具”，选择“Layers”标签，就可以可视化页面的分层情况”，如下图：

           

 

于是也想打开chrome中的Layer查看图层，奈何找了半天没找到，经过一番百度，终于找到了。废话不多说，开始：

 1、在chrome中任意位置右键点击 ，如下图中的选项（如果是中文版的就是‘检查’这个选项）：

 

2、进入到chrome开发者工具，见图：

 

3、进入Layer页面，操作按钮从左至右功能依次为：平移、旋转、复位。见图：

 

 

 

END