最近我的版本控基因隐隐发作,用正在还是Alpha阶段的Ubuntu
12.04,而且用的很欢。在这里我需要说明一下,Alpha = 不稳定,在Ubuntu
12.04已经失效了~谁用谁知道。相应的,Ubuntu
12.04因为是一个测试版阶段的操作系统,也附带了大量正在开发中的测试版软件,其中包括最新的Firefox
11 Beta版。

刚刚在前几天玩过Firefox
10,觉得除了新的开发工具、隐藏掉不用的前进按钮外,也没有特别直接跟用户界面相关的变化。但是当我今天一用Firefox
11,我就傻眼了,3D Inspector的引入真是酷极了!

使用DOM Inspector搜索节点

一图胜千言:

  在Mozilla Suite和Firefox浏览器中打包了一个DOM
Inspector工具。如果利用DOM
Inspector,则可以查看Web页面的结构化表示,甚至能搜索某些特定的节点,并自动更新DOM中的节点。在Firefox中,你可以通过Tools菜单项来访问DOM
Inspector。要使用DOM
Inspector来检查一个Web页面,需要在文本框中输入所需的URL,并点击Inspect框;或者也可以从File→Inspect
a
Window菜单选择一个窗口,这就会列出当前在浏览器中打开的Web页面(见图5-7)。

澳门新葡亰 1

澳门新葡亰 2

简而言之,在Web开中,我们经常要「Inspect
Element」,看看页面上的元素布局等是不是正确,或者取得相应的CSS
Style等等。以往是平面的Inspect,即显示条条框框来区别块与块之间,当然在一些情况下,比较难以实别。

  图5-7 DOM Inspector主窗口

如今Firefox 11当中,利用WebGL技术实现了3D
Inspector,一举改革了「Inspector
Element」,看上图,是不是觉得块与块之前,一目了然呢?

澳门新葡亰,  DOM
Inspector主窗口有3个窗格。左上窗格是Web页面DOM的一个层次结构视图。根元素往往是文档本身,Web页面中的每个节点都列在这个根元素下面。对于大多数Web页面,根节点几乎都是HTML。如果在结构化视图窗格中选择了一个节点,右上窗格会给出这个节点的详细信息。如果主窗口下部没有打开一个浏览器窗口,则可以选择View→Browser菜单项打开一个浏览器窗口。

这仅仅是Firefox内置的开发工具而已,想像一下平面的限制,再想像一下3D能做什么,联系一下当前主流的浏览器基本上都开始集成WebGL了(不知道IE
10有没有?),以后很多东西都要像「Inspect Element」一样换种方式啦。

澳门新葡亰 3DOM
Inspector是一个强大的工具,利用这个工具,你可以快速地遍历给定Web页面的结构和视图,并修改Web页面DOM中的各个节点。通常,可以通过结构化视图中的菜单项手工地查找节点,也可以使用Search→Find
Nodes菜单项来查找各个节点。利用这个搜索功能,你可以根据ID属性、标记名或属性名和值来查找节点(见图5-8)。

3D的Web世界什么时候会到来呢?

  要在DOM
Inspector中查找节点,最容易的方法是使用鼠标。在结构化视图中查找一个节点时,可以选择Search→Select
Element by
Click菜单项,并点击浏览器窗口中的这一项。所选项会以红色边框突出显示,而且在结构化视图窗格中选中相应的节点。

文/imcn

  一旦在结构化视图窗格中选中一个特定节点,你就可以开始检查和修改它的属性了。例如,可以右键点击一个节点,从上下文菜单中选择Cut,再选择结构化视图窗格中的另一个节点,右键点击,从上下文菜单中选择Paste,这样就能在DOM中将所选节点有效地从一处移到另一处。图5-9显示了使用这种方法可以将Google搜索页面上的主图片移到页面的另一个部分。

澳门新葡亰 4

  图5-9 使用DOM Inspector移动Google搜索页面主图片的结果

网站地图xml地图