文档章节

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

wlc534
 wlc534
发布于 2017/09/12 10:05
字数 771
阅读 5
收藏 0
点赞 0
评论 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
粉丝 4
博文 40
码字总数 37684
作品 0
Webstorm+Chrome plugins JetBrains IDE Support实现强大的JavaScript调试功能

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

changyinling520
05/10
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
Google Chrome/IE/FireFox查看HTTP请求头request header响应头

chrome查看网页header,鼠标右键打开审查元素,或快捷键Shift+Ctrl+I或者shift+ctrl+c 当我打开Network后,发现里面是空的什么也没有。 查了下,才知,需要刷新页面才能显示出来。 想了想也是...

yifon
2014/04/19
0
0
【原创】响应式设计之移动端调试工具

背景 2013年是网页设计响应式的一年。所谓响应式网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同...

Mr.Zheng
2013/07/02
0
0
【翻译】25个浏览器开发工具的秘密

开发 过去几年来,浏览器开发工具一直是 Web 开发者最得力的工具。它能够与Web浏览器和谐相处,允许我们在当前窗口中实时地操作DOM元素、CSS样式和JavaScript,以及获取一些其他的有用信息。...

lg2045
2014/08/25
0
0
22 接口测试2 --- 抓包工具

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

米阳MeYoung
07/03
0
0
Jerry和您聊聊Chrome开发者工具

Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用。不信? 用Chrome打开我们常用的网站,按F12,在Console标签页里看到这...

jerrywangsap
04/16
0
0
谷歌计划禁止通过第三方网站安装Chrome扩展

长久以来,Google 一直在努力尝试提升 Chromium 系列网络浏览器的扩展安装体验。除了允许用户通过 Chrome Web Store 获取之外,不希望公开发布的开发者也可以通过第三方来安装。不过今后,事...

稿源:
06/13
0
0
5 月全球浏览器市场份额:Chrome 再次出现下滑

NetMarketShare 公布了最新的浏览器市场份额数据,排名前三的分别是:Chrome、Internet Explorer 和Firefox 。 Chrome 浏览器依然是全球最受欢迎的桌面浏览器,但从 4 月起已出现轻微下滑趋势...

王练
06/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Call to undefined function Workerman\posix_getpid

workerman 在centos下报PHP Fatal error: Call to undefined function Workerman\posix_getpid posix在下面这个包中php-process...

dragon_tech
5分钟前
0
0
mysql 7.4 创建表 时  所建表 字段太多 导致失败

报错:[Err] 1118 - Row size too large (> 8126). Changing some columns to TEXT or BLOB may help. In current row format, BLOB prefix of 0 bytes is stored inline. 解决方法:把表的引......

qimh
8分钟前
0
0
语法补漏

1.if...elif...else... 代码示例: test=10 if test>9: print(1) elif test>8: print(2) elif test>7: print(3) else: print('nothing') 输出代码: 1...

十年磨一剑3344
8分钟前
0
0
Python -re模块及正则表达式解析

传送门: https://blog.csdn.net/pipisorry/article/details/25909899 ps:上面文章中"命名分组"的语法格式不能执行。正确的如下: (?P<name>正则表达式) #name是一个合法的标识符 除了使用别名...

一口今心
15分钟前
0
0
mybatis中session.getMapper方法源码分析

0开始代码AuthorMapper mapper = session.getMapper(AuthorMapper.class); 1 DefaultSqlSession类 @Override public <T> T getMapper(Class<T> type) { //最后会去调用MapperRegistry.getMap......

writeademo
24分钟前
1
0
spring cloud zuul网关的作用

zuul一般有两大作用,1是类似于Nginx的网址重定向,但zuul的重定向的一般是整个spring cloud里在Eureka注册中心的模块. zuul: ignored-services: '*' sensitiveHeaders: routes: ...

算法之名
24分钟前
9
0
java按比例之原图生成缩略图

package com.wxp.test; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import javax.imageio.ImageIO; import sun.......

恋码之子
34分钟前
1
0
SpringCloud 微服务 (十五) 服务容错 Hystrix

壹 工作中的微服务架构,某个服务通常会被多个服务调用或者多层调用完成需求,如果某个服务不可用,导致一个系统功能不可用或者服务直接没用了的情况,这种情况称为雪崩效应 有A服务调用B服务,B服...

___大侠
36分钟前
1
0
Spring框架中的设计模式(五)

Spring框架中的设计模式(五) 通过以前的4篇文章,我们看到Spring采用了大量的关于创建和结构方面的设计模式。本文将描述属于行为方面的两种设计模式:命令和访问者。 前传: Spring框架中的...

瑞查德-Jack
39分钟前
1
0
解决phpstorm运行很卡问题!

phpStorm一旦达到这个临界值,所有智能提示、自动补全都失效了 这TM就很尴尬了,顿时感觉自己就是个废人了,纯手写代码跟便秘一样 众所周知phpStorm基于JAVA,那么这个内存限制肯定跟JAVA的虚...

sjcehui2010
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部