Hellom's Studio.

Chrome DevTools 调试技巧

chrome
字数统计: 2k阅读时长: 7 min
2020/01/07 Share

Chrome DevTools 九大功能面板分布：

Elements 元素面板

用途：检查和调整页面，调试 dom 元素及 调试 CSS 样式

快捷键：

  • Mac: Command + Option + C

  • Win: Ctrl + shift + C

功能介绍：

1） 实时编辑 HTML 和 DOM：

选中当前 dom 节点，鼠标右击后可实时编辑 HTML 和 DOM

  • Add attribute : 添加一个标签属性

  • Edit as HTML : 以 HTML 形式修改当前 dom 节点

2） 查看和编辑 CSS：

这个功能应该是前端程序员必备的技能 具体不详细介绍

3） 在元素中动态增加类与伪类：

此功能与2）功能类型差不多

l2cO3j.png

在右侧面板中找到 Styles 选项卡 如上图所示

下方有一条功能栏

  • 搜索框： 可搜索所需要的样式名

  • ：hov： 可在浏览器中增加伪类 更直观的调试

  • .cls：在元素中添加这个类

  • +： 在 Styles 面板中增加一个类

添加的类样式 浏览器会将其暂存下来

在 inspector-stylesheet 这个文件中

可手动复制到自己的项目中

可以更加直观的调试 css 代码

如下图所示：

lWQlex.png

4） 快速调试CSS数值及颜色图形动画等：

  • 调试 css 颜色数值

在面板中 例如：color：#fff; 里有一个小色块

点开来会有一个调色板 可以拖动滚球 并且调整色值

如下图所示：

lWcFn1.png
  • 快速调试 css 文字阴影及盒阴影

鼠标移至当前所要改的类样式上 右下角会出现 三个点的按钮

会出现四个图标 分别是：

Add text-shadow ：添加文字阴影

Add box-shadow ：添加盒阴影

Add color：添加文字颜色

Add background-color：添加背景颜色

每个点击后都会 弹出一个调整框

可随意的调整所要的样式效果

相比传统的在 项目中改好 一遍一遍编译的

提高了工作的效率 更加明了直观

是不是很棒棒呢~ (^▽^)

赶紧动手做起来吧~

lW6zhF.png
  • 调试图形动画效果

这个功能我觉得非常炫酷~

并且可以利用最少的时间

调试完一些简单的动画效果

首先 在 Elements 面板中

同一行中 找到最右边的 三个点 图标

点击后 More Tools => Animations

在底部就会弹出一个 Animations 的面板

如下图所示：

lWKq5F.png

举个栗子：

给 .quote 加上 hover 属性

并且设置一个过渡的效果

然后呢 回到网页上 看下鼠标滑到该元素上

是否 3s 从字体 14px 过渡到 20px 效果

如果有的话 那就点击 Animations 的面板中

录制按钮 长的类似于 暂停 播放的按钮

然后 在回到网页 看下此过渡效果

这时候 Animations 面板中

会有一格一格的线

鼠标滑上去 就会神奇的发现被录制下来

点击当前的块 还会出现一个时间轴

可拖动滑块调整 一些动画效果的参数

以达到所要的效果

是不是很炫酷

比起之前一直在css文件中调试

节省了很多时间 还一时之间

找不到问题的所在

所以你get了嘛 (＾＿－)

如图所示：

lWcVAK.png 
1
2
3
4
5
6
7
8
9
10
11
.quote[_ngcontent-fpo-c3] {
    padding: 47px 0 30px 0;
    border-top: 1px solid #DDDDDD;
    color: #b2863c;
    font-weight: bold;
}

.quote:hover {
    font-size: 20px;
    transition: all 3s ease;
}

Network 网络面板

用途：了解静态资源分布，调试请求数据，网页性能检测

功能介绍：

1） 使用 Network Waterfall 分析页面载入性能：

  • 可以分析页面载入性能

  • 可以查看单个请求 排查问题所在

Console 控制台面板

用途：查看 console log 日志，调试 JavaScrip 代码，交互式代码调试

快捷键：

  • Mac: Command + Option + J

  • Win: Ctrl + shift + J

功能介绍：

1） 三种在 Console 中访问节点的方法：

  • document.querySelectorAll('div')：浏览器自带的查找方法 查看所需的 HTML 标签 回车即可得到 节点树
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 输入内容
document.querySelectorAll('div');

// 输出结果
NodeList(8) [div.container, div.login-content, div.login-logo, div.login-block, div.qrcode, div.title, div.qr, div.copyright]
0: div.container
1: div.login-content
2: div.login-logo
3: div.login-block
4: div.qrcode
5: div.title
6: div.qr
7: div.copyright
length: 8
  • $0：先在 Elements 面板中 选中所选元素后 再回到 Console 面板中 输入 $0 回车即可得到 所选元素的 dom 结构
1
2
3
4
5
// 输入内容
$0

//输出结果
document.querySelector("body > app-root > app-login > div > div.login-content > div.login-logo > img")
  • Copy Js Path: 操作前面如同 $0 只不过在选中元素后 右击选择 Copy => Copy Js Path 然后在 Console 面板中 粘贴回车即可
1
2
3
4
5
// 通过 Copy Js Path 方式 复制的内容
document.querySelector("body > app-root > app-login > div > div.login-content > div.login-logo > img")

//输出结果
<img _ngcontent-gtc-c1 alt src="whatImg.png"/>

2） 在 Console 中调试 Log 日志：

一些常用的就不详细展开讲了

下面讲些不一样的内容

  • 那如何在 console 面板中输入多行代码呢？

以前写的时候都是写一行 看起来很是费劲

