文档章节

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

wlc534
 wlc534
发布于 2017/09/12 10:05
字数 771
阅读 61
收藏 0

精选30+云产品,助力企业轻松上云!>>>

目前主流的几种浏览器
 
  • 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
粉丝 12
博文 85
码字总数 144683
作品 0
私信 提问
加载中
请先登录后再评论。
Webstorm+Chrome plugins JetBrains IDE Support实现强大的JavaScript调试功能

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

changyinling520
2018/05/10
0
0
我们不再需要 Chrome?

上位 十年前,浏览器的主要市场还在被微软的 IE 牢牢占据着。IE 作为 Windows 的默认浏览器,基本上控制了绝大部分人访问互联网的方式。 即便它功能单一、界面简陋、运行卡顿,并且会经常遇到...

局长
2019/03/01
9.9K
37
.NET 开发者必备的工具箱

阿里百川梦想创业大赛,500万创投寻找最赞的APP 本文作者Spencer是一名专注于ASP.NET和C#的程序员,他列举了平时工作、在家所使用的大部分开发工具,其中大部分工具都是集中于开发,当然也有...

Yamazaki
2015/01/30
4
0
.NET开发者必备的工具箱

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

程序师
2015/02/06
0
0
crx 文件安装 如何安装 Chrome插件

Chrome 67 版本(大概2018.06.06的更新包)开始,插件已经无法离线安装啦,也就是自己无法使用crx文件安装插件, 而只能从chrome.google.com/webstore上安装。 查看chrome版本号方法: 地址栏...

osc_8cfq8uoa
2019/08/16
17
0

没有更多内容

加载失败,请刷新页面

加载更多

在创建临时表之前检查是否存在临时表,并删除是否存在

问题: I am using the following code to check if the temporary table exists and drop the table if it exists before creating again. 我正在使用以下代码检查临时表是否存在,并在重新......

javail
今天
24
0
动态规划:LC198.打家劫舍

题目描述: 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入...

曦鱼violet
今天
30
0
OSChina 周一乱弹 —— 南方水到底多深

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: Various Artists-用印度乐器演奏苏联国歌(洛天侬 remix) 手机党少年们想听歌,请...

小小编辑
今天
56
0
快递100云平台的安全措施--API限流

2、热点参数限流 注意: 若 entry 的时候传入了热点参数,那么 exit 的时候也一定要带上对应的参数(exit(count, args)),否则可能会有统计错误。 3、通过 ParamFlowRuleManager 的 loadRu...

bykk
今天
19
0
在Bash中重定向stderr和stdout - Redirect stderr and stdout in Bash

问题: I want to redirect both stdout and stderr of a process to a single file. 我想将一个进程的stdout和stderr都重定向到一个文件。 How do I do that in Bash? 我该如何在Bash中做到...

富含淀粉
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部