Chrome开发者工具之结构与样式

标签: 前端开发工具 Chrome | 发表时间:2013-02-05 23:35 | 作者:飞绿
出处:http://www.36ria.com

web前端开发工程师必须要掌握浏览器的开发者工具。这里介绍chrome自带的开发者工具,首先从页面的结构和样式来介绍。

开发者注意:本文的目的是介绍chrome开发者工具的基础用法。或许你用别的工具,如firebug或IE的开发者工具,但本文介绍的功能,其他对应工具上应该也有相应的功能,可以帮助你了解对比。

简介

浏览器开发者工具功能:

  • 查看元素的html结构
  • 概览页面的css,以及某一元素的样式
  • 实时编辑css来调样式
  • 查看http请求
  • 页面中运行js
  • 检测页面性能瓶颈,做性能评估
  • 查看页面在本地存储的数据

浏览器开发者工具

在开始讲解chrome的开发者工具前,先简单列举一下目前主流浏览器提供的开发者工具。

chrome浏览器开发者工具

image002

Chrome、chrome canary和chromium都带有该工具。

safari浏览器开发者工具

safari是采用 Web Inspector库。它的更新没有chrome频繁。

firefox浏览器开发者工具


Firefox现在也自带了开发者工具,它的元素定位效果很好。firebug,任然可以以插件的形式安装。

IE浏览器开发者工具

opera浏览器开发者工具-dragonfly

开始

注意,本教程中是以chrome canary,所以介绍的一些特性在beta和稳定版中可能没有。

在开始介绍元素面板前,先介绍一下头部和底部的一些功能。

上图标记点介绍:

  • 1、关闭开发者工具的按钮
  • 2、选择面板的标签项
  • 3、用户自定义的一个第三方扩展应用- PageSpeed
  • 4、可以调整开发者工具的布局
  • 5、显示/隐藏控制台
  • 6、点击后可在页面中选择元素
  • 7、页面js报错信息
  • 8、打开/关闭设置面板

可以根据个人习惯来调整开发者工具的位置。点击上图标记4的按钮来切换开发者工具的位置,使它可以如下图那样显示:

元素面板

元素面板展现浏览器渲染后的html结构。页面js操作dom后的结果也会实时展现。如下截图:

  • 1、Html结构树
  • 2、三角型表示该元素有子元素。三角型的不同方向表示展开或折叠
  • 3、元素面包屑,从根节点开始,到选中的当前元素。鼠标滑过相应节点,页面中会高亮相应的节点区域
  • 4、可拖动的分割线,风格html结构树和css样式信息
  • 5、可展开折叠的模块,包括css样式信息和其他
  • 6、计算后的样式板块-展示选中元素的样式信息
  • 7、处理是否显示元素从浏览器中继承过来的样式
  • 8、显示用户的样式,如页面中引用的styles.css文件,或通过js设置的样式,或者通过开发者工具添加的样式
  • 9、添加新规则–可以给选择的元素添加样式
  • 10、触发元素状态,可以设置元素的状态,如hover(用户鼠标滑过元素的效果),actice等。截图中对应的按钮icon表示点击触发后,默认状态是关闭的
  • 11、可以设置颜色显示格式。可以设置为用户自定义的、hex、RGB或HSL
  • 12、显示元素的和模型

其他信息

元素面板可以查看和编辑元素和其样式。打开开发者工具,点击第一个标签项,也可以通过在页面元素上右键点击–>查看元素。有很多用途,可以编辑或添加新元素节点;可以查看元素样式信息,并且可以对样式进行添加、删除等操作。

DOM编辑

在元素面板中编辑dom很简单。删除节点只需简单邮件点击节点 选择 “删除节点”。删除父节点,子节点也会被删除。 小提示:也可以通过键盘的 delete键 删除选择的节点。

双击节点可以修改节点的类型。如下图,修改p节点。事实上,修改节点的开始标签类型,其对应的闭合标签类型也会同时改变。

添加属性添加属性,右键点击元素选择“添加属性”。光标焦点放到你想要添加属性的元素上,然后输入你想要添加的属性。例如,添加class=“title”。通过键盘的tab键可以切换到下一个属性进行编辑。

