傲游(Maxthon)实用插件之网页分析工具ViewPage

三、查看和获取网页信息、资源

1、HTML Dom 树的查看

当你遇到一个喜欢的网页时，想要学习该网页上的制作技巧、引用网页的脚本时，“ViewPage”就派上大用场了。在Maxthon中打开你喜欢的网页（下面我们称它为“目标网页”），待目标网页读取完毕后打开“ViewPage”侧边栏。接着，鼠标左键单击“ViewPage”插件上方的第一个按钮，在弹出的菜单中点“HTML Dom 树”（如图10），

（图10）

这样，“ViewPage”就会自动分析目标网页的源代码，并且在侧边栏中根据代码结构以树状列表方式将分析结果显示出来，各个结构关系非常清晰明了（如图11），相信对HTML语言稍有了解的朋友都很容易在它的帮助下将目标网页的代码结构掌握。双击树状结构中的节点，可以查看该节点的代码、属性和样式（如图12），方便我们了解、复制和学习。

（图11）

（图12）

鼠标选中某个节点，“ViewPage”会在目标网页中高亮显示出所对应的网页区域（如图13），这样我们就可以对它进行操作了。

（图13）

HTML”可以复制出该区域所包含的文字和HTML源代码；“插入 HTML”和“插入脚本”可以方便的在该区域中添加代码，而无需另外保存后再在复杂的代码中操作；“设置 ContentEditable”可以将该区域变为可更改的状态，你可以在目标网页的该区域中以所见即所得的方式编辑其中的内容，比如我们要更改其中的一段文字，只要用鼠标双击要更改的文字后就可以开始编辑了，就如同在Word中写作一样简单。

（图14）

2、查看页面信息

同样鼠标左键单击“ViewPage”插件上方的第一个按钮，在弹出的菜单中点“页面信息”可以查看该网页的基本信息（如图15），如域名、标题、编码、创建信息、修改日期等，同时，它可以获取到该网站的Alexa世界排名和用户的评价。

（图15）

3、获取网页脚本和样式表

“ViewPage”不仅可以分析出整个页面的结构，还可以从中更详细的提取出其中的脚本、样式表等。下面我们就来学习一下获取网页中脚本的操作。

鼠标左键单击“ViewPage”界面上方的第一个按钮，在弹出的菜单中点“脚本”，打开脚本的分析结果。在下面的树状列表中我们可以看到分析的结果，其中有些是目标网页内部包含，显示为“内部”字样，有些是其链接的脚本，显示为该脚本的URL。

鼠标选中要查看代码的节点，点击鼠标右键，选择“查看脚本”，在弹出的窗口中我们就可以查看到该节点所对应的脚本的代码（如图16），无论是内部包含还是外部链接。点击窗口中的“另存为”按钮，可以把代码保存下来，也可以直接复制后粘贴到自己的网页中，非常方便我们学习和借鉴他人的代码。

（图16）

对于外部链接的脚本，还多了一个功能：可以在Maxthon中过滤该脚本的运行。操作方法如下：选中外部链接的脚本后点鼠标右键，选“添加到过滤列表”，之后，在弹出的窗口中点击“确定”按钮即可。

通过以上的功能，我们可以快速轻松的获取目标网页中各种脚本的内容，而获取样式表的操作也是差不多的，这里就不在累述了。

上面介绍了网页信息和资源的查看和获取的操作，在操作中你一定会发现上面说到的弹出菜单中的“图片”功能没有介绍。别急，对于网页上的图片，“ViewPage”提供了一个专门的、更强大的功能，在下面我们接着介绍。