原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)

本文教程中的示范例子一切皆由 http://game.qq.com (不是打广告啊.各位轻砸)

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第1张图片

软件Chrome安装:轻轻略过,甭说不会baidu,google

附安装地址: http://www.google.com/chrome/intl/en/eula_dev.html

如果上述安装地址不可用请试

http://www.google.com/chrome/eula.html?extra=devchannel

入门:如何打开开发者工具

在空白位置(非flash,silvelright上)右键,在弹出的上下文菜单中选择: Inspect element(审查元素,快捷键Ctrl+Shift+J)

或者

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第2张图片

即可看到弹出非常强悍的Chrome专有的辅助工具!

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第3张图片

功能1:查看Html DOM树及CSS

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第4张图片 

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第5张图片 

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第6张图片

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第7张图片

好了.HTML DOM树查看的入门介绍就到这里.有兴趣近阶高级的请自己摸索.

功能2:查看当前页的所有内容(包含加载信息)及嗅探服务器开发环境

/* dang,dang.. dang… Only you~~~陪老妇(夫)取西经 */

接下来介绍[Resources]选项卡的功能

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第8张图片 

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第9张图片

开发环境

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第10张图片

警告信息,可帮助你规范你的WEB应用

功能3:强大的JavaScript调试器

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第11张图片

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第12张图片

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第13张图片

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第14张图片

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第15张图片

功能4:查看Cookies

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第16张图片

功能5:高手的控制台

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第17张图片

本小菜第一个js版的Hello World!

如果你是一位经验丰富的JSer那么,这里就是你的天地了~呵呵!

下面的功能还是不太明白

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第18张图片

这里好象是内存堆栈的一些信息,不懂!

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第19张图片

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第20张图片

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第21张图片

这里感谢一下15楼 [木鱼] 同学的补充

Audit那个是页面加载检测,简单的说就是根据现有规则检测当前页面是否能优化,比如合并CSS、将图片放到不同的主机上等等。

[常规帮助信息]

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第22张图片

在Chrome中如何为浏览的网页选择编码

注意:在浏览许多中文站点的时候,在默认的情况下,会显示一堆堆"口口口"的.所以需要自己调网页编码!估计这里往后还可以有待改进.

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第23张图片

我写文章时,Chrome 6.0 dev的版本信息

原创: 小菜带你走入Chrome 6.0 dev 助你WEB开发一臂之力 (多图)_第24张图片

查看/管理本机上的详细Cookies信息

本文到此结束!

你可能感兴趣的:(chrome)