编辑属性编辑属性和添加属性一样,在想要编辑的属性或属性值上双击即可编辑。修改输入框中会高亮你双击的属性或属性值。

编辑HTML编辑html只需要选择相应节点右键点击 选择“编辑HTML”。

定位元素

开发者工具提供了很好的页面元素定位功能。在元素面板中鼠标滑过浏览器渲染的html结构树时,页面中对应的的元素区域会高亮显示。这非常方便于在html结构树上定位页面元素。

当然如果鼠标滑过的节点对应在页面中的区域不在浏览器的可视区域中就看不到高亮了。但这中情况下页面会在元素相应的方位上显示一个提示框。也可以右键点击元素,选择“滚动到可视区域”,则对应元素区域会滚动到浏览器的可视区域中。

开发者工具还有搜索功能。当工具面板获得焦点后,快捷键ctrl+f会打开搜索框。如在输入框中输入“body”就会快速找到页面中的第一个body。

查看样式信息

在介绍元素面板右侧的样式面板前,先给一个元素同时设置margin、padding和border,在鼠标滑过该元素时你会看到如下的盒模型。

如果发现有浮动元素显示的和模型有问题,可以通过样式面板区域的“盒模型”模块来查看元素的margin、padding、border 。

果没有学习或了解css盒模型,那么它是一个学习盒模型的好帮手。
它告诉你元素是怎么渲染的,找到问题的原因。

该面板可以查看元素尺寸、padding、border和margin的值,单位是px。鼠标滑过各个区域时页面中会高亮显示相应的区域。

设置样式信息

如下图展开样式面板。在空白处点击,光标会自动定位到输入框开始设置样式。输入属性名,按tab键就会自动聚焦到属性值的输入框,然后输入想要的值。

	border:1pxsolidgreen

在编辑样式属性名或属性值值时,输入有自动完成功能,可以通过tab键或键盘向右箭头来补全你所选择的。当输入的属性值单位为px或百分比时,可以通过键盘的向上、向下键来增加和减小数值,还可以通过组合键shift+向上/向下键以10倍的值增加或减小。
编辑颜色值时,可以直接输入颜色值,也可以通过点击颜色小方块弹出的取色面板来选择颜色。还可以按shift点击颜色小方块来切换颜色值的模式。

可以通过点击+号icon来给某个元素添加样式,例如元素如下:

	  

Hello

点击+号icon后会自动添加一条规则如下:

	#something { }

如果html如下:

	  

Hello

那么所对应的规则如下:

	.some-class { }

若html结构如下:

	  

Hello

则会增加如下一条:

	.h1{ }

那如果元素有多个class如下:

	  

Hi there

会生成一条如下:

	.class1 .class2 .class3{ }

这些生成的规则也可以编辑。

资源面板

资源面板展示了页面中的所有资源。下图是资源面板截图:

  • 1、资源面板tab;
  • 2、左侧栏分类列出页面资源。如“框架”、“session存储”,如果前面有箭头点击展开还可以看到更多信息。注意左侧栏的大小是可以调整的;
  • 3、页面资源包括字体、图片、js、css和页面本身。如果页面中有frame或iframe,展开Frames会看到其对应的frame和iframe。页面层次结构更清晰
  • 4、数据库显示页面相关的SQL数据库数据信息;
  • 5、相应IndexedDB 也展示页面的IndexedDB 信息;
  • 6、以键/值 形式列表展示本地存储的数据;
  • 7、以键/值列表显示session存储数据;
  • 8、根据域名列举cookie;
  • 9、显示通过manifest缓存的资源。包括很多信息,如js库文件会显示文件地址、大小和类型;
  • 10、右侧用来显示每个资源对应的详细信息。

注意,可以修改编辑资源信息,如编辑本地存储的数据,来调试页面资源。

查看页面中框架中的内容

虽然现在由frame组成的页面越来越少见了,但查看框架内容的方法还是有必要了解的。下面截图,是一个由frame组成的页面。

每个frame都相关的资源都在一个文件夹下,同样点击展开可以了解页面的资源、js、css、图片文件和字体情况。点击选中一个框架,页面中其对应的区域会高亮显示。

字体

注意:不会列出系统已有的,如“arial”“Helvetica”等,只会列出浏览器需要下载安装的。

