Visualizing Layers in Web Inspector(webkit.org)
webkit.org
Visualizing Layers in Web Inspector
https://webkit.org/blog/8262/visualizing-layers-in-web-inspector/
14 comments
Remember when Firefox had 3D View? Pepperidge Farm remembers.
https://developer.mozilla.org/en-US/docs/Tools/3D_View
They even mention it in the article. This is different as these are compsiting layers, not dom nodes shown in 3d. Compositing layers are an optimization technique.
I actually miss the 3D view. Anyone know why it was discontinued? I imagine it was simply too expensive in dev-hours to maintain compared to the benefit.
The first time I was telling a fellow .Net developer about the awesomeness of Firefox vs Internet Explorer, I thought the 3D view would blow his mind. It crashed instead.
Well, you can repeat the crashing experience with the Layers view in Chrome, then :)
Probably because chrome dev tools doesn't have that :)
Cool but I'm still a mile away from opening any site in safari developer tools unless I have to. It makes me want to rip my face off in that its basically unusable
I really cannot understand why you are saying this.
I normally prefer Safari to Chrome as a developer tool.
It has however some performance problems sometimes.
When people first learn a piece of software, they expect rival software to work exactly the same way or their brain instantly dismissed it. It happened to me when I switched from Windows to OSX, nothing was like how I expected and I had to change the whole way I use my OS, but in the end it was rewarding. Similar thing with GIMP: most people are weaned on photoshop so can't stand any workflow that is a bit different or not one-to-one feature-compatible. I learned GIMP first though so I never had any pains learning it and knew its limitations.
Maybe he's not like "most people", the point is that you can not know.
Pretty cool, but it seems like this is is getting quite far from any standards-based measure. The way another browser such as firefox renders html might be completely different, so optimizing using this tool could possibly do nothing in other browsers, or even worsen performance.
There are examples where at it may make things worse, sure. But in general if one browser is not able to understand how to layerize your page, there's a good chance other browsers will struggle as well.
Some operations are just fundamentally more difficult for any modern engine to handles such as animated properties in a container that has group opacity or transparent layers with subpixel anti-aliases text.
A bit of careful tweaking can really improve the performance of a page. The problem is its a lot of domain specific knowledge.
Some operations are just fundamentally more difficult for any modern engine to handles such as animated properties in a container that has group opacity or transparent layers with subpixel anti-aliases text.
A bit of careful tweaking can really improve the performance of a page. The problem is its a lot of domain specific knowledge.
> so optimizing using this tool
This is a debugging tool. I'm not sure how you optimize for a visualization of how your layout rendered.
This is a debugging tool. I'm not sure how you optimize for a visualization of how your layout rendered.
if certain layers were rendered before the rest, knowing which is which could help optimization.