[转]谷歌Chrome浏览器开发者工具教程—基础功能篇

Chrome开发者工具不完全指南(壹、基础功用篇)

2015/06/23 · HTML5 · 2
评论 ·
Chrome

原稿出处:
卖烧烤夫斯基   

不畏你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到素不相识。依照最新的一份(贰零一4/0陆)的浏览器市镇占有率报告,Chrome近乎占有浏览器天下的半壁江山。不难、火速使它成为了新时期芸芸众生的新宠。若是你是一名web开发人士,小编引进您使用Chrome。作为前端开发的”IDE”,你只要求搭配1个编辑器就能成就大约全体的费用职务了。关于它的施用和效用分析要么都以大而不全,要么是细细的糜烦。本系会相比较详细地分享卤煮的一对Chrome(F1二开发者功能)使用经验,从局地基础的效劳起先到它的某些高级品质分析器(Timeline、Profiles),在最终,将会推荐五款好的插件,希望对您的支出工作有稍许的效益。假如你对有个别面板模块功效已经很领悟能够一向跳过去阅读你感兴趣的1对。

一、Elements
金沙js333娱乐场 1
在Element中重大分两块大的片段
A:HTML结构面板
B:操作dom样式、结构、时间的显得面板
一.在A中,每当你的鼠标移动到别的二个要素上,对应的html视图中会给该因素森林绿的背景。
金沙js333娱乐场 2
2.假诺您单击选中一个因素,在A部分的最底层,会来得该因素在html结构中的地点关系
金沙js333娱乐场 3
3.然后你可以在B部分的styles选项中编辑该因素的体制,并且探望html结构的实时更新(大大的福利)
金沙js333娱乐场 4
④.您能够在B界面中切换来伊芙nt Listeners选项,观望该因素绑定的风浪。
金沙js333娱乐场 5

click 是事件名称

.div1 事件是索引名称(也等于经过什么绑定的)

attachment 事件源于

handler里面包蕴事件的破坏主体内容

useCapture代表该事件是不是向上冒泡
伍.选中一个因素,右击鼠标,你会看出有三个弹出窗口冒出,里面有若干摘取
金沙js333娱乐场 6
Add attribut : 为该因素添加属性
艾德it attribute:修改该因素的属性
Force element state:
为因素激活某种情状(首要用在能够大致的要素比如a、input、button等)
Edit as
HTML:编辑该因素(你能够重写它的漫天content)甚至修改它的竹签名称
中级简单的掠过…….
Break
on:为该因素添加dom操作事件监听。包罗八个挑选(树结构改变、属性改变、节点移除)。这些选项的效用是帮扶大家监察和控制和永恒操作成分的代码。请参见下图事例:
金沙js333娱乐场 7
陆.在A界面包车型客车弹出选项窗口中精选node removal,在B界面切换来DOM
Breakpoints 选项,能够看出有注册消息。然后大家点击click
me按钮触发删除div三的轩然大波,能够看来浏览器自动为大家原则性删除该因素的代码部分,并且结束执行js代码:

金沙js333娱乐场 8

 

7.在B界面中切换成Properties选项,能够看到选七月素的各类音讯(英文单词里面的牵线相比简单,就不壹一介绍了)。

金沙js333娱乐场 9

 

8.点击A界面包车型地铁随意地方,按急迅键ctrl+F能够看出底部有输入框,在输入框中输入你想要查找的别样内容,即使匹配到了,都回在A面板中高亮展现
金沙js333娱乐场 10
九.要么你能够点击左上角的问号图标,然后把鼠标移动到视图界面中,对准成分按下鼠标左键,对应的A界面会定位到选拔的成分。
金沙js333娱乐场 11

 

 