如上图,对应的字体会显示在右侧,字体大小会根据右侧区域大小来调整大小。

图片

如上图,对应图片会在右侧显示,图片大小也会根据右侧区域大小来自适应。如果图片有透明,透明部分会显示成棋盘格子来表示透明。图片信息,如图片大小、文件大小和图片格式会在图片下面显示。

脚本

点击脚本文件,文件内容会如实显示在右侧。

如上图,格式难以阅读,后续教程会详细介绍如何查看格式化后的js代码。

样式表

可以查看页面加载的所有css文件。同查看js文件方法一样。但通常不会从这里来查看样式。如下图:

加载失败的资源

偶尔,浏览器下载资源失败或者代码出错。

如上图,出错的资源右侧会显示一个红色标记,数字表示出错的个数,点击资源,右侧会显示出错信息。

保存和查看资源

右键点击资源会出现菜单,如下图:

可以选择保存该资源,也可以选择在新标签页中查看,当然也还可以做些别的。双击资源会在新标签页中打开资源。

cookies

查看某个网站的cookie信息。如图,访问twitter,然后通过资源面板查看cookie信息。

  • [name]-字段名。如字段名为“remember_checked”,其值为1,这可能说明用户在登陆的时候选择了记住我;
  • [value]-字段所对应的值。如“_twitter_sess”所对应的值为一串加密了的session ID;
  • [domain]-cookie所在的域。上图的“.twitter.com”表明其子域也是可以访问该cookie的;
  • [path]-跟域相同,设置有效的路径。设置为“/”表明允许所在路径下都可以访问cookie;
  • [expires]-浏览器可以删除该cookie的日期;
  • [size]-cookie的大小,单位bytes;
  • [HTTP]-cookie的访问允许HTTP协议。这可以防止跨站js获取cookie攻击;
  • [secure]]-只允许加密连接访问cookie,如HTTPS;

可以通过右键菜单,选择“删除”来删除所选cookie。

本地存储

下图是查看本地存储信息的截图:

当用户第一次访问该页面时,浏览器会下载css文件。再次刷新该页面感觉快了些,因为它将css存在了本地存储中。厨房水槽应用中有了一些字段,如下:

	3a867610-670a-11e1-a90e-4318029d18bb-http://dev.sencha.com/deploy/touch/examples/production/kitchensink/resources/css/app.css
	/*45e6f4ffe818855b26f3dcbfc156025eca58e4f5*/code,pre,pre *{font-family:Menlo,Monaco,Courier,monospace}

Steve Souders有一篇文章 关于静态资源的本地存储 。在移动设备上应用本地存储对提升性能很有效。

缓存应用

可以查看浏览缓存了哪些资源。如下图:

  • [resource]-资源的完整路径。典型的资源包括静态资源和html文件,manifest文件也属于其中;
  • [type]-可以改变。Manifest文件的文件类型是Manifest,其他的manifest文件中定义的文件类型为explicit。Fallback类型的文件是那些需要回调资源文件的回调文件;
  • [size]-资源文件的大小,单位bytes;

HTML5缓存应用参考阅读

文章翻译自 Chrome Dev Tools: Markup and Style

相关 [chrome 开发 工具] 推荐:

Chrome 开发工具支持远程调试

- Leo Pay - 谷奥——探寻谷歌的奥秘
Google Chrome 开发工具(简称 DevTools)前端界面是作为 HTML + CSS + JavaScript 的 web 应用实现的. 它采用序列化的信息通道与被审查页面通讯. 开发团队建立这个序列化异步交互通道是为了将 DevTools 前端移出被审查页面的进程. 但实现了才发现,甚至能将 DevTools 前端移出浏览器运行.

Chrome开发者工具之结构与样式

- - ria之家--RIA三部曲:jquery、ext、flex
web前端开发工程师必须要掌握浏览器的开发者工具. 这里介绍chrome自带的开发者工具,首先从页面的结构和样式来介绍. 开发者注意:本文的目的是介绍chrome开发者工具的基础用法. 或许你用别的工具,如firebug或IE的开发者工具,但本文介绍的功能,其他对应工具上应该也有相应的功能,可以帮助你了解对比.

豪赌Web apps,谷歌Chrome开发工具直通Android