这次介绍使用 shift + enter 想换行的时候就用它吧 是不是很方便呢~

  • 如何使用 console.log()打印出变量呢？

可使用 %s 来作为占位符

具体代码：

1
2
let temp = 'test';
console.log('%s 这个变量', temp); // 输出 test 这个变量

console.log 的用法

3） 三种断点调试的方法：

  • 在代码中 需要调试的函数前面 添加 debugger;
1
2
3
4
5
public getQRcode = () => {
    console.log(1);
    debugger;
    console.log(window);
}

  • 在 Sources 面板的右侧 找到 Event Listener Breakpoints 会显示所有监听的类型选项

  • 在 Sources 面板中 点击源代码对应的行数 看到蓝色高亮 再刷新当前页面即可进行断点调试

vscode 插件

  • live server：可直接在浏览器中 打开HTML文件

安装以后 vscode 底部 会有 Go Live的按钮

打开所需的 HTML文件 点击这个按钮 即可

Sources 源代码资源面板

用途：断点调试 JavaScript 代码，有利于查找 bug

功能介绍：

1） 使用 DevTools 作为代码编辑器：

在 Sources 面板中 下边有一条工具栏：

按照顺序是：Page、Filesystem 、Overrides等

这次 介绍的是 Filesystem 可授权添加本地文件夹

点击下一条工具栏中 Add folder to workspace即可

然后选择本地的文件 可在右侧的界面中 实时的编辑代码

保存后 本地的文件也相应会有

可以实现 所写及所见

如图所示：

lhxtG8.png

Application 应用面板

用途：可查看和调试客户端存储，列如：Local Storage 、Session Storage 、Cookies 等

功能介绍：

1） 增删改查之 Cookies：

  • 可在 Application 应用面板 左侧查看 Cookies 并操作

  • 可在 Console 面板中 输入 document.cookie='test=2' 新增一个Cookie

2） 增删改查之 Local Storage：

增删改查的操作同 Cookie

不同之处在于

在 Console 中使用 API 新增一个 Local Storage

代码如下：

1
localStorage.setItem('test','2');

如何调试移动端、H5页面

在 Chrome DevTools 面板中 左上角 有一个类似 Ipad 图标

这个就是用调试移动端用的

常用的一些 相信大家都是熟悉了的

这次要介绍的是 如何调试传感器系列的

在面板中 按下 ctrl + p 呼出一个搜索框

搜索框中 输入 > show sensors 回车后 底部会呼出一个面板

如图所示：

l7I7ss.png

面板中有三大块内容

可以调试 地理位置信息、设备的旋转和设备的触发事件等

具体的可在实际应用中尝试调试

Performance 性能面板（高阶）

用途：查看页面运行性能细节，细粒度对网页载入进行性能优化

Memory 内存面板（高阶）

用途：JavaScript CPU 分析器，内存堆分析器

Security 安全面板

用途：查看页面安全及证书问题

Audits 面板（高阶）

用途：使用 Google Lighthouse 辅助性能分析，给出优化建议

常用快捷键

1) 打开最近关闭的状态：

  • Mac: Command + Option + i

  • Win: Ctrl + shift + i

2) 快速打开：

  • Mac: Command + Option + i

  • Win: F12

CATALOG
  1. 1. Chrome DevTools 九大功能面板分布：
    1. 1.1. Elements 元素面板
      1. 1.1.1. 用途：检查和调整页面，调试 dom 元素及 调试 CSS 样式
      2. 1.1.2. 快捷键：
      3. 1.1.3. 功能介绍：
    2. 1.2. Network 网络面板
      1. 1.2.1. 用途：了解静态资源分布，调试请求数据，网页性能检测
      2. 1.2.2. 功能介绍：
    3. 1.3. Console 控制台面板
      1. 1.3.1. 用途：查看 console log 日志，调试 JavaScrip 代码，交互式代码调试
      2. 1.3.2. 快捷键：
      3. 1.3.3. 功能介绍：
      4. 1.3.4. vscode 插件
    4. 1.4. Sources 源代码资源面板
      1. 1.4.1. 用途：断点调试 JavaScript 代码，有利于查找 bug
      2. 1.4.2. 功能介绍：
    5. 1.5. Application 应用面板
      1. 1.5.1. 用途：可查看和调试客户端存储，列如：Local Storage 、Session Storage 、Cookies 等
      2. 1.5.2. 功能介绍：
      3. 1.5.3. 如何调试移动端、H5页面
    6. 1.6. Performance 性能面板（高阶）
      1. 1.6.1. 用途：查看页面运行性能细节，细粒度对网页载入进行性能优化
    7. 1.7. Memory 内存面板（高阶）
      1. 1.7.1. 用途：JavaScript CPU 分析器，内存堆分析器
    8. 1.8. Security 安全面板
      1. 1.8.1. 用途：查看页面安全及证书问题
    9. 1.9. Audits 面板（高阶）
      1. 1.9.1. 用途：使用 Google Lighthouse 辅助性能分析，给出优化建议
  2. 2. 常用快捷键
    1. 2.1. 1) 打开最近关闭的状态：
    2. 2.2. 2) 快速打开：
Total : 43
2020
2019
angular7 TypeScript ES6 css dart VsCode 面向对象 数据类型 flutter 布局 枚举 image_picker ionic3 极光推送 angular hexo blog ionic4 Express Node mongodb 企业微信 微信小程序 scroll-view scss chrome node 正则表达式 JavaScript vue pdf.js
angular7 TypeScript css TypeScript/ES6 dart flutter ionic3 angular ionic4 Express mongodb 企业微信 微信小程序 scss chrome node 正则表达式 JavaScript vue