Hefery 的个人网站

Hefery's Personal Website

Contact:hefery@126.com
  menu
73 文章
0 浏览
1 当前访客
ღゝ◡╹)ノ❤️

Chrome DevTools使用

功能简介

  • Elements:元素,检查和调整页面,调试 DOM,调试 CSS
  • Network:网络,调试请求,了解页面静态资源分布,网页性能检测
  • Console:控制台,调试 JavaScript、查看 Console log 日志、交互式代码调试
  • Sources:源代码,调试 JavaScript 页面源代码,进行断点调试代码
  • Application:应用,查看&调试客户端存储,如 Cookie,LocalStorage,SessionStorage
  • Performance:性能,查看页面性能细节,细粒度对网页载入进行性能优化
  • Memory:内存,JavaScript CPU 分析器,内存堆分析器
  • Security:安全,查看页面安全及证书问题
  • Audits:使用 Google Lighthouse 辅助性能分析,给出优化建议

快捷方式

  • 打开/关闭:Ctrl+Shift+I、F12、右键-->检查
  • 查看 DOM 或样式:Control+Shift+C
  • 进入 Console 查看 log 运行 JavaScript:Control+Shift+J

实用功能

  • 调试DOM
  • 调试CSS
  • 调试JavaScript
  • 网络Network
  • 客户端存储

Elements调式DOM

查看与选择DOM节点

需求:查看 百度 首页的Logo、搜索框

操作:

  • 右键 --> 检查
  • 激活 页面选择元素 箭头,点击要查看的 Logo、搜索框

Logo:

image.png

搜索框:

image.png

实时编辑HTML和DOM节点

编辑内容

需求:修改 HTML 内容

操作:

  • 激活 页面选择元素 箭头,点击要修改的文本,找到 Elements 位置
  • 双击修改

image.png

image.png

编辑属性Attributes

需求:编辑搜索框Attribute,添加 placeholder 信息

操作:

  • 激活 页面选择元素 箭头,点击要修改的搜索框,找到 Elements 位置
  • 在 <input> 标签右键,选择 Add Attribute
  • 编辑 placeholder 内容

image.png

image.png

修改元素类型

需求:在搜索框上添加一段标题

操作:

  • 在 Elements 上,需要添加 HTML 的位置,右键选择 Edit as HTML,还可以右键 --> Copy --> copy element,甚至可以拖拽 element (隐藏/删除/增加/拷贝节点)
  • 添加 HTML 内容,像编辑器一样编辑 HTML 代码

image.png

image.png

在Console中访问节点

使用document.querySelectorAll访问

在 Elements 面板,按 ESC 召唤 Console 面板

image.png

使用$0快速访问选中的元素

image.png

image.png

拷贝->JSPath

在 Elements 面板,需要操作的元素,右键 --> Copy -->Copy JS path

在 Console 面板,粘贴

image.png

给DOM进行断点调试

属性修改时打断点

需求:修改搜索框 placeholder

操作:右键 --> break on --> attribute modifications

image.png

点击 Paused in debugger 进入下一步,placeholder 改变

image.png

节点删除、属性修改时打断点

需求:删除 wapper

操作:右键 --> break on --> node removal

image.png

image.png

子树修改时打断点

需求:删除 s_kw_wrap 的子树

操作:右键 --> break on --> subtree modifications

image.png

当执行过断点位置,生效

image.png

调试样式及CSS

查看与选择CSS

操作:

  • Elements 面板选择需要查看的元素
  • 找到 Styte,就是该元素的 CSS 样式

说明:越往上,CSS 优先级越高,下面被划掉的是背优先级高的覆盖或使之不生效

image.png

修改优先级最高的 element.style 添加 font-size

image.png

在元素中增加类与伪类

操作:

  • Elements 面板选择需要查看的元素
  • 找到 Styte,就是该元素的 CSS 样式
  • Style 有 .hov(显示或隐藏元素状态)、.cls(增加类)
.hov

取消勾选 ":hover":image.png

勾选 ":hover":

image.png

.cls

在 input 框输入类名,回车即可

image.png
image.png

添加rule

需求:给 my-class 添加 rule

image.png

Console调试JavaScript

打印信息:

  • console.log:输出信息
  • console.warn:输出警告
  • console.error:输出错误
  • xonsole.table:打印Json

断点调试:debugger

也可以在 Source 面板进行断点调试

image.png

Source 面板

查看静态资源

image.png

调试网络Network

查看网页资源请求概览,查看资源分布

image.png

调试时,最好把 Disable Cache 勾上,不要让缓存数据影响调试

image.png

针对单一请求查看Request/Response或时间消耗等

  • Headers:请求、响应头信息
  • Preview:预览 Response 结果
  • Response:
  • Initiator:
  • Timing:
  • Cookies:

image.png

底部可以查看站点加载统计数据:

  • 101/104requests:请求数
  • 217kB/217 kB transferred:流量花费
  • 3.3 MB/3.4 MB resources:加载资源
  • Finish: 8.8 min:加载时间
  • DOMContentLoaded:1.38s:DOM Load时间
  • Load:3.07s:Load时间

Waterfall分析页面载入性能

分析网页性能优化,使用工具代理页面请求数据等

需求:查看 img 加载情况

image.png

Application面板

查看和调试Cookie

Application --> Storage --> Cookie

image.png

查看和调试Local Storage和Session Storage

Local Storage:永久存储在这站点的本地存储

image.png

Session Storage:一次会话,退出关闭浏览器被清除

image.png


标题:Chrome DevTools使用
作者:Hefery
地址:http://hefery.icu/articles/2022/10/24/1666543376340.html