文档章节

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

wlc534
 wlc534
发布于 2017/09/12 10:05
字数 771
阅读 5
收藏 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
粉丝 6
博文 83
码字总数 143932
作品 0
私信 提问
Webstorm+Chrome plugins JetBrains IDE Support实现强大的JavaScript调试功能

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

changyinling520
05/10
0
0
十款开发者常用的Chrome插件,让chrome成为开发利器!

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

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

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

sp42
2012/10/13
0
0
Introduction to Chrome Developer Tools——阅读笔记

最近对Chrome开发者工具十分关注,因此学习了不少相关文章。这里是HTML5ROCKS上的文章Introduction to Chrome Developer Tools的阅读笔记。注:下面的内容不是一对一地翻译,而是摘录和个人学...

小微
2013/01/16
0
0
22 接口测试2 --- 抓包工具

常见抓包工具 HTTP抓包工具:Fiddler、Charles、Firebug、开发者工具等等。。。 Chrome开发者工具 打开Chrome 浏览器,按下F12快捷打开Chrome开发者工具 点击Network 标签 勾选 Preserve log...

米阳MeYoung
07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
今天
3
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
6
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部