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源代码面板

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

在要进行断点的那一行点击右键,会出现如下面板
Chrome DevTools_第1张图片
其中:

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

Network网络面板
Chrome DevTools_第2张图片

Chrome DevTools_第3张图片

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

文档

你可能感兴趣的:(chrome,Chrome,DevTools)