- - IT经理网
关于谷歌内部web app团队和Android团队之间存在矛盾的传言在业界流传已久,但近日Chrome与Android的联姻让外界对谷歌内部两大应用平台之间矛盾的传言不攻自破. 本周二,但谷歌 宣布Chrome DevTools开发工具新增多项功能,包括支持对Android设备的模拟,使用最新Chrome beta版的开发人员可以在浏览器中模拟运行Android设备,甚至直接将Android设备的应用界面投射到电脑屏幕中的Chrome浏览器中.

Chrome开发者工具之JavaScript内存分析

- - 极客521 | 极客521
内存泄漏是指计算机可用内存的逐渐减少. 当程序持续无法释放其使用的临时内存时就会发生. JavaScript的web应用也会经常遇到在原生应用程序中出现的内存相关的问题,如 泄漏和溢出,web应用也需要应对 垃圾回收停顿. 尽管JavaScript使用垃圾回收进行自动内存管理,但有效的(effective)内存管理依然很重要.

EXT.NET高效开发(三)——使用Chrome浏览器的开发人员工具

- 華 - 博客园-首页原创精华区
    这篇帖子老少皆宜,不分男女,不分种族,不分职业. 掌握一些开发工具的使用,对自己帮助是很大的(无论是用于分析问题,还是提高生产力). 本篇就讲述如何利用Chrome浏览器(这里讲述的版本是14.0.835.2)的开发工具(因为IE浏览器的开发工具实在不敢恭维,不过大部分功能还是健全的). 之所以使用Chrome浏览器,是因为对它情有独钟吧.

Chrome 原生原始截图工具 | 小众软件 > Chrome

- Choope - 小众软件
来自非典型社区小众 Group 里的问题:求推荐 Chrome 上的截图扩展. 当傻呵呵的 Scavin 正准备找自己用的扩展 Explain and Send Screenshots 时. Songlin 同学一句道破天机:仅需要截图的话:扳手 – 工具 – 报告问题. ©2011 scavin for 小众软件 | 原文链接 | 12 留言 | 加入我们 | 投稿 | 订阅指南.

Chrome 油耗统计工具扩展:我的汽车工具箱

- 深深浅浅 - 谷奥——探寻谷歌的奥秘
感谢扩展作者 cloudme 的自爆. 我的汽车工具箱是Chrome上的第一款油耗统计工具扩展,直接用Google帐号即可登录. 能够比较精确地统计百公里油耗以及每公里的开销. 上海地区的车友还可以直接利用它来查询违章信息. 每天打开浏览器就知道是否违章,省去频繁输入的烦恼. 上海地区违章查询说明:如果正确录入了车牌号码和发动机号(可选,沪牌必须输入此号才能正确查询)之后,如果有违章,扩展按钮的图标会自动更换,让您打开浏览器就能够知道自己的违章状况(为了加快速度,违章信息有一定缓存,缓存时间暂定为一天).

Chrome网页应用开发教程

- tiger - 互联网的那点事
发布时间:2011年2月1日. 发布源:How-Tos(OhBoard). 我花了10天时间开发了OhBorad,这个小巧的白板应用. 12月12日,我萌生了想法,12月22日我赚到了第一笔钱3.99美金. 所以在这里和大家分享一下这个开发指南. 如果你打算自己做Chrome网页应用,那么你可幸运了.

Chrome Remote Desktop BETA – 远程桌面控制工具 | 小众软件 > Chrome

- KID - 小众软件
Chrome Remote Desktop 是 Google 发布的用于 Chrome 间进行远程桌面控制的应用. Chrome Remote Desktop BETA 这个东西最大的好处在于跨系统,跨平台. 只要都安装了 Chrome,就可以对任何人进行远程桌面控制,注意是桌面控制,不是控制 Chrome.

手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

- huangct - 博客园-首页原创精华区
Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本. 界面清爽、操作人性化、网络备份资料和快速的启动速度令我爱不释手,还有它拥有众多的扩展程序,相对于firefox的插件来说,数量上和质量上稍显不足,但相信chrome将会很快在扩展上超越firefox,firefox上内存占用上实在不令人满意,也许我使用firefox的一个原因就是因为firebug,不过相信chrome平台的类firebug插件也会很快出现.