二、Network
金沙js333娱乐场 12
一.Network是多个监督当前网页全体的http请求的面版,它主体部分显得的是各样http请求,各种字段表示着该请求的两样属性和景色
金沙js333娱乐场 13
Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完结的动静
Type:请求的花色
Initiator:请求源也正是说该链接通过怎么样发送(常见的是Parser、Script)
Size:下载文件只怕请求占的财富大小
Time:请求或下载的时刻
Timeline:该链接在发送过程中的时间状态轴(大家能够把鼠标移动到那一个红红绿绿的时间轴上,对应的会有它的详细音讯:初阶下载时间,等待加载时间,自个儿下载耗费时间)
金沙js333娱乐场 14
二.单击面板中的任意一条http新闻,会在底层弹出七个新的面板,个中记录了该条http请求的详细参数header(表头新闻、重返新闻、请求基本情状—请参考http一.一商讨内容对号落座)、Preview(重临的格式化转移后文本音信)、response(转移在此之前的原有消息)、Cookies(该请求带的cookies)、Timing(请求时间转移)
金沙js333娱乐场 15
3.在主面板的顶部,有壹些按钮从左到右它们的功能分别是:是还是不是启用继续http监察和控制(暗中同意高亮选中过)、清空主面板中的http新闻、是不是启用过滤新闻选项(启用后能够对http音讯举行筛选)、列出各样性质、只列出name和time属性、preserve
log(近年来不知晓啥用)、Dishable cahe(禁止使用缓存,全体的30肆再次回到会和fromm
cahe都回变成正规的伏乞忽视cache conctrol 设定);

金沙js333娱乐场 16
四.最终在主面板的底部有记录了完整互连网请求状态的1部分主导音讯
金沙js333娱乐场 17

三、Resources

Resources部分较不难,他第三直大家来得了本界面所加载的能源列表。还有cookie和local
storage 、SESSION
等地点存款和储蓄消息,在此间,大家能够Infiniti制地修改、扩展、删除本地存款和储蓄。

金沙js333娱乐场 18 关于webSql,笔者明白的并不多,在付出中很少用到。假如您想掌握那上头的音讯,作者推荐您去读书那篇博客金沙js333娱乐场

1 赞 28 收藏 2
评论

金沙js333娱乐场 19

来源:

很对不起,那小说是自己久久在此以前写的
图片是存在有道云的,不通晓为啥在活动端一点都不大概加载

Chrome(F1贰开发者工具)是越发实用的付出帮忙理工科程师具,对于前端开发者大致便是神器,但苦于开发者工具是英文界面,且未有普通话,那让无数情侣都不知底怎么用。下载呢小编为大家带来Chrome开发者工具基础功效和高级质量分析器(Timeline、Profiles)的图像和文字详解教程,上面是基础作用篇。

常用火速键

金沙js333娱乐场 20

chrome快捷键

提示:右键点击图片选用在新窗口或新标签页中打开可查阅大图。

chrome火速键 左右切换tag页

left: ctrl + pgup
right: ctrl + pgdn
new tab: ctrl + t

一.文件飞快切换
火速键Ctrl + P 就能够长足搜索你的工程文件。

二.源代码内部查找
若果您想要查找源代码的始末,你能够动用Ctrl + Shift + F (Cmd + Opt +
F)并输入字符串关键词。

三.到某壹行
当你在Chrome DevTools中打开3个源文件,你能够钦赐到自由一行,用便捷键
Ctrl + G (Windows 和 Linux), 恐怕 Cmd + L (Mac)并输入你想跳到哪壹行。
你也能够示用Ctrl + O,并输入“:”+第几行。

四.在控制武汉选瓜时素
在DevTools中您能够手动选用DOM成分。
$() 重返符合当下CSS选用器的第3个因素,例如 $(‘div’)
会重临页面中率先个div成分。
$$() 重临符合当下CSS选用器的1串 好八个 不是3个元素。

(下边包车型大巴图是自己在网上征集的,本人写一定未有这一个配图说的敞亮)

一、Elements

金沙js333娱乐场 21

在Element中首要分两块大的有个别:HTML结构面板(A)和操作dom样式、结构、时间的来得面板(B)。

一.在A中,每当你的鼠标移动到其它一个因素上,对应的html视图中会给该因素深黑的背景。

金沙js333娱乐场 22

贰.要是您单击选中叁个成分,在A部分的平底,会呈现该因素在html结构中的地方关系

金沙js333娱乐场 23

三.然后在B部分的styles选项中编辑该因素的样式,并且看来html结构的实时更新。

金沙js333娱乐场 24

4.在B界面中切换来伊芙nt Listeners选项,观看该因素绑定的轩然大波。

金沙js333娱乐场 25

click 是事件名称

.div一 事变是索引名称(也正是经过什么绑定的)

attachment 事件源于

handler里面包涵事件的磨损主体内容

useCapture代表该事件是还是不是向上冒泡

伍.选中2个要素,右击鼠标,你会看到有三个弹出窗口冒出,里面有若干选项。

金沙js333娱乐场 26

Break
on:为该因素添加dom操作事件监听。包括七个选项(树结构改变、属性改变、节点移除)。那些选项的功能是帮忙大家监察和控制和稳定操作成分的代码。请参见下图事例:

