审查元素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代码，对页面进行操作.

-----------

下面边栏，点一下`放大镜`按钮，然后你可以在页面中点击一个区域，然后就会跳到Elements中对应的元素了。

在页面中某一区域，点右键，选`审查元素`是一样的效果

如果页面js有错，边栏右面会提示，点击提示会显示错误的位置和信息。

ps：你安装的扩展里面的脚本也都是计入以上功能中的.

下面边栏最右面有个`设置`按钮，点击会弹出一个对话框。

General里面有一些个性化的设置，如开发人员工具显示在哪，如何显示RGB值等等，还有个禁用js的功能.

Overrides里面有个很有趣的功能就是修改UA和分辨率.

Shortcuts列出了开发人员工具中的快捷键

以上针对Chrome 23.0.1271.95 m

开发人员工具的官方文档(英文)：https://http://www.doczj.com/doc/3fd1bc83c8d376eeafaa3167.html/chrome-developer-tools/docs/overview

我上面的是自己写的，不是对这个文档的翻译

补充一下.用其中的Network可以直接下载部分视频网址的视频.

在观看网络视频的时候,打开Network,再刷新网页,一般都能抓到视频的源文件(.flv)后缀.

可以让Network的文件按类型或者大小排列,就能显示出来这个文件,然后右键拷贝网址就能下载了

我最常用的基本就2个功能

一