概览
Element
- 第一部分：操作dom元素
- 查看
DOM树 - 选取
DOM节点 - 操作
DOM节点
- 查看
- 第二部分
- 查看界面样式
- 修改界面样式
- 第三部分
- 相当于一个目录，指向指定的地方
console
基本的console使用方法
console.warn('<output>') // 用来显示警告
console.error('<output>') // 用来显示错误
console.info('<output>') // 用来显示提示信息
console.assert([Condition Expression], '<output>') // 可以在console进行打出断言的结果
console.clear()// 清空控制台的内容
console.dir([DOMElement])// 打印DOM元素
console.table([object/array]) // 以表格的形式打出对象或是数组
/**
* 將輸出資料分群顯示
**/
console.group('<groupName>') // 開始分群，預設展開
console.groupCollapsed('<groupName>') // 開始分群，預設不展開
console.groupEnd() // 結束分群
例子：
console.warn('aijin')
console.error('aijin')
console.assert(2<3,'The condition is true') // 正确的时候不会打出后面的断言
console.assert(2>3,'The condition is false')
const data =[{name:'json',age:'11'},{name:'lucy',age:'12'},{name:'iii',age:'13'}]
console.log(data)
console.table(data)
console.log("Runoob");
console.group("RunoobLabel");
console.log("我在指定标签分组里22。");
console.log("我在指定标签分组里22。");
console.groupEnd()
console.log(7777)
/**
* 使用 '%c' 幫輸出的內容添加樣式
**/
console.log('%c What a Cool Console', 'font-size: 32px; color: red')
console的特殊用法
// 計數
console.count([String])
// 計時
console.time([String]) // 開始計時
console.timeEnd([String]) // 結束計時
console.count()每次调用，如果标签一样数字会增加 1，如果不一样则重新开始计数。
console.count("Runoob");
console.count("Runoob");
console.count("Runoob2");
console.time()可以用来计算一个算法执行了多长的时间
console.time("Runoob");
for (i = 0; i < 100000; i++) {
// 代码部分
}
console.timeEnd("Runoob");
Source
第一部分
- content script：主要是第三方插件和Chrome浏览器资源问件等
- Snippets.js:，允许用户自设定JS，主要用来测试JS文件、记住调试片段、单元测试、少了功能代码编写等
console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
第二部分
- 设置和取消断点。选择想要设置断点的js具体行，点击行号，就设置了断点，再次点击，就取消已设置的断点。
-
CTR+F快速查找匹配资源。CTR+G快速定位文件具体行。 -
“{}”表示格式化代码。 - 紧挨
{}处右侧，表示当前光标行号和列号。
第三部分
-
F10单步执行，但当遇到方法，不进入方法，直接方法外的下一行代码 -
F11单步调试，且遇方法体，需要经过。
call Stack：函数被调用的调用栈Scope监视环境变量，私有变量、公有变量、全局变量等。
<html>
<head>
<script>
const add1 = () => {
let a = 1;
let b = 2;
console.log(alert);
};
add = () => {
add1();
};
</script>
</head>
<body>
<button onclick="add()">1111</button>
</body>
</html>
network
停止记录网络请求
- 点击
Stop recording network log红色图标，当它变为灰色时，表示DevTools不在记录请求
跨页面加载时，保留网络请求记录
当页面重载或是跳转页面的 时候，netWork面板的网络请求也是应该刷新的，想要保留跳转或是重载之前的请求可以勾选Preserve log，这个场景在登录跳转的时候十分的常见。
页面加载时捕获屏幕截图
捕获屏幕截图可以分析在页面加载的过程中，用户在不同的时间段内看到的网页是什么样子的。
点击Capture screenshots图标开启捕获功能，当图标变为蓝色表示已开启，重载页面即可看到不同时间的屏幕截图
鼠标悬浮在一张图片上时，该图片四周会出现一个黄色的边框，同时，在
Overview和Waterfall窗口里面也分别有一条黄色的竖线，这条黄色的竖线表示这张图片的捕获时间点击某一张图片，可以过滤掉在这张图片捕获之后发生的所有请求
双击图片，可以放大该图片
禁用浏览器缓存
有些资源在状态码为304的时候，证明我们使用的是浏览器缓存的资源，为了尽可能准确的模拟我们第一次加载网页的情景，需要禁止使用浏览器的缓存，我们可以勾选下面的图标。
模拟网速条件
在Network Throttling下拉框中可以选择不同的网络条件进行模拟，如2G、3G、4G、WiFi等，当想要断网的时候直接选址offline就可以
提示：有时候开发者会看到Network左侧有个警告图标，这个图标就是提示开发者当前处于模拟网络条件下。
手动清除浏览器缓存、cookies
在网络请求记录表里面右键，选择Clear Browser Cache或Clear Browser Cookies。
根据属性过滤
输入框中可以输入一些字符串、域、大小、状态码、媒体类型等等可以实现过滤，也可以根据类型进行过滤
隐藏data URLs
data URLs指一些嵌入到文档中的小型文件，在请求表里面以data:开头的文件就是，如较为常见的svg文件。勾选Hide data URLs复选框即可隐藏此类文件。
查看请求记录
Name：文件的名字或者资源的标识符Status：HTTP状态码Type：请求资源的MIME类型-
Initiator：以下对象或处理可以发起一个请求Parse：Chrome的HTML解析器Redirect：HTTP重定向Script：js函数Other：一些别的处理或操作，比如通过链接导航到一个页面，或者是在浏览器的地址栏输入一个地址然后回车
Size：响应头大小+响应体大小Time：总的持续时间，从发起请求到资源下载完成Waterfall：每一个请求活动的不同阶段的可视化展示
-
Preview：查看响应体的预览 -
Response：查看响应体 -
Timing：查看请求在各个阶段对应的时间
-
Queueing：浏览器会在以下情况对请求进行排队：有更高优先级的请求
在这个域下，已经有6个
TCP连接了，达到Chrome最大限制数量。此条规则仅适用在HTTP/1.0和HTTP/1.1
Stalled：Queueing中的任何一个因素发生都会导致该请求被拖延Request sent：请求发送消耗的时间Waiting (TTFB)：浏览器等待响应的时间，TTFB表示Time To First ByteContent Download：资源下载所消耗的时间
Performance
DEMO的链接 demo
模拟移动设备的CPU
有的时候移动设备的CPU一般会比台式机和笔记本差很多，当我们想要等戏界面的时候，可以用cpu控制起来模拟移动设备，具体的操作如下所示：
ps：其中的4xslow是：Devtools开始模拟两倍速低速CPU
设置demo并记录运行时的性能
打开上面的demo
- 其中
ADD是添加蓝色的小方块 - 点击
Optimize按钮，你会发现蓝色小方块会变的很快而且动画变得平滑。 - 点击
un-optimize按钮，蓝色小方块又会变成之前的模样。
点击performace的录制按钮，我们就可以录制各种指标
等待一会，点击stop按钮 DevTools就会停止录制并开始处理数据了：
分析数据指标
我们从上向下看：
-
FPS：如果发现了一条很长的红色长条，那么说明这些帧存在问题，这个时候用户的体验是十分差的 -
cpu：颜色和Summery里的样式是一一对应的，cpu表格中的各种颜色代表CPU在这各种处理上花费的时间，如果某一项的占用的时间过长，那么这里就可以找到性能瓶颈线索 -
Frames图表：移动在这个上面去的，Devtools就会展现这个帧的FPS，每一个帧都可能在60以下，没有达到标准- 谷歌浏览器提供了中可以实时显示FPS的面板：
- 按下
Command+Shift+P（Mac）或者Control+Shift+P(Windows, Linux)打开命令菜单 - 输入
Rendering，点选Show Rendering - 在
Rendering面板里，激活FPS Meter。FPS实时面板就出现在页面的右上方。
- 按下
- 谷歌浏览器提供了中可以实时显示FPS的面板：
定位瓶颈的位置
大部分的时间花费在了rending位置上，所以我们想要提高性能就要减少rendering的时间
- 我们打开Main图标，
Devtools展示了主线程的运行状况，X轴代表的是时间，每一个长条代表一个event，长条越长，代表这个event花费的时间越长，y轴代表了调用栈，在栈里面，上面的event调用了下面的event。 - 在事件长条的右上角出，如果出现了红色小三角，说明这个事件是存在问题的，需要特别注意。
- 在
app.update这个事件的长条下方，有很多被触发的紫色长条。如果放大这些事件长条，你会看到它们每个都带有红色小三角。点击其中一个紫色事件长条，Devtools在Summary面板里展示了更多关于这个事件的信息。确实，这里有很多reflow的警告。 - 在
summary面板里点击app.js:70链接，Devtools会跳转到需要优化的代码处
应用面板
如果使用本地存储存储键值对 (
KVP)，则可以从Local Storage窗格中检查、修改和删除这些KVP。Session Storage窗格与Local Storage窗格，cookie的窗格的工作方式相同。
安全面板
-
Security Overview：安全页面会通过消息This page is secure (valid HTTPS). 指示。 - 点击
View certificate查看主源的服务器证书。 非安全页面会通过消息This page is not secure.指示。 -
Security面板可以区分两种非安全页面。 如果请求的页面通过HTTP提供，则主源会被标记为不安全。 - 如果点击非安全源，
Security面板会提供Network面板过滤视图的链接。
