Chrome DevTools

chrome DevTools使用及详解

打开Chrome开发者工具

• 在Chrome菜单中选择更多工具>开发者工具
• 在页面元素上右键点击，选择检查
• 使用快捷键Ctrl+Shift+I(Windows)或Cmd+Opt+I(Mac)
• 打开最近使用的面板Cmd+Option+I(Mac)或Ctr+Shift+I(Windows)

Elements元素面板

• 检查元素，点击右上角的检查按钮（箭头符号）

快捷键Cmd+Opt+C(Mac)或Ctrl+Shift+C(Windows,Linux,Chrome OS)

• left or right找到层级对应的父（子）集，打开关闭元素对应的层级
• up or down往上（下）移动
• 迅速将页面滚动到选中元素，点击右键，选择Scroll into view
• 查找对应内容的节点，快捷键Ctrl+F or Cmd+F
• 编辑标签内的内容，双击标签中间内容
• 编辑标签对应的属性，双击开始标签
• 重构DOM节点，鼠标拖拽移动对应的标签到对应位置
• 强制改变状态，点击:hov，选中想要的状态
• 隐藏节点，选中节点按H键，显示隐藏对应的标签
• 删除节点，选中节点，按Delete键，或者点击右键选择Delete Element,然后按Ctrl+Z 或Cmd+Z,返回删除前的状态
• 控制台选中节点
  按Escape键调出Console控制台，选中对应的节点，输入$0,鼠标移到对应的输出结果上，页面选中对应的节点
• 将对应的节点存储为全局变量
  选中节点点击右键，选中Store as global variable，在控制台输出temp1……
• 复制JS路径，选中节点，点击右键选择Copy > Copy JS path,在控制台粘贴回车
• DOM节点改变打断点，选中节点，右键Break On > Attribute Modifications.点击DOM Breakpoints，点击回车跳转到改变样式的js文件
• 对应移除DOM节点，节点修改
• 按HTML格式进行修改

打开more actions菜单并选择Edit as HTML

• 按F2(Windows/Linux)或Fn+F2(Mac)
• 按Esc可以退出编辑而不保存
• 查看元素事件侦听器Event Listeners
• 如果启用Ancertors复选框，除了当前选定节点的事件监听器外，还会显示其祖先实体的事件侦听器
• 启用Framework listeners复选框时，DevTools会自动分析事件代码的框架或内容库封装部分，然后告诉你实际复选框，事件侦听器代码可能会在框架或内容库代码的地方解析

DevTools修改CSS

点击空白处新增样式属性及值

点击.cls旁边的加号增加选择器样式

Console控制台面板

• 快捷键Cmd+option+J(Mac)或Ctrl+Shift+J(Windows,Linux,Chrome OS)
• 以抽屉式导航栏打开，按ESC(点击Console时隐藏)
• 点击选择Show Console
• 消息堆叠，左侧显示一个数字，表明重复次数
• 不堆叠时选择show timestanps
• 处理控制台历史记录
• 清除，点击右键clear console，控制台输入clear()
• 按Ctrl+L

Sources源代码面板

一般在这个面板进行断点调试，找出对应代码问题

在要进行断点的那一行点击右键，会出现如下面板

其中：

• Add breakpoint 在这行增加一个断点，当代码执行到这一步时会暂停
• Add conditional breakpoint 在这行增加条件断点，满足某种条件时，代码执行到这步会暂停，一般用于复杂场景具体使用
• Add logpoint 在Console面板输出你想要看的变量，不用在代码中添加一行，后续又要删除对应代码具体使用
• Never pause here 在这行永远都不暂停，当在一个遍历中增加debugger时，断点不停的进入，可用点击此属性，跳过当前断点具体使用
• Add script to ignore list 在Settings > ignore List中增加忽略的代码，断点不会进入

Network网络面板

Open in new tab 在新的页面打开
Clear browser cache 清除浏览器缓存
Clear browser cookies
Copy  复制对象
   Copy Link Address：将请求的网址复制到剪贴板
   Copy Response：将响应包体复制到剪贴板
   Cop as cURL：以 cURL 命令形式复制请求
   Copy All as cURL：以一系列 cURL 命令形式复制所有请求
   Copy All as HAR：以 HAR 数据形式复制所有请求
   Copy as fetch 复制一条请求，可修改i请求参数后在控制台重新发送请求
Replay XHR 重新发送请求

Performance性能面板

Memory内存面板

Application应用面板

Audits审计面板

Security安全面板

常用快捷键

• 审查元素Cmd+Opt+C(Mac)或Ctrl+Shift+C(Windows,Linux,Chrome OS)

• 打开控制台面板Cmd+option+J(Mac)或Ctrl+Shift+J(Windows,Linux,Chrome OS)

• 刷新页面F5,Ctrl+R或Cmd+R

• 刷新页面并忽略保存Ctrl+F5,Ctrl+Shift+R/Cmd+Shift+R

• 放大DevTools Ctrl+‘+’/Cmd+Shift+‘+’

• 缩小DevTools Ctrl+‘-’/Cmd+Shift+‘-’

• DecTools恢复大小 Ctrl+0/Cmd+0

强制改变元素状态Force element state

Shift + click,颜色的切换

Console

勾选Preserve log，保留页面加载前的日志输出

网页性能优化，查看网页代码的使用率****

查看页面重绘的标签****

More tools > .Rendering >

监控页面动画的变更****

More tools > .Animations>

网络条件与User Agent设置****

More tools > .Network Conditions>

调试Android设备的方法Remote Devices****

快速以编辑状态查看一个站点加载的所有资源

快速搜索文件：

Ctrl + P 查看文件（字段搜索）

打开文件后：

Ctrl + F根据字段搜索对应文件里面的字段

按住Ctrl点击鼠标进行多处编辑

Ctrl + D 选择多个相同字段

Ctrl + G 跳转到对应的行数

查找所有文件的字段****

More tools > Search

Ctrl + Shift + F 搜索文件里面所有字段

浏览器阻止一些资源****

More tools > Request blocking设置自己想要的正则表达式

如何在浏览器中模拟传感器的数据****

More tools > Sensors

性能分析****

Performance

FPS帧

Network

快捷键WASD

Call tree 跳转到源码

内存监控的原理和方法****

值类型与引用类型的区别

栈和堆

什么是 manifest****

Service workers****

快速清空所有的本地存储资源****

Indexeddb****

https://caniuse.com/

http://www.tfan.org/using-indexeddb/

Web SQL****

关系型数据库，已经被废弃

快速转存站点资源****

Security节点功能讲解****

Ssl-checker.online-domain-tools.com

全站https

audit的使用详解****

Lighthouse

yslow

文档