Chrome开发者工具专业使用教程|如何用得更专业 Chrome开发者工具使用教程_软件下载您所在的位置： >
> 如何用得更专业 Chrome开发者工具使用教程时间：&&编辑：gewuan&&阅读：次Chrome 开发者工具(Chrome DevTools)是Web开发者们公认的优秀的前端调试工具,由于功能强大,所以使用起来有一定的学习门槛。Chrome 开发者工具允许Web开发人员可以通过浏览器应用程序干预和操作Web页面,也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具,你可以做很多有趣的事情:调试界面的问题使用断点调试JavaScript代码优化你的代码打开开发者工具,你只需要在页面的任意位置右击鼠标,选择检查元素或从右上角菜单中选择“工具&更多工具&开发者工具“。下面示例演示的都是在Google Chrome的Canary浏览器下做的演示。快速编辑HTML元素试一试:选择”Elements”面板选择”Elements”面板内的一个DOM元素双击你需要打开的DOM元素标签,你就可以编辑它当你完成之后会自动更新和关闭标签到指定的行数你可以在“Sources”面板中选择指定的文件中使用“:行数:列数”的功能。试试快捷键CMD + O。展开所有子节点试一试:选择”Elements”面板选择DOM元素和在带有剪头的地点按住Alt +点击鼠标左键,可以展开所有子节点改变开发者工具位置试一试快捷键:CMD + Shift + D。设置开发者工具有三个选项:不在窗口中显示开发者工具在窗口右侧显示开发者工具在窗口底部显示开发者工具通过CSS选择器搜索DOM元素试一试快捷键:CMD + F / CTRL + F和输入你需要的类名或ID名,可以搜索到相应的选择器。Material和自定义颜色调色板你可以点击颜色代码前面的小图标,你可以选择:页面颜色:这个面板是从你的Web网站(在你的CSS中)自动生成Material Design:这个面板可以从Material Design面板中自动生成颜色多个光标移动光标按住CMD + 点击可以添加多个光标,你也可以使用CMD + U撤销你选择的最后一个光标。复制图片的Data URI选择”Network”面板在“Resources”面板选择你的图片在图片上右击,选择“Copy Image as Data URI”选项触发伪类在左边的面板元素上右击鼠标,并选择“Force Element State”另外在右边的面板中选择切换伪类状态的图标通过拖拽选择多列选择“Sources”面板在“Sources”面板编辑器中选择你需要的文件按住Alt并拖动鼠标使用$0获取当前元素选择“Elements”面板在”Element”面板中选择DOM元素点击”Console”并输入$0可以获取当前元素在元素中显示选择一个DOM节点:在“Console”面板中右击选择”Reveal in Elements Panel”查看事件监听器选择“Elements”面板”在“Event Listeners”菜单中选择一个事件右击并选择“Show Function Definition”,你可以查看到对应的源码预览Easing点击easing图标(紫色的图标),可以预览easing你可以通过浏览选择其他的easing或者自定义easing媒体查询点击左上角的手机图标,选择设备模式点击断点(“blue”,”green”,”orange”)工具栏选择断点如果你可击一个工具栏,你可以在源码中找到它对应的位置。Network FilmstripFilm Strip”显示页面从开始到结束渲染的截图。你可以点击截图和在timeline-style中查看视图。选择“Network”面板点击“录制”图标重新加载页面Copy Response你可以在网络资源中复制”Response/Request”头。选择“Network”面板”在“Sources”面板编辑器中选择你需要的文件”右击并选择“Copy Response”运行预定义的代码片段在左侧边栏中选择: Sources & Snippets右击选择Select New输入文件名和在右侧的面板中输入代码片段代码片段文件名上右击选择RunDevice Emulation Sensors你可以模拟移动设备传感器:触摸屏地理位置坐标加速计你可以这样操作:选择“Elements”面板选择“Emulation & Sensors”和点击“Esc”取消Workspaces选择“Sources”面板在Sources面板中右击并选择“Add Folder to Workspaces”选择你的文件和右击,并选择Map to Network Resources修改你的文件代码和查看相关文章10-1610-1608-0608-2107-2407-2408-2407-0708-0308-0603-2702-2501-2208-12相关软件下载周排行下载总排行大小：54.0 MB03-25大小：11.4MB01-19大小：58.1 MB04-22大小：23.4 MB02-17大小：54.9 MB02-03大小：12.1 MB01-29大小：35.3 MB12-23大小：38.6 MB02-22大小：31.7 MB03-22大小：45.9 MB12-18大小：32.2 MB12-01大小：40.0 MB04-08大小：33.85 MB11-18大小：12.3 MB01-07文章周排行文章总排行如何更专业的使用Chrome开发者工具
顾名思义Chrome开发工具就是一个工具，它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面，也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具，你可以做很多有趣的事情：
调试界面的问题
使用断点调试JavaScript代码
优化你的代码
打开开发者工具，你只需要在页面的任意位置右击鼠标，选择检查元素或从右上角菜单中选择“工具&更多工具&开发者工具“。
下面示例演示的都是在Google Chrome的 Canary 浏览器下做的演示。
快速编辑HTML元素
选择&Elements&面板
选择&Elements&面板内的一个DOM元素
双击你需要打开的DOM元素标签，你就可以编辑它
当你完成之后会自动更新和关闭标签
到指定的行数
你可以在“Sources”面板中选择指定的文件中使用“:行数:列数”的功能。试试快捷键
展开所有子节点
选择&Elements&面板
选择DOM元素和在带有剪头的地点按住
点击鼠标左键，可以展开所有子节点
改变开发者工具位置
试一试快捷键：
CMD + Shift + D
。设置开发者工具有三个选项：
不在窗口中显示开发者工具
在窗口右侧显示开发者工具
在窗口底部显示开发者工具
通过CSS选择器搜索DOM元素
试一试快捷键：
CMD + F / CTRL + F
和输入你需要的类名或 ID 名，可以搜索到相应的选择器。
Material和自定义颜色调色板
你可以点击颜色代码前面的小图标，你可以选择：
页面颜色：这个面板是从你的Web网站（在你的CSS中）自动生成
Material Design:这个面板可以从 Material Design面板 中自动生成颜色
移动光标按住
CMD + 点击
可以添加多个光标，你也可以使用
撤销你选择的最后一个光标。
复制图片的Data URI
选择&Network&面板
在“Resources”面板选择你的图片
在图片上右击，选择“Copy Image as Data URI”选项
在左边的面板元素上右击鼠标，并选择“Force Element State”
另外在右边的面板中选择切换伪类状态的图标
通过拖拽选择多列
选择“Sources”面板
在“Sources”面板编辑器中选择你需要的文件
并拖动鼠标
使用 $0 获取当前元素
选择“Elements”面板
在&Element&面板中选择DOM元素
点击&Console&并输入
可以获取当前元素
在元素中显示
选择一个DOM节点：
在“Console”面板中右击
选择&Reveal in Elements Panel&
查看事件监听器
选择“Elements”面板”
在“Event Listeners”菜单中选择一个事件
右击并选择“Show Function Definition”，你可以查看到对应的源码
预览Easing
点击easing图标（紫色的图标），可以预览easing
你可以通过浏览选择其他的easing或者自定义easing
点击左上角的手机图标，选择设备模式
点击断点(&blue&,&green&,&orange&)工具栏选择断点
如果你可击一个工具栏，你可以在源码中找到它对应的位置。
Network Filmstrip
&Film Strip&显示页面从开始到结束渲染的截图。你可以点击截图和在timeline-style中查看视图。
选择“Network”面板
点击“录制”图标
重新加载页面
Copy Response
你可以在网络资源中复制&Response/Request&头。
选择“Network”面板”
在“Sources”面板编辑器中选择你需要的文件”
右击并选择“Copy Response”
运行预定义的代码片段
在左侧边栏中选择: Sources & Snippets
右击选择Select New
输入文件名和在右侧的面板中输入代码片段
代码片段文件名上右击选择Run
Device Emulation Sensors
你可以模拟移动设备传感器：
地理位置坐标
你可以这样操作：
选择“Elements”面板
选择“Emulation & Sensors”和点击“Esc”取消
Workspaces
选择“Sources”面板
在Sources面板中右击并选择“Add Folder to Workspaces”
选择你的文件和右击，并选择Map to Network Resources
修改你的文件代码和查看
Chrome DevTools
本文根据 @Ibrahim Nergiz 的《 How to use Chrome DevTools like a Pro 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： /jotform-form-builder/how-to-use-chrome-devtools-like-a-pro-b9bd 。
常用昵称“大漠”，W3CPlus, Sass中国 创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。
最新教程周点击榜
微信扫一扫用浏览器自带的开发者工具检测视频出错原因，适合ie9-ie11及以上，firefox，chrome等浏览器-ckplayer帮助手册
帮助手册&|&&|&&|& &|&
软件介绍
免费使用
环境要求及播放器功能介绍
安装和调用播放器
配置一个精简的播放器/按自己的需求进行文件的选择
功能配置&使用技巧
配置文件说明，建议先了解一下。方便您了解其它内容
修改固定功能配置，打开ckplayer.js和ckplayer.xml
加载播放器时初始化设置，如定义视频地址，默认是否播放等内容
风格配置
风格介绍，按钮位置控制，及风格处理的一些方法
语言配置
语言包的介绍和修改方法
javascript-api
使用javascript-api需要注意的参数和事项
javascript-api
actionscript3.0-api
actionscript3.0-api介绍
插件的分类，安装，制作
actionscript-api
视频处理&服务器配置
IIS设置支持flv,f4v,mp4,ogv,webm，以及mp4视频随意拖动和预览
windows环境中apache和nginx中配置支持视频任意拖动
服务器自动化智能转码软件
常见问题
视频播放问题
修改右键
兑换/购买修改右键版权名称的服务
修改/增加右键菜单的方法
加密风格文件style.swf
用浏览器自带的开发者工具检测视频出错原因，适合ie9-ie11及以上，firefox，chrome等浏览器
在浏览器当前播放页面按F12可以调用出开发者工具，只要稍微了解一下，就能体会到这个工具的实用性。借助他可以分析出各种各样的问题。做为网站开发者，强烈建议了解这个工具。下面我们以视频加载失败为例进行实际测试，其它的如js出错也都可以测试出来。ie的以ie11为例firefox为例chrome为例
Powered &&
Copyright&ckplayer，&&国之画&&&&&&
&& &&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！西西软件下载最安全的下载网站、值得信赖的软件下载站！
→ 谷歌浏览器开发工具使用教程
v50.0.2661.75 官方正式版
类型：浏览器类大小：43.2M语言：中文 评分：6.0
对于本文，作为一个Web开发人员，除了上面的原因以外，与我们开发相关的，就是Chrome的开发者工具。而本文，就是要详细说说Chrome的开发者工具，说说我为什么认为它比Firebug要好用。怎样打开Chrome的开发者工具？你可以直接在页面上点击右键，然后选择审查元素：或者在Chrome的工具中找到：或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。打开的开发者工具就长下面的样子：不过我一般习惯与点左下角的那个按钮，将开发者工具弹出作为一个独立的窗口：下面来分别说下每个Tab的作用。Elements标签页这个就是查看、编辑页面上的元素，包括HTML和CSS：左侧就是对页面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&并执行：怎么样，一目了然了吧 ？再例如我想查看日期函数都有哪些方法：（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）结语Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。
火狐浏览器安卓版功能特性快速快速浏览从启动到页面加载,到平移和缩放,都有超快的浏览体验智能工具栏轻点智能工具栏,即可获得经常访问的网站列表,书签和历史记录,点击访问,无需输入便捷简洁易用标签页便于您同时浏览多个站点加载项提供无图阅读模式,流量受限时启用也能便捷查看网页智能同步从任何装置存取您浏览器的历史纪录,书签,密码,以及开启的标签页阅读自动将零散的文章组合成美观易读的页面插件提供多种功能插件以丰富您的浏...
04-12 / 33.1M
推荐理由：FirefoxMobile由大名鼎鼎的Firefox浏览器公司Mozilla官方提供，是一款基于移动平台的手机和平板设备专用浏览
04-12 / 43.8M
推荐理由：火狐浏览器由谋智基金会开发的网络浏览器，采用自己独有的内核，从而让用户获得绝佳的浏览体验！支持浏览器
11-01 / 198KB
推荐理由：&查看火狐浏览器下载记录工具，专门用来查看firefox火狐浏览器的下载记录，它是一个独立的软件，使用时
04-23 / 30.4M
推荐理由：火狐浏览器去广告增强版，这是国内大神在firefox原版浏览器的基础之上更正和进化过的浏览器。保留原有的界面
11-16 / 21.7M
推荐理由：微软已经正式发布nternet Explorer 10 for Windows 7，这一版本让Windows 7用户等待了好久。之前IE10一直仅
04-15 / 43.2M
推荐理由：谷歌浏览器GoogleChrome将简约的界面设计与先进的技术相融合，让网络浏览变得更快速、安全而且简便。谷歌浏
西西软件园提供好用的浏览器官方下载，包括，浏览器真的是越来越强大了，界面极其清爽简洁新增网页固定功能智能网址地址栏快速访问入口独立标签页下载管理器开发人员工具多功能地址栏加载管理和跟踪保护功能支持和加速功能。...
01-29 / 87.2M
推荐理由：ie11 win7 64位官方正式版适用于win7 64位的系统。微软为IE11添加了一些新特性，比如对WebGL的支持，以及对
01-29 / 28.1M
推荐理由：微软Internet Explorer 11今天正式发布，Windows 7以上版本均可以安装，而Windows 8.1系统则内置了这一版本
02-26 / 41.7M
推荐理由：微软已经正式发布nternet Explorer 10 for Windows 7，这一版本让Windows 7用户等待了好久。之前IE10一直仅
11-16 / 21.7M
推荐理由：微软已经正式发布nternet Explorer 10 for Windows 7，这一版本让Windows 7用户等待了好久。之前IE10一直仅
02-15 / 19.5M
推荐理由：IE10平台预览版第四版（PP4），使得IE浏览器的灵活性得到进一步增强。新版IE10在HTML5技术上带来了相当大的
10-30 / 13.7M
推荐理由：IE7中文版支持中文域名，包含了许多重大安全改进的Internet Explorer 7终于发布了最新正式版本。微软通过其
目前市场上的安卓浏览器种类繁多，不过有一款浏览器却一直活跃在安卓系统上，那就是欧朋浏览器。欧朋浏览器是全球最流行的手机浏览器的中文版本。欧朋手机浏览器基于开发，延续小巧快速节省流量的优点，同时集成了诸多贴近中国用户的社会化应用。欧朋浏览器最大的特色就是快，与同类产品相比优势比较明显。体积小，适应性好，同时支持智能非智能手机。欧朋浏览器特点欧朋浏览器支持智能预读智能缩放手势操作，外加时尚个性化的界面...
11-14 / 29.7M
推荐理由：Opera Next 是 Opera 最新推出的基于 Chromium 内核的浏览器，浏览器排版引擎由原先的 Presto 更换为高性能
04-13 / 35.3M
推荐理由：Opera浏览器起初是一款挪威OperaSoftwareASA公司制作的支持多页面标签式浏览的网络浏览器，由于新版本的Ope
05-15 / 15.7M
推荐理由：微软全新推出的最新版本网页浏览器IE8(InternetExplorer8)，是xp系统能使用的IE最新版，更新版本IE9、IE10微
07-21 / 5.8M
推荐理由：opera mini，是全球最受欢迎的手机浏览器 ，小编本人也在使用中，确实好用哈~能在大幅提升浏览速度的同
05-16 / 328KB
推荐理由：&欧朋浏览器java通用版~~~
opera mini大家都知道把!!!大名鼎鼎的挪威浏览器巨头opera推出的手机版浏览
04-21 / 2.0M
推荐理由：欧朋浏览器forandroid针对移动设备与个人电脑之间的隔阂，发布了最新版本，全面支持手机与电脑之间个人信息
西西软件园强力推荐的浏览器下载排行榜产品，目前市场上的浏览器产品众多，大家可能会有选择性困难，到底哪款浏览器速度最快，体验最好最安全这些都是在使用浏览器当中常见的疑问，如何选择一款最好的浏览器，其实最适合的就是最好的。火狐浏览器是一个完全开放源代码,任何人都可以自由参与开发的,支持多种操作系统的浏览器,因为其强大的可定制性和丰富的扩展程序而成为最有个性的浏览器.和支持最好，弹窗拦截和更胜一筹，执行速度...
02-25 / 38.4M
推荐理由：傲游发布傲游云浏览器，为用户提供跨平台、多设备的无缝浏览。据悉，傲游云浏览器将不再是简单的标签同步，
04-15 / 46.9M
推荐理由：百度浏览器的使命是让人们更流畅的上网、更愉悦的在线生活。通过百度的开放整合和精准识别，您可以一键触达
10-30 / 38.9M
推荐理由：360极速浏览器7.3Beta版火速上线，国内率先更新chrome26内核的双核浏览器！7.3版本基于chrome26正式版内核开
04-15 / 43.2M
推荐理由：谷歌浏览器GoogleChrome将简约的界面设计与先进的技术相融合，让网络浏览变得更快速、安全而且简便。谷歌浏
03-23 / 32.0M
推荐理由：搜狗浏览器配备强劲双核动力引擎（内置IE8内核）、全网加速、网速保护、防假死、下载加速，5级加速体系打造
02-26 / 41.7M
推荐理由：微软已经正式发布nternet Explorer 10 for Windows 7，这一版本让Windows 7用户等待了好久。之前IE10一直仅
搜狗浏览器是搜狗公司推出的国内首款集高速的内核谷歌浏览器内核与兼容的内核微软浏览器内核于一身的双核高速浏览器。最新推出的搜狗高速浏览器.正式版具有具有超高速，超兼容，超安全的特点。搜狗浏览器还具有扩展功能，涵盖了从工作学习生活服务系统工具时尚休闲资讯阅读到影音视频游戏娱乐大类余款扩展。更有包括登录助手如意淘微信摇一摇传图等特色扩展。搜狗助手搜狗助手是一款用于订购火车票的助手软件，能够减少大家在网上订...
03-23 / 32.0M
推荐理由：搜狗浏览器配备强劲双核动力引擎（内置IE8内核）、全网加速、网速保护、防假死、下载加速，5级加速体系打造
02-05 / 17.2M
推荐理由：搜狗浏览器安卓版终于上线啦，虽然相比iphone版虽然姗姗来迟，但是毕竟终于登陆安卓了，快来体验吧！搜狗浏
01-06 / 15.1M
推荐理由：搜狗浏览器在12月13日发布的一则新闻又点燃了众多网友心中的希望，搜狗在其官微表示：“将针对抢票中最耽误
04-23 / 38.4M
推荐理由：搜狗高速浏览器是目前互联网上最快速最流畅的新型浏览器之一，与拼音输入法、五笔输入法等产品一同成为您高
05-15 / 34.2M
推荐理由：搜狗浏览器配备强劲双核动力引擎（内置IE8内核）、全网加速、网速保护、防假死、下载加速，5级加速体系打造
03-23 / 35.5M
推荐理由：搜狗高速浏览器是目前互联网上最快速最流畅的新型浏览器，与拼音输入法、五笔输入法等产品一同成为您高速上
11-2211-2011-1611-0907-0606-0803-2303-2203-3109-19
阅读本文后您有什么感想? 已有23人给出评价!
名称大小下载