金沙js333娱乐场 27

6.在A界面包车型地铁弹出选项窗口中选拔node removal,在B界面切换成DOM Breakpoints
选项,能够看到有登记新闻。然后大家点击click
me按钮触发删除div三的风云,能够看看浏览器自动为大家永恒删除该因素的代码部分,并且结束实施js代码:

金沙js333娱乐场 28

七.在B界面中切换成Properties选项,能够看来选11月素的种种新闻(英文单词里面包车型大巴牵线比较不难,就不一一介绍了)。

金沙js333娱乐场 29

八.点击A界面包车型大巴随机地点,按神速键ctrl+F可以看到尾部有输入框,在输入框中输入你想要查找的任何内容,如若匹配到了,都回在A面板中高亮展现

金沙js333娱乐场 30

九.依旧你能够点击左上角的问号图标,然后把鼠标移动到视图界面中,对准元素按下鼠标左键,对应的A界面会定位到选拔的因素。

金沙js333娱乐场 31

开发者工具面板各样板块介绍

二、Network

金沙js333娱乐场 32

一.Network是一个监督检查当前网页全部的http请求的面版,它主体部分显得的是种种http请求,每一种字段表示着该请求的两样属性和情景金沙js333娱乐场 33

提姆eline:该链接在发送进度中的时间状态轴(大家能够把鼠标移动到这么些红红绿绿的时间轴上,对应的会有它的详细消息:起头下载时间,等待加载时间,本身下载耗时)

金沙js333娱乐场 34

2.单击面板中的任意一条http消息,会在尾巴部分弹出三个新的面板,当中记录了该条http请求的事无巨细参数header(表头新闻、重返消息、请求基本情状---请参考http1.1协商内容对号落座)、Preview(重回的格式化转移后文本消息)、response(转移之前的原有音信)、Cookies(该请求带的cookies)、Timing(请求时间转移)

金沙js333娱乐场 35

三.在主面板的顶部,有部分按钮从左到右它们的法力分别是:是不是启用继续http监察和控制(暗许高亮选中过)、清空主面板中的http音信、是还是不是启用过滤音信选项(启用后方可对http信息实行筛选)、列出二种属性、只列出name和time属性、preserve
log(近日不亮堂啥用)、Dishable cahe(禁止使用缓存,全体的30肆重回会和fromm
cahe都回变成正规的哀告忽视cache conctrol 设定);

金沙js333娱乐场 36

四.结尾在主面板的底层有记录了全部网络请求状态的有的为主音讯

金沙js333娱乐场 37

Elements

常用方法:
一.鼠标移动到成分上会在原网页上出示原野绿印记;
2.在开发者工具上面显示成分在HTML里的岗位关系;
三.在styles选项中编辑该因素的样式,并且探望html结构的实时更新;
4.左上角的箭头,鼠标点击后,移动到网页,上面会自动跳转到相应的因素上;

当选2个因素,右击鼠标,你会合到有三个弹出窗口出现,里面有好多增选

金沙js333娱乐场 38

Add attribut: 为该因素添加属性
Edit attribute:修改该因素的本性
Force element state:
为成分激活某种情状(首要用在能够大约的要素比如a、input、button等)
艾德it as
HTML:编辑该因素(你能够重写它的凡事content)甚至修改它的竹签名称
Break on:为该因素添加dom操作事件监听。

在element里能够调剂css查看html的DOM,这个都以平凡最常用的作用
接下来chrome最可喜的css颜色选取,当您点击1个css的color属性后,就会并发下图,你就能够采纳自身喜好的颜料了,而且此时你活动鼠标到页面上自由地方会油可是生三个放大镜壹样的取景器,点击就会在elelment面板上显得你点击地方的颜料相关音信。。。。。
点击color属性能够在rgbahslhexadecimal高级中学级来回切换颜色的格式

金沙js333娱乐场 39

就好像这么。。。。

金沙js333娱乐场 40

DevTools有2个方可效仿CSS状态的服从,例如成分的hover和focus,能够很不难的变更成分样式。在CSS编辑器中能够利用那个意义

金沙js333娱乐场 41

三、Resources

Resources部分较不难,首要向大家体现了本界面所加载的能源列表。还有cookie和local
storage 、SESSION
等本地存款和储蓄音讯,在此地,大家得以随心所欲地修改、扩大、删除本地存储。

金沙js333娱乐场 42

