Chrome 开发者工具 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第10天。发现之前对 "Chrom

这是我参与「第四届青训营」笔记创作活动的的第10天

发现之前对 "Chrome 开发者工具" 的了解太少，只知道一些最常用的操作。现在根据老师课堂内容，详细整理这个工具的一些基础使用。

Chrome DevTools

Elements

作用：动态修改元素和样式

添加类样式：点击.cls，开启动态修改元素的class

输入字符串可以动态的给元素添加类名。只能添加 类选择器class
动态修改样式：勾选/取消类名可以动态的查看类名生效效果点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
强制激活伪类，进行调试的方法：
- 方法一：DOM树右键菜单，选择Force State
- 方法二：选中具有伪类的元素，点击:hov
  1. 点击 ":hov"
  2. 勾选伪类
  3. 添加修改样式
根据样式进行调试："Computed"下点击样式里的箭头，可以跳转到"Styles"面板中的css规则

页面效果截图：右键 "body"，选择 "Capture node screenshot"

Console

作用：展示日志

console.log
console.warn
console.error
console.debug
console.info

console.table

以表格方式，具像化的展示JSON和数组数据
console.dir 通过类似文件树的方式展示对象的属性
不同类型的值，显示的颜色不同

使用占位符给日志添加样式，可以突出重要的信息

%s：字符串占位符；

%o：对象占位符；

%c：样式占位符；

%d：数字占位符；

 console.log('%s %o,%c%s', 'hello', {name:'tome', age:18}, 'font-size: 24px; color:red', 'welcome to bytedance! ' );
 console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");

Sourses tab

作用：查看源代码

模块介绍

区域1：页面资源文件目录树

区域2：代码预览区域

区域3：Debug 工具栏

从左到右依次为

暂停（继续)
单步跳过
进入函数
跳出函数
单步执行
激活（关闭）所有断点
代码执行异常处自动

区域4:断点调试器

设置断点

方法一：在代码中使用关键字 "debugger"，暂停在输入 "debugger"的地方

方法二：在程序的某一行设置断点在代码预览区域的行号可以设置断点
设置断点后，需要刷新

Watch 查看变量值

鼠标停留到变量上，会自动显示在当前断点时的变量值
在右侧的 "Watch" 中，添加要观测的变量，动态显示在各个断点时的值
右侧 "Scope -- > Local" 中，会显示在当前断点时的变量值

Scope 与 Call Stack

展开Scope可以查看作用域列表(包含闭包)

闭包可以参考：developer.mozilla.org/zh-CN/docs/…
展开Call Stack 可以查看当前javaScript代码的调用栈

调用栈可以参考：developer.mozilla.org/zh-CN/docs/…

其他说明

XHR/fetch Breakpoints：所有请求的断点。发生网络请求，记录断点
DOM Breakpoints：快速找到修改了某一个DOM元素的Javascript代码

设置断点：

记录查看：
Global Listeners：显示全局监听器，在浏览器中 window 是全局对象，所以在 Global Listeners 面板中显示绑定在 window 对象上的事件监听
Event Listener Breakpoints：可以看到一组事件类型，展开一个事件类型可以看到具体的事件名称