网页设计工具:google chrome inspector

image

这个工具是在chrome的浏览状态下,通过右击鼠标、点击“审查元素”得到的。顾名思义,她是track网页元素的好东西!

image

至于用法,《谷歌浏览器Chrome审查网络元素帮你编写网页》已经有很好的解释了,建议去看一看。想要快餐式的概览,我这里给出几个反应功能的截图:

  • 跟踪页面元素——分析框架、元素关系……

 image image 

  • 层叠式的页面元素分析——div是嵌套的,CSS是继承的……

image

  • 页面载入速度——这下知道该修理那个了(浅色代表响应时间,深色代表页面渲染时间)

 imageimage

  • 导入资源——你往哪里跑?

image

总结

这是一个XHTML+CSS的轻量型分析工具,你可以用它学习别人的网页设计技巧、找到不错的图标、更重要的是设计自己网页的好工具。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s