chrome审查元素功能,web开发强大帮手

怎样打开Chrome的开发者工具?

你可以直接在页面上点击右键,然后选择审查元素:

或者在Chrome的工具中找到:

或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12。

打开的开发者工具就长下面的样子:

不过我一般习惯与点左下角的那个按钮,将开发者工具弹出作为一个独立的窗口:

审查元素功能窗口(Developer Tools)里又分为六个子功能,分别为Elements、Resources、Scripts、TimeLine、Profiles、Storage,整体界面如下图所示:

下面来分别说下每个Tab的作用。

Elements标签页

Elements面板里包含最基本的功能,也是最实用的功能。就是查看、编辑页面上的元素,包括HTML和CSS:

Elements面板的左侧是网页整体的层次图,只要你的网页具有良好的机构,从这个层次里便可对网页全局把握。相反,如果得网页结构不好,也可以从这里看出。被选中的部分是你调用审查功能时,鼠标停靠处的网页元素,也就是你要审查的元;Elements面板的右侧是元素的几个基本属性面板,包括元素的Styles、Metrics、Properties、Event Listeners。

左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性,或者你点右键选"Edit as Html"直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。(注:看到上面右键菜单的最后一个选项"审查元素"了么?这是不是说明这个开发者工具的页面也是HTML来的呢?你点一下就知道了哦,嘿嘿)

你还可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处:

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:

你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。

下面的Metrics可以看到元素占的空间情况(宽、高、Padding、Margin神马的):

注意到上面的Properties没有?这个很有用哦,可以让你看到元素具有的方法与属性,比查API手册要方便得多哦(要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦)。

Resources标签页

Resources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容,同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除。

这里的CSS文件有一个好玩的特性,你可以直接修改CSS文件,并且修改即时生效哦:

Network标签页

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示的哦。

点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况:

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息,对于开发、调试,都是很有用的。

Scripts标签页

很明显,这个标签页就是查看JS文件、调试JS代码的,直接看下图的说明:

还有你可以打开Javascript控制台,做一些其他的查看或者修改:

你甚至还可以为某一XHR请求或者某一事件设置断点:

Timeline标签页

注意这个Timeline的标签页不是指网络请求的时间响应情况哦(这个在Network标签页里查看),这个Timeline指的JS执行时间、页面元素渲染时间:

点击底部的Record就可以开始录制页面上执行的内容。(这个不熟悉,请参考文末链接)

Profiles标签页

这个主要是做性能优化的,包括查看CPU执行时间与内存占用:

这个也不熟悉,不多说,还是请参考文末链接吧。

Audits标签页

这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow):

点击run按钮,就可以开始分析页面,分析完了就可以看到分析结果了:

它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦:

Console标签页

就是Javascript控制台了:

这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。

例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行:

怎么样,一目了然了吧 ?再例如我想查看日期函数都有哪些方法:

时间: 2024-10-22 13:15:02

chrome审查元素功能,web开发强大帮手的相关文章

python爬虫3——获取审查元素(板野友美吧图片下载)

测试环境:python2.7 + beautifulsoup4.4.1 + selenium2.48.0 测试网址:http://tieba.baidu.com/p/2827883128 目的是下载该网页下所有图片,共160+张.可以分为以下几步: 1.获取网页源代码. 发现直接通过urllib2或者request获取到的源代码和实际图片对应不起来,通过chrome审查元素功能可以查询到对应的图片,猜测是该页面的图片加载是通过ajax异步传输的.因此使用工具selenium + chromedr

Chrome插件(Extensions)开发攻略

目录 为什么需要 为什么是Chrome 需要准备什么 如何开始 Page Action Chrome插件结构 学习资料 我的例子 调试 调试Content Scripts 调试Background 调试Popup 一些问题 总结 为什么需要 简单地说,浏览器插件,可以大大的扩展你的浏览器的功能.包括但不仅限于这些功能:捕捉特定网页的内容,捕捉HTTP报文,捕捉用户浏览动作,改变浏览器地址栏/起始页/书签/Tab等界面元素的行为,与别的站点通信,修改网页内容--给你增加许多想象空间,试想想看,你可

【网络安全技术】教你审查元素玩出你的范

0x00  360搜索的解释 Google Chrome提供了审查元素功能,只需右键点击"审查元素"(名字),即可打开Chrome Inspector,获得网页各种元素的加载时间.Javascript函数.Object等信息.本章文章主要以360的审查元素进行讲解. 0x01  360审查元素各部分的分析 借用分析网页百度:www.baidu.com 右键审查元素 Elements就是html源代码跟你按个F12的差不多吧 Sources是文件的各个目录 Resources你懂的 co

作为Web开发人员,我为什么喜欢Google Chrome浏览器

在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我就喜欢上它的简洁.快速,无论是启动速度还是页面解析速度还是Javascript执行速度(现在的FireFox4也比之前的FireFox3有很大的进步).不过当时由于Chrome的开发者工具还不是很完善,而我又不是很熟悉,加之对于Firebug的好感和依赖,当时还是用回FireFox作为我的主浏览器.

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,

chrome web开发工具

顾名思义Chrome开发工具就是一个工具,它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面,也可以通过这个工具调试和测试Web页面或Web应用程序.有了这个工具,你可以做很多有趣的事情: 调试界面的问题 使用断点调试JavaScript代码 优化你的代码 打开开发者工具,你只需要在页面的任意位置右击鼠标,选择检查元素或从右上角菜单中选择“工具>更多工具>开发者工具“. 下面示例演示的都是在Google Chrome的Canary浏览器下做的演示. 快速编辑HTML元素 试一试:

Django web开发【5】 实现标签功能

标签tag在很多web2.0应用中都很常见,标签其实就是关联某些信息的一个关键字.打标签实际上就是给内容分配标签的过程,它通常由作者或者用户实现.标签之所有这么流行是因为它允许用户对自己创建的博客.图像.链接等等进行分类. 既然我们要创建的是社交型网络收藏夹,标签自然非常重要,为了引进标签,我们需要一个机制来允许用户在提交bookmarks的时候带上标签一起存进数据库,并且可以浏览某个标签下的所有bookmarks. Tag 数据模型 标签需要保存在数据库中,并且与bookmarks相关联,所以

Visual Studio 2013 Web开发、新增功能:“Browser Link”

微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013.下面我们体验下Visual Studio 2013 Web开发方面有哪些特性,具体可以参看http://www.asp.net/visual-studio/overview/2013/release-notes. 1..net framework 2.0/3.0/3.5/4.0/4.5/4.5.1