Network

金沙js333娱乐场 43

Network是二个监察当前网页全数的http请求的面版,它主体部分显得的是每一种http请求,每一种字段表示着该请求的不一致性质和状态

Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完毕的图景
Type:请求的门类
Initiator:请求源也正是说该链接通过什么样发送(常见的是Parser、Script)
Size:下载文件恐怕请求占的能源大小
Time:请求或下载的时辰
Timeline:该链接在出殡和埋葬进程中的时间状态轴(大家得以把鼠标移动到那个红红绿绿的时间轴上,对应的会有它的详细新闻:早先下载时间,等待加载时间,自己下载耗费时间)

金沙js333娱乐场 44

贰.单击面板中的任意一条http消息,会在尾巴部分弹出贰个新的面板,个中记录了该条http请求的事无巨细参数header(表头新闻、重返信息、请求基本处境—请参见http一.一协议内容对号落座)、Preview(再次来到的格式化转移后文本信息)、response(转移此前的本来面目音信)、Cookies(该请求带的cookies)、Timing(请求时间转移)

金沙js333娱乐场 45

金沙js333娱乐场 46

职责一:filter过滤器,可在输入框中输加入关贸总协定组织键字搜索对应请求的文书。
任务二:请求文件的列表里开始展览了分类,个人常用的是翻开XH奥迪Q7的归类,查看Ajax请求。
岗位三:设置互连网的通信格局。暗中认可”No
thirotting”不节流。那里能够安装断网格局,只怕模拟三G,四G互连网等状态下页面加载的快慢。网速能够在”settings”里面安装。

Sources

金沙js333娱乐场 47

sources面板是调剂中最常用的地点。
岗位一:查看页面中加载的财富文件
地点2:假设浏览器装了插件,插件所须要的JS文件会在此间显示
地点三:使用ctrl+p/ctrl+o 打开有个别文件
职责4:断点的操作
地方伍:查看异步请求时所设置的定时器
地点6:点击右侧的加号,能够扩大监听的变量。不过鼠标放到JS文件中的变量时也会议及展览示相应的值。
地点7:设置各类分化的断点。
当勾选XHSportage Breakpoints里的any XHR时,页面中触发Ajax请求时都会停顿。
当勾选”伊夫nt listener breakpoint” 下的 Mouse(鼠标)下的 Click
(单击)事件时,触发有些按钮的点击事件就会停顿。
地点8:一般线上的代码都以包裹后的代码,不方便人民群众意侦查试。点击{}后格式化该公文。

此间自身再就说一下怎么使用sources那几个面板实行局地js的调节:

图中的四号区域有6个按键(有的版本那多少个按键地点在source上边)
当您调节和测试时按下率先个暂停(火速键f八),js甘休运维,然后点击第多个想箭头1样的按钮(连忙键f10),javascript执行下一句,同理另贰个箭头按钮表示发展执行,重返上一句js的意况。
安装断点:(当四号区域第4个按钮按下时)点击sources中间的代码行数,就会在此间安装三个断点,铜锈绿时表示激活断点,再次点击废除,那样刷新页面一向实施到你设置的断点处。

接下来小编就亟须提二个相比较讨人喜欢的功效了。。。。。代码美化。。。。。

从前看源码跟个鬼1样 全数js
css全堆在一块儿,是个平时人都看不懂,但chrome在sources源代码的1对下边有三个按键
“{}” 点击后您就会发觉世界美好了,,,,,

想飞快的找到你点击有个别特定的按钮或然链接的运转代码,只须求在您点击按钮前启用“伊芙nt
listener breakpoint” Mouse:mouseover还有mouseout

金沙js333娱乐场 48

本人在div上写了一个mouseover的js当js检查实验到有运营到mouseover时就会来得出mouseover执行的function()
您就足以看看事件是怎么执行的了
但运用那么些意义可能会进入到第二方的代码库像jQuery,那时候你就要求花费一些调节和测试的时间赶到达确实的事件处理函数。最佳的法子是标志“Blackbox
Script”防止进入到第贰方的剧本。调节和测试时就再不会进入第1方的脚本库了,代码会一向运营到未有标记blackboxed的文本甘休。你能够blackbox脚本通过右击调用栈里的第2方库的公文,并从上下文菜单中选用“Blackbox
Script”即可:
可是壹般笔者绝不jquery

金沙js333娱乐场 49

发表评论

电子邮件地址不会被公开。 必填项已用*标注