文档章节

强大的浏览器开发者工具——Chrome

wlc534
 wlc534
发布于 2017/09/12 10:05
字数 771
阅读 6
收藏 0
目前主流的几种浏览器
 
  • chrome   —— 目前占据市场份额近百分之以 60 上的浏览器 ,速度、简洁设计、丰富扩展是chrome的标签
  • FireFox   ——  全称Mozilla FireFox,中文做的不错
  • Edge & IE  ——  恩,ie678再见,edge,还行吧凑合。
  • Safari   —— 好吧,因为apple。
  • Opera   ——   似乎目前不是很常见到有小伙伴在用了。
  • other—— UC 浏览器 、QQ浏览器 、 360浏览器、 微信浏览器   ...


    下面附一张网上找的主流浏览器的市场份额:
              

进入主题——她的F12
  • Chrome浏览器下点击的F12进入。
  • 接下来就将看到下面的内容了。
        chrome的命令行控制台——可以直接敲js代码,以及查看浏览器内置对象。

    

点击那三个点,再search 一个a 就就就  把网站加载资源里和a有关的都搜索出来了——但是那几秒用Chrome最卡的时刻。
  

接下来是点一下Network conditions了
嘿嘿,这是可以限制网络加载速度的设置。



Chrome里面的animations这个第一次接触,就帖个图吧!
 

Chrome标签查看器


 

html标签关系.jpg (24.02 KB, 下载次数: 0)

 

标签查看器,点击标签后可查看之间的树形关系

标签查看器,点击标签后可查看之间的树形关系

可编辑.jpg (54.56 KB, 下载次数: 0)

 

标签查看器可以对标签内部内容进行编辑

标签查看器可以对标签内部内容进行编辑

盒子模型.jpg (57.82 KB, 下载次数: 0)

 

盒子模型查看功能

盒子模型查看功能

添加标签样式.jpg (82.06 KB, 下载次数: 0)

 

添加标签样式

添加标签样式

添加样式类.jpg (17.12 KB, 下载次数: 0)

 

添加样式类

添加样式类

样式伪类.jpg (23.13 KB, 下载次数: 0)

 

添加样式伪类

添加样式伪类

切换移动端模式.jpg (103.82 KB, 下载次数: 0)

 

移动端切换,可选择不同类型设备

移动端切换,可选择不同类型设备

调试1.jpg (248.74 KB, 下载次数: 0)

 

通过Sources,左边栏目可以看到浏览器加载的网站资源,点击其中一个资源后会显示在中部,右边的scope可以看 ...

通过Sources,左边栏目可以看到浏览器加载的网站资源,点击其中一个资源后会显示在中部,右边的scope可以看 ...

代码可读.jpg (27.12 KB, 下载次数: 0)

 

你可能看到被压缩的代码,不过没关系,这里有{}点击就可以展示出可读的代码了。 ... ... ...

你可能看到被压缩的代码,不过没关系,这里有{}点击就可以展示出可读的代码了。 ... ... ...

断点.jpg (115.54 KB, 下载次数: 0)

 

就像这样一样,与此同时你也可以选择断点进行调试。

就像这样一样,与此同时你也可以选择断点进行调试。

保留断点位置,但可以运行.jpg (107.28 KB, 下载次数: 0)

 

当断点很多但是又不想删除时候,可以这样。

当断点很多但是又不想删除时候,可以这样。

network.jpg (126.82 KB, 下载次数: 0)

 

现在看看network,你可以选择浏览器截屏功能,这样就可以看到不同时间区间内页面渲染的样子,当然了资源加 ...

现在看看network,你可以选择浏览器截屏功能,这样就可以看到不同时间区间内页面渲染的样子,当然了资源加  ...

分析.jpg (108.9 KB, 下载次数: 0)

 

哈哈,我感觉这是Chrome最为强大的工具,按时间顺序展示页面加载过程及后续过程的网络请求、页面渲染过程、 ...

哈哈,我感觉这是Chrome最为强大的工具,按时间顺序展示页面加载过程及后续过程的网络请求、页面渲染过程、 ...

cookie.jpg (69.9 KB, 下载次数: 0)

 

通过resource(这是老版本Chrome的命名,新版本叫做application)可以看到常用的cookie、localstorge、sess ...

通过resource(这是老版本Chrome的命名,新版本叫做application)可以看到常用的cookie、localstorge、sess ...

© 著作权归作者所有

共有 人打赏支持
wlc534
粉丝 7
博文 84
码字总数 143947
作品 0
私信 提问
Webstorm+Chrome plugins JetBrains IDE Support实现强大的JavaScript调试功能

前言 WebStorm是Jetbrains公司旗下一款JavaScript 开发工具,当你打开这款软件的时候会觉得特别的熟悉,因为它和itellj idea属于同款产品,界面和快捷键基本类似,而且功能非常强大,提示也非...

changyinling520
2018/05/10
0
0
.NET 开发者必备的工具箱

本文作者Spencer是一名专注于ASP.NET和C#的程序员,他列举了平时工作、在家所使用的大部分开发工具,其中大部分工具都是集中于开发,当然也有一些其它用途的,比如图片处理、文件压缩等。 如...

oschina
2015/01/30
7.1K
26
十款开发者常用的Chrome插件,让chrome成为开发利器!

本文作者:TheBeauty 原文地址:www.cnblogs.com/thebeauty/p… 前言 Chrome浏览器无论是作为浏览器市场的NO1还是其强大的跨平台能力以及丰富的扩展插件,一直是许多开发者的首要选择的浏览器...

codeGoogle
2018/10/30
0
0
如何调试 Android 手机网页

兵马未动,粮草先行。安排好 debug 工作的道理也一样,调试的基本工作务必先于开发之前搞得好,不然后果很严重……!哈哈,这样的开场白太那个了……其实实不相瞒,俺的实际情况是,到项目后...

sp42
2012/10/13
0
0
Chrome 4.0正式发布,性能提升42%

继1月21日对Chrome 4.0 Beta进行最后一次升级后,Google于今天正式发布了Chrome 4.0稳定版,并将其版本号同样命名为4.0.249.78。Google Chrome项目主管Anthony Laforge在官方博客中表示,该版...

红薯
2010/01/26
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
1
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部