你的位置:首页 > 网页设计

[网页设计]浏览器中的源码分析功能



前言:我们一直在用浏览器,你是否真正玩过他?NO!

在IE浏览器中,打开一个网页,右击菜单栏中有一个查看源代码功能,不过这个源代码太长了,不易分析。

之后的浏览器增加了一项功能,叫做审查元素功能。

在谷歌浏览器中,打开一个网页,右击菜单栏中有一项是检查;在搜狗浏览器中,打开一个网页,右击菜单栏有一项是审查元素;其他浏览器笔者未尝试过。


 

一、审查元素简介

以最常用的百度搜索界面为例,打开审查元素,如下图所示:

右侧出现审查元素界面,也就是网页的Html代码元素

其中包括以下模块

Elements(元素/标签)

查看页面中所有的HTML元素,左面是用树形结构展示的HTML标签,鼠标移到上面会在页面中显示这个标签的位置、实际长宽等。右面是每个元素的CSS属性,继承关系等等,还有DOM属性、继承关系、绑定的事件。

Resource(资源)

显示页面中用到的所有资源,页面、图片、样式表、脚本等。还有本地储存、Cookie.

Network(网络)

显示所有的网络事件,你需要先打开开发人员工具,切换到这个选项卡,之后再刷新页面才会有显示。

这里会显示每个文件的信息、由何处触发这个网络活动、HTTP报头等等.

Sources(源代码)

用于对js进行调试,左面有所有js代码的列表,中间是代码区域(下面有个格式化代码的功能),右边是断点、触发器、调用栈等等.

Timeline(时间轴)

同样需要先打开这个选项卡,点击下面的`开始捕捉`才会有显示。

这个选项卡会显示页面中的一切时间,包括运行脚本、网络活动、页面渲染等等。

而且会很详细的显示每个活动占用的CPU和内存.

可以利用这些信息对网页进行优化.

Profiles(报告)

可以截取一段时间的CPU使用情况报告、CSS类使用情况报告(用来剔除未用到的CSS)、堆内存快照(用于优化js脚本和DOM结构).

Audits(审计)

让Chrome给你的网页提出一点建议,一般是关于哪些代码不必要、没用到.

Console(控制台)

这是一个js控制台,你可以直接运行js代码,对页面进行操作.

二、利用审查元素修改网页

元素标签上展示了网页上元素的html源码,随着你的鼠标在代码上移动,左侧会显示你所指向的元素控件。

 

最基本的是head一个网页的总设置,如下所示title设置标题。

<title>百度一下,你就知道 </title>

可以修改其中的文字改变标题。

body是整个网页的布局。

左图所示,为右上角菜单栏的代码,其中我们可以设置的菜单:糯米、新闻、地图等。并且分别对应着一个连接,我们可以对其修改。

 

例如下图所示:

 

 

注意:此种修改只能在本地修改,当然修改不了网站本身。

 

三、利用审查元素下载网页视频

网页播放视频需要加载缓存,那么缓存就是一个元素,此元素被存到Resource(资源)中。我们首先播放一个视频,以优酷为例,打开优酷,随便播放一个视频,然后打开审查元素,选择network查看当前运行的网络事件,下面有列表,点击size排序,找文件大小比较大的应该就是视频文件(因为文件的编码都是代号,所以靠文件名不方便看出,只能借助大小识别)找出后点击对应的Initiator(即发起程序,即资源的来源地址)可以跳转到对应的资源文件区域,然后双击下载即可。

因为优酷等网站视频都是断点加载的,也就是一段一段的,当你看一分一秒时,他只缓存第一段,当你看到二十分时才缓存第二段。所以需要缓存多段才能全部下载。

 

如图2所示,有很多断点,可以缓存完第一段后点到第二段,然后他就就缓存第二段了,再点到第三段,就缓存第三段了。

 

 

四、网页编程学习

网页的幕后都被我们看到了,我们也可以利用它做一些小插件,比如账号自动登录的插件,我们知道网页中的元素,也就知道本身这些元素的ID号就可以通过程序去填充它,一些迅雷会员破解等内容的实现也是基于此的,利用软件网页控件的ID号来去操作它。

下面是一篇介绍自动登录插件制作的思路。

http://www.cnblogs.com/dyllove98/archive/2013/08/01/3230968.html

 

 文章格式整理不太好可以参照Word版本http://wenku.baidu.com/view/907bf4dc763231126fdb118f

 

寄语:代码的力量是伟大的,要有一颗善于发现的眼睛,世界才会被你掌握,极客的思想。