查看页面板块样式元素
安装Code Cola插件后，进入任意网页，点击该扩展后图标会由绿色多变为绿色少，还会弹出一个窗口，该窗口可以查看HTML与CSS的样式代码。将鼠标移动至网页的任意板块即可发现板块区域会变成蓝色，点击即可在上述窗口中显示其所具有的样式信息。通过这款插件，使用者还可以查看并修改网页的整体代码，但修改代码需要在服务器中上传并配置Code Cola插件的PHP文件。
分析图层创建原因
浏览器会通过不同的图层来渲染页面，最后合并图层成为一帧图像。导致图层创建的原因有多种，如元素有3D转换、有position:fixed的样式、与其他元素可能重叠、will-change样式的值为opacity、transform、transform-style、perspective、filter、backdrop-filter这6个之一等。不过Chrome Devtools的Layers工具在CSS图层分析方面不太行，显示的信息不够友好，有的甚至都没显示原因，且界面丑，没有显示图层总数、占据的内存，也不能直接跳到元素。相比之下，Safari Devtoos的Layers工具更具优势，能直观地分析出页面中的图层及导致图层创建的原因。