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

2019独角兽企业重金招聘Python工程师标准>>>

目前主流的几种浏览器   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可以看 ...

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

转载于:https://my.oschina.net/u/3298482/blog/1535648