# console-helper

**Repository Path**: zcyr/console-helper

## Basic Information

- **Project Name**: console-helper
- **Description**: 一个关于浏览器开发者工具的学习项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-02
- **Last Updated**: 2022-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# F12开发者工具指南

浏览器的开发者工具可以说是前端开发人员的二把手，是提升前端开发效率的重要工具，下面以Edge浏览器为例，介绍开发者工具常用功能与使用，我们可以在浏览器中按F12打开工具，内容基本摘自文档 [开发工具概述 - Microsoft Edge Development | Microsoft Learn](https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/overview) 

- [F12开发者工具指南](#f12开发者工具指南)
  - [常用功能](#常用功能)
      - [取色工具](#取色工具)
      - [flex编辑工具](#flex编辑工具)
      - [修改工具停靠方向](#修改工具停靠方向)
      - [过滤请求](#过滤请求)
  - [高效开发](#高效开发)
      - [CSS: 快速隐藏|删除元素](#css之快速隐藏删除元素)
      - [CSS: 强制触发hover等伪类](#css之强制触发hover等伪类)
      - [CSS: 查看元素实际有效的CSS属性](#css之仅查看实际应用于元素的样式属性)
      - [CSS: 内外边距与宽高快速调整](#css之内外边距与宽高快速调整)
        - [方法一](#方法一)
        - [方法二](#方法二)
      - [在控制台中实时试用 JavaScript](#在控制台中实时试用-javascript)
      - [快速查找元素所绑定的事件函数](#快速查找元素所绑定的事件函数)
      - [源代码调试](#源代码调试)
  - [其他用法](#其他用法)
      - [利用开发者工具制作网页Data爬取脚本](#利用开发者工具制作网页data爬取脚本)
      - [XX博客不给复制？](#xx博客不给复制)

## 常用功能

#### 取色工具

通过点击颜色小方块，打开取色工具，该工具可以对页面任意位置进行取色。

![带批注的颜色选取器。](https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/media/css-elements-styles-rule-color-picker-annotated.msft.png)以下列表描述了 **颜色选取器**的每个 UI 元素。

| 标注 | 组件             | 描述                                                         |
| :--- | :--------------- | :----------------------------------------------------------- |
| 1    | **色调**         |                                                              |
| 2    | **取色器**       | [用“取色器“在页面上打样着色](https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/css/reference#sample-a-color-off-the-page-with-the-eyedropper) |
| 3    | **复制到剪贴板** | 将 **“显示值”** 复制到剪贴板。                               |
| 4    | **显示值**       | 颜色的 RGBA、HSLA 或十六进制表示形式。                       |
| 5    | **调色板**       | 单击方形可更改颜色。                                         |
| 6    | **色调**         |                                                              |
| 7    | **不透明度**     |                                                              |
| 8    | **显示值切换器** | 在当前颜色的 RGBA、HSLA 和十六进制表示形式之间切换。         |
| 9    | **调色板切换器** | 在 [“材质设计调色板”](https://material.io/guidelines/style/color.html#color-color-palette)、“自定义调色板”或“页面颜色调色板”之间切换。 DevTools 根据在样式表中所找到的颜色来生成页面调色板。 |

------



#### flex编辑工具

![image-20221002224341921](https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002224341921.png)通过flex编辑工具可以快速调整flex元素以达到想要的效果

------



#### 修改工具停靠方向

![image-20221002230848166](https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002230848166.png)通过点击左上角**三个点**可以修改工具的停靠方向，在对不同内容的页面很有帮助

------

#### 过滤请求

网页的请求太多？ 只像看到后端接口请求？可以通过点击Fetch/XHR进行过滤，也可以在左上角的筛选器中输入接口路径来筛选请求

![image-20221002231251763](https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002231251763.png)

------



## 高效开发

#### CSS之快速隐藏|删除元素

可以不通过修改样式或触发某代码条件的方式来隐藏与删除元素，我们只需右击已选择的元素，可以看见支持的操作

![image-20221002223340056](https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002223340056.png)

#### CSS之强制触发hover等伪类

选择要触发的元素，打开样式面板点击:hov可以选择强制元素伪类状态

![image-20221002213411694](https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002213411694.png)

![image-20221002213427352](https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002213427352.png)可以看到出现了鼠标按下的效果

------



#### CSS之查看元素实际有效的CSS属性

元素被太多css选择中，找不到实际起作用的是那些样式？我们可以通过已计算选项卡，帮助我们快速查找，通常在模块化开发时，子组件被父或爷或更上层的组件的CSS影响时，会较难定位，通过此方法可以快速定位到。

<img src="https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002213633973.png" alt="image-20221002213633973" style="zoom: 80%;" />.



<img src="https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002213722171.png" alt="image-20221002213722171" style="zoom: 80%;" />.

------



#### CSS之内外边距与宽高快速调整

通过开发者工具可以快速调整调整**内外边距与宽高**，避免样式修改后需要重新编译的问题。

##### 方法一

![image-20221002214228793](https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002214228793.png)可以点击直接修改样式表。

##### 方法二

![image-20221002214351729](https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002214351729.png)通过点击盒子中的数值修改，可以看见从里到外支持修改宽高，内边距，边框，外边距

*PS.在编辑模式时两种方法都可以使用以下键盘快捷方式将值递增到特定数量：

| 键盘快捷方式                                                 | 递增方式                                |
| :----------------------------------------------------------- | :-------------------------------------- |
| `Alt`+`Up` (Windows、Linux) 或 `Option`+`Up` (macOS)         | 0.1                                     |
| `Up`                                                         | 1 (或 0.1，如果当前值介于 -1 和 1 之间) |
| `Shift`+`Up`                                                 | 10                                      |
| `Shift`+`Page Up` (Windows、Linux) 或 `Shift`++`Command``Up` (macOS) | 100                                     |

------



#### 在控制台中实时试用 JavaScript

**控制台**不仅仅是记录信息的位置，在**控制台**中编写任何 JavaScript 时，代码将立即运行。 你可能会发现测试一些新的 JavaScript 功能或执行一些快速计算非常有用。 *PS. 控制台运行的JS是可以实时操作DOM元素的。*

------

可以看见在键入**Enter**后实时运行了我们的js并将返回值输出到**控制台**

![image-20220930093659379](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930093659379.png)

------

也可以输入函数

> 注意: 由于Enter默认用来执行代码， 需要换行请使用Shift + Enter

![image-20220930093634845](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930093634845.png)

*补充： 在控制台中使用↑和↓键可以快速键入历史执行代码*

------



#### 快速查找元素所绑定的事件函数

我们以点击事件为例子，通常我们某个**按钮**点击失败时，我们需要找到该按钮触发的函数并进行调试。常见的做法是在IDE搜寻该**按钮**并通过console.log的方式找到源代码来进行调试。

下面利用开发者工具的事件侦听器找到元素绑定的事件函数。

![image-20220930111401300](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930111401300.png)

如上图可以看见，信息按钮的click事件绑定了两个函数，通过点击链接进入源代码。

*PS. 此功能适用于较为简单的页面，被打包后的页面通常较难调试。*

------



#### 源代码调试

当我们想查看代码实时运行情况以找到错误原因时，我们可以通过`console.log`定位到源代码并进行调试。

我们有如下vue组件，通过点击按钮执行`btnClick()`可以看见输出的结果为1并不是我们想要的。

```vue
<script setup>
function getMeThree() {
  console.log('getMeThree called')
  let ans = 1
  alert(ans)
}
function btnClick() {
  const arg1 = 100
  const arg2 = 200
  getMeThree()
}
</script>

<template>
  <button @click="btnClick">我要输出3</button>
</template>
```

定位到源代码，通过点击代码行左侧红点可以下**断点**。

![image-20220930114228239](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930114228239.png)

点击按钮时，可以发现我们的页面暂停了。

![image-20220930114301431](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930114301431.png)

我们可以通过点击**单步跳过**来一句一句的执行代码。

![image-20220930114919056](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930114919056.png)

执行完`let ans = 1`时，可以发现**作用域**一栏里的ans被赋值了，可以发现作用域展现的就是函数作用域，我们的调试器可以显示出该函数内声明的所有变量如ans。

![image-20220930115028332](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930115028332.png)

并且可以通过调试器修改此时的ans值

![image-20220930115345466](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930115345466.png)

点击恢复脚本运行时，可以看见成功输出了3

![image-20220930115417898](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930115417898.png)

**综上所述，利用调试器可以一步一步执行代码并查看执行的结果动态修改变量(内存)以排查错误。**

> **断点**: 是一个信号，可以标记代码的某部分，在调试模式时，代码运行到被断下的代码就会发出中断信号通知调试器暂停此代码的运行，暂停后可以由调试器控制代码如何运行。

> **调用堆栈**: 也称为调用栈，函数调用栈，顾名思义是一个栈结构，有着先进后出的特性，利用此特性赋予了函数可以返回到上一个函数的能力，举个例子：
>
> ```javascript
> function A(){ B(); ... return; }
> function B(){ C(); ... return; }
> 每次准备调用的函数都放入栈中再调用栈顶函数，当调用A()时, A调用B调用C时
> 此时的栈结构如下，栈顶是当前正在执行的函数:
> |C| 栈顶
> |B|
> |A| 栈底部
> ------------
> 当C执行完成后要返回到上一个函数B并继续执行未执行完的代码，我们只要弹出C即可，栈顶就变为B，就能继续执行B的代码。
> | |
> |B|栈顶
> |A|栈底部
> ------------
> PS. 以上只是粗略的说明调用栈，实际还要复杂些
> ```



## 其他用法

#### 利用开发者工具制作网页Data爬取脚本

我们以[豆瓣电影 Top 250 (douban.com)](https://movie.douban.com/top250)为例，制作获取该页的所有电影图片地址的脚本函数。

------

通过元素定位工具，我们定位图片所在的HTML代码

![image-20220930101634927](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930101634927.png)

------

我们成功的找到了该电影页的`<ol></ol>`列表标签元素，并可以通过右击元素菜单复制该列表元素的selector代码以在JS中获取该元素。

![image-20220930095345688](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930095345688.png)

------

我们复制出来的代码如下: 

```javascript
document.querySelector("#content > div > div.article > ol")
// PS. 也可以通过分析列表标签通过class或者id进行元素选择如: document.querySelector("#grid_view")
```

分析图片地址相对于列表元素的元素路径

![image-20220930100010601](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930100010601.png)

分析结果如下

```javascript
document.querySelector("#content > div > div.article > ol") // 此元素为 <ol class="grid_view">
    .children[0] 		// 此元素为 <li>
    .children[0] 		// 此元素为 <div class="item">
    .children[0] 		// 此元素为 <div class="pic">
    .children[1] 		// 此元素为 <a href="...">
	.children[0].src 	// 此元素为 <img ...> 和 src属性
```

在**控制台**运行后成功输出了电影列表第一个电影的图片

![image-20220930100751063](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930100751063.png)

下面编写脚本函数

```javascript
function getAllImage() {
    const list = document.querySelector("#content > div > div.article > ol").children
    for (let i=0; i<list.length; i++) {
        console.log(list[i].children[0].children[0].children[1].children[0].src)
    }
}
```

运行脚本后我们成功获取了当前电影页的所有电影图片，可喜可贺。

![image-20220930101242722](https://gitee.com/zcyr/console-helper/raw/master/images/image-20220930101242722.png)

------



#### XX博客不给复制？

很简单给body添加一个css样式即可

```css
user-select: text !important;
```

![image-20221002224131302](https://gitee.com/zcyr/console-helper/raw/master/images/image-20221002224131302.png)如图所示