Chrome Development Tools

最新推荐文章于 2022-06-10 09:15:22 发布

如果有了可惜

最新推荐文章于 2022-06-10 09:15:22 发布

阅读量192

点赞数

分类专栏： Chrome

本文链接：https://blog.csdn.net/jufjzq/article/details/105718432

版权

Chrome 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

https://study.163.com/course/courseLearn.htm?courseId=1005267066#/learn/video?lessonId=1053438020&courseId=1005267066

基本使用

切换调试工具试图
调试窗口可以为左/右/下/新窗口，在 Development Tools 右上角的三个点可以切换
左上角的箭头可以在 Elements 功能区快速定位到页面上选定元素的 DOM 树
切换 PC/H5 端调试
左上角第二个为切换 PC/移动窗口工具，切换至移动端调试后，可以在左上方的菜单内自定义视图宽高，满足一些项目特殊宽高的需求
左上方菜单最后一个可以编辑存储你需要的机型尺寸等
保持元素的 :hover (锚伪类)
在开发中比如 a 标签我们常常给一个 :hover 的样式，但是当鼠标移开的时候就会没有，此时只需要在 DOM 树中定位元素后右键 Force state 中选择需要的伪类选择器
元素状态改变的监控
有时一些元素发生变化，我们想查看对应的 js 代码，此时可以在对应的 DOM 树右键 Break on 选项
subtree modifications 为当元素改变时的断点。当我们想停止的时候可以在 DOM 右键取消对应的选中状态，也可以在右侧样式表同级找到 DOM Breakpoints 内点击选框取消，或者右键取消全部
attr modifications 为元素属性改变的断点
node removal

样式调试

快速调试样式
选择 Elements 后右侧有 Styles 样式栏可以直接操作 DOM 的样式，我们可以对单挑 CSS 细粒度的调试。可以通过上下方向键微调，shift + 方向 10级调整，Alt + 方向小数点调整.
查看元素盒模型
Elements - Styles 最下方有盒模型图，我们可以通过鼠标滑过快速定位到元素相应的盒模型样式。
当然此处可以直接修改，双击数字或者 - 缺省，我们可以快速的修改盒模型样式（宽高/pading/margin/border），非常的方便
查看样式最终效果
Elements - Computed 计算后的最终所有样式都在这里可以看到，可以通过 Filter 搜索你想要看的具体 CSS 结果，也可以勾选 Show All 选项查看所有包括继承当前浏览器或属性默认值的样式详细（灰色）
鼠标放在每条 Computed 项出现园滴的向右箭头，点击可以跳转到 Styles 对应的 CSS 样式

事件与资源

元素事件监听
元素上常常绑定事件，比如 hover 时出现的 sub menu。此时我们可以在 Elements - Event Listeners 看到当前元素上的所有事件监听，点击右侧可以定位到对应的 JS Sources 中查看代码
Console 工具栏
console 用于输出/输入 JS 代码，并且有代码提示。这里介绍一个可以复制输出的功能。当我们想把 JS 转 JSON 的时候，只需要在 js 中 console.log 出 JSON.stringify() 的返回值，然后右键 save as global，此时控太会输出一个变量 temp1，然后我们在控制台输入 copy(temp1) 就可以自动复制到粘贴板上了
左上角的禁止图标是 clear 当前控制台，下一个 top 是选择加载的插件，筛选插件的输出，Filter 可以正则筛选特定 url 的输出
再往后是设置输出级别，可以是 info 或者警告和错误
再往右的选框不知道
最右边可以设置一些东西，具体不知道
查看被压缩/混淆的代码
在 Sources 中一般会是压缩混淆后的一行代码，我们可以点击 {} Pertty print / Format 可以快速格式化 js/css 代码
查看整站资源
Sources 可以查看整站资源，可以对 css / js 直接编辑，也可以对图片等资源右键保存
调试堆栈
Sources 右侧 Call Stack 可以看到断点处如何一步步执行的代码，顺序一般是从下向上，右键代码框可以快速添加到 Watch 观察

本地文件联动与网络调试

编辑代码并同步到本地文件
当我们本地打开在 Chrome 调试的时候，比如调试 CSS，当我们调试好后还需要手动修改本地文件非常麻烦
Sources 左侧 Filesystem 可以 Add folder to workspace 讲我们的文件夹整个添加进来
，
网络同步
当页面在服务器上发布时，Filesystem 也可以通过 Add 文件然后选择对应的本地文件 map 同步到本地文件中
监控网络请求
Network 为网络抓包工具，打开后刷新页面可以看到整个页面加载请求的数据流，可以看到请求的资源类型，地址，加载事件等
第一个按钮为开始/停止监控
2 清空
3 Capture screenshots 可以截图看到每一个请求的事件段页面的截屏
4 Filter 正则筛选
5 View 第一个为切换第二个隐藏加载时间轴
6 分组
7 保留刷新前上次的请求，关闭后刷新会清空上次请求
8 Disable cache 请求不使用 cache
9 限制网络状况
监控页面重绘
Element - 三个点 - More tools - Rendering
Paint flashing 重绘处高亮
Layer borders
FPS meter
做动画/页面性能时候可以做重要的参考指标
监控无用代码片段
有时候我们引用三方的 CSS/JS 并不一定都用的到，在优化性能时这个工具就很有用
More tools - Coverage
点击第一个按钮会出当前页面加载代码的未使用率 Unused Bytes 点击后在代码区表用是未用到的代码块，绿色的为使用到的代码
但是此覆盖率只是当前页面对所引用代码的覆盖率，可能当前页面没用到，但其他页面用到了
监控页面动画
More tools - Animations 刷新后会加载动画流，当做复杂的动画调试时这个工具会很有用

设备调试

网络条件与 User Agent
More tools - Network conditions
User Agent 可以模拟不同设备，前端/后端是根据 User Agent 识别设备，可以通过这里欺骗页面设备
快速编辑查看资源
在 Sources 中可以查看所有的资源，但如果一个个找过去人都没了，所以我们可以看到在 Sources - Network 有两个快捷键提示，可以快速通过路径/关键字搜索资源
调试 Android 设备
Chrome 自带这个工具，但是使用的不多
三个点 - More tools - Remote devices
他可以 Discover USB ，当你手机插入后可以做双向通讯或者截屏等，手机端的网络请求也可以在 PC 上看到，但是一般 Android 有 Android stt 工具，一般用不着。这里一般用于页面布局
阻止请求某些资源
比如站点有很多广告，我们可以把一些不想要的资源阻住掉
三个点 More Tools - Request blocking 可以启用/关闭自定义的规则
+可以定义规则支持正则 EG：*assets*，然后刷新页面后就会看到被阻止后的页面加载情况，同时在 Network 上有 warn 标志，里边被阻止的资源红色显示 Status 为 blocked:
全局搜索资源
More tools - Search 快捷键 MAC cmd opt F
不支持 html 内容搜索，可以 css / js
模拟传感器
More tools - Sensores
Geolocation - Custom location 可以自己模拟定位
Oriemtation 陀螺仪
可以在浏览器右上角可以清空

性能监控

性能分析一
Performance
有时候页面卡，我们想知道原因，此时我们可以通过性能分析去做一些东西。性能测试最好在无痕模式下操作，可以排除其他插件/缓存等因素对性能的影响
可以设置 CPU 降低计算力
红点点击可以记录性能，点击 stop 后可以看飙红区是 FPS 有问题的快照
性能分析二
点击刷新页面可以记录 Network ，也可以点击记录后手动刷新页面
W键可以细腻 S 可以放大 AD 当前选框左右平移
Performance - Call Tree 可以查看所有加载具体情况/耗时/占比，可以一层层点开，可以跳转到源码直接查看对应的源码哪里性能有些问题。跳转到代码后可以显示每行代码执行的时间，非常的牛P
性能分析三
插件/技巧