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

2017-09-13 10:28:41来源:oschina作者:wlc534人点击

分享

目前主流的几种浏览器

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)

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


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

%20

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

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


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

%20

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

盒子模型查看功能


盒子模型查看功能

%20

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

添加标签样式


添加标签样式

%20

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

添加样式类


添加样式类

%20

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

添加样式伪类


添加样式伪类

%20

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

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


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

%20

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

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


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

%20

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

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


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

%20

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

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


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

%20

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

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


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

%20

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

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


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

%20

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

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


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

%20

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

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


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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台