Chrome审查元素一些介绍

分类:网络 & 软件 | 标签:,,

    image

    最近研究WordPress的主题…

    突然就觉得Chrome的审查元素这个功能非常好用~~~

    欢迎围观 boop.tk

    右上角有换装体验~

    我的第4个css练手作~~~~~~~~~~~

    木木木木木老师(嗯...真的)SimpleDashed免费版为框架

    现在文件还没有拆分......还是一个index.php

    有两个版本(一个侧边栏固定;一个不固定)左上角有换装。

    这个CSS是在第3个版本上重新写的...
    同样是Developer Tools工具苹果的Safari里都汉化了谷歌的Chrome就没有汉化呢……
    同样基于WebKit有兴趣的也可以试试Safari

    以下内容均转自凌晨四点的蓝

    Chrome审查元素概述

    好软件,一般是第一次使用就会喜欢上,我是第一次使用Chrome后就立刻抛弃了Firefox浏览器,因为无论是程序大小,还是浏览器启动速度,还是浏览器加载网页的速度,我觉得Chrome都远远优于Firefox,所以我义无反顾地停用了Firefox。不过Chrome浏览器的优点不止上面提到的一点,今天发现他的审查元素功能做的太好了,下面主要说说Chrome的审查元素功能。

    将鼠标移动到网页上的任何一个位置,右键菜单里都有“审查元素”入口,鼠标在链接上审查的就是这个超链接标签;鼠标在图像上审查的就是图片标签;鼠标在文字上,那么审查的就是包含这些文字的网页标签,比如P、h3等等。仔细研究一个审查元素功能便会发现,它确实很强大。

    审查元素功能窗口(Developer Tools)里又分为六个子功能,分别为Elements、Resources、Scripts、TimeLine、Profiles、Storage,整体界面如下图所示:

    image

    Elements面板里包含最基本的功能,也是最实用的功能。

    Elements面板的左侧是网页整体的层次图,只要你的网页具有良好的机构,从这个层次里便可对网页全局把握。相反,如果得网页结构不好,也可以从这里看出。被选中的部分是你调用审查功能时,鼠标停靠处的网页元素,也就是你要审查的元;Elements面板的右侧是元素的几个基本属性面板,包括元素的Styles、Metrics、Properties、Event Listeners。

    image

    就是这个简单的面板,能让你做一些意想不到的事情。你可以选择某些元素,然后在网页里便会加深显示你所选择的元素块;你可以查看元素的Metrics结构图;你可以更改一些元素的属性,然后你的更改会立刻在网页上起效,以便你预览;你甚至可以键入一些命令去获取你想要知道的信息。碍于篇幅,这部分在以后的文章中继续介绍。

    Recources面板里包含的是网页的所有文件,包括Document、CSS、脚本、图片等等。你可以在这个面板里查看,各个文件的加载时间,以及他们的大小等等,功能不算很多,但是统计做的不错,给人很直观的感觉。详细使用到以后的文件里再做介绍。

    image

    Scripts面板是脚本调试的面板,首先它包含网页所以的脚本,其次是它可以在这个面板里调试脚本,调试器具备基本功能,设置断点,调用堆栈,变量监控等功能,详细的使用,我自己也还在摸索之中,等研究透了,再与大家分享。

    image

    TimeLine时间表面板,其实也是个监控面板,监控页面各个文件的载入以及各个事件的响应时间,这个功能个人觉得实用性不是很强,等以后发现它的价值的时候,再做研究。

    image

    Profiles面板是监控或者说是统计网页占用的内存以及CPU的情况,这个面板的实用性也不是很强,不过可以在网页占用资源很大的时候分析一下到底是什么元素占用太多的资源。

    image

    Storage面板统计的是网页在本地存储的一些cookies等,人性化的设计,让它可以在这里删除这些cookies,要是不能删除的话,我想这个面板也确实没什么用处了。

    image

    本篇博文只是对Chrome的Developer Tools工具做大概的介绍,对于里面的各个功能的使用,要分到以后的博文中了,否则篇幅太大,难以一鼓作气写完,同时也有不少功能自己还在摸索中,估计谷歌的开发人员也在紧张地完善当中。

    Chrome审查元素之Elements

    接着上篇Chrome审查元素概述继续写,这篇文章主要写写Chrome浏览器Developer Tools 的 Elements 功能模块。Developer Tools的主要功能也是Elements功能。Elements面板分为四部分,如下图所示(请放大图片查看):

    image

    绿色框区域为网页源码区域,代码层次分明清晰。

    箭头向左的标签都是包含内部标签的,点击箭头可以展开标签,只要文档结构良好,这里德层次结构也将是完美的,就像Altova XMLSpy能把XML完美的格式化一样,比IE的源码清楚多了。

    值得注意的是,这个源码区域和网页是有联系的,当你鼠标放在源码的某一行上,则原网页就会高亮那一行标签所对应的网页内容,这样以后想找网页的某个区域对应的元素标签就易如反掌了,具体的看下面几个图,你就一目了然了:

    当鼠标经停标题所对应的标签时,则网页中的标题被高亮显示

    image

    当鼠标经停导航栏所对应的标签时,则网页中的导航栏被高亮显示

    image

    还有一点就是源码区域大多标签的属性双击后是可以编辑的,当鼠标经停时,在标签的关闭符前面还会出现一个问号,双击这个问号,就可以为这个标签添加属性,下面三幅图片分别显示了鼠标经停,双击属性值,双击问号后的界面:

    imageimageimage

    蓝色区域为工具栏区域,包括几个可用的快捷工具。

    第一个显示器形状的工具是Developer嵌入原网页和脱离原网页两种方式的切换工具。
    Developer工具嵌入原网页的界面如下图,上面部分是网页,下半部分是Developer,这时候工具图标也改变了外观,可以与本文第一幅图比较一下。

    image

    第二个工具是控制台的开关,打开控制台的时候,第三个工具会跟着变化,因为已经进入控制窗口了。
    至于这个控制台究竟可以做些什么,暂时还不是很清楚,我试着键入一些字符,控制台有提示,输入命令后会返回一些事件或者是一些值,这个用法估计比较高级了,暂时不研究了,下图是控制台打开后的截图,我键入了一些命令:

    image

    第三个按钮工具到底有什么用处,我还没有发现,个人觉得比较冗余了。

    红色区域是页面标签的导航栏,用于显示当前选择标签的路径。

    这个区域显示的是当前选中标签在整个网页中的路径位置,跟源码区域一样,这个区域也是跟网页绑定着的,选中不同的标签,相应地在网页上会高亮显示,这部分主要功能就是对网页整体结构的辅助观察。

    黄色区域则是选中标签的一些属性区域了,主要有Styles、Metrics等。

    Styles就是选中标签以及下级标签的样式,有些样式是可以编辑的,方式是通过双击鼠标,更改后的效果会立刻体现在网页上,我想这个功能让人对主题的修改更容。像颜色值,通过点击复选框可以在不同表示方式之间进行切换,也是挺方便用的。功能我就不做多的描述了,一用便知;Metrics是标签的模型图,显示的很直观,也可以说是一目了然,不多说,看图便知;对于Properties和Listener用的就比较少了,一般对网页进行深层次的分析时才会用到。

    imageimage

    对于Chrome Developer Tools的Elements就介绍这么多了,不用多说这个模块对于分析网页结构或者说是扒皮都是相当有用的。



评论
12
2010.11.14 1:06:06
  1. baider | 引用 @

    这主题好爽啊!

    • EIIE | 引用 @

      不知道你说的是哪个?

      如果不是我认为的…
      那我就白爽了………….

  2. 爱惜 | 引用 @

    谷歌还是很不错的。

    • EIIE | 引用 @

      就是没有中文…
      opera 的是中文的…但好像不能改…(试了下)

      • wugee | 引用 @

        呵呵,不知何时,chrome有了审查元素了,记得好像5.0之前是没有,版本号更新太快太变态了~
        一直使用opera的审查元素,觉得用起来相当顺手,怎么不能修改?我都是先用opera先修正一下配合着DW使用,感觉相当好。
        chrome的审查元素都是英文,很敏感呢,本来技术就不行。
        过几天我也写一篇有关各浏览器审查元素的文章。

        • EIIE | 引用 @

          是啊…已经10了…
          不习惯opera…还是chrome顺手点~

  3. 林木木 | 引用 @

    这个审查元素还是firebug强力~不过够用了~

    • EIIE | 引用 @

      嗯…
      够有就好了
      好像 chrome 的插件好像也有这个…

  4. kita | 引用 @

    Chrome的Developer Tool和Safari更相似些,说实话,至今也不会用控制台。话说昨天开了n个tab,然后safari就用掉了700+的内存。。。

    • EIIE | 引用 @

      我主要是用来对照修改样式…改好后 拷贝一下就好
      还有他的代码提示…英语不好…有点记忆强制排除的说…

  5. 凡尘飞扬 | 引用 @

    这玩意是苹果公司出品的,挺好用的。

    • EIIE | 引用 @

      啊….我不知道…有汉化吗?


0

无觅相关文章插件,快速提升流量