前言

「前端Debug的特点」

前端 Debug 具有多平台、多环境、多工具、多技巧的特点：

前端必须知道的开发调试知识之Chrome DevToos — 前端Debug的特点

前端开发的平台不只是浏览器，还包括 Hybird、NodeJs、小程序、桌面应用等平台；

前端开发环境有本地开发环境和线上环境；

前端调试工具也多种多样：如 Chrome devTools、vConsole 等；

前端的 Debug 技巧也有许多：如使用 console 语句，输出错误信息，结果等来 Debug；或者利用 BreakPoint 断点来调试代码。

❝

由以上可知：前端 Debug 不知那么简单，我们需要掌握更多的 Debug工具及技巧，帮助我们改善代码。

❞

Chrome DevTools PC端调试工具

下面我们来介绍 Chrome DevTools 工具：

首先我们打开 Chrome DevTools 工具：启动 Chrome 浏览器 -> 右键点击弹出菜单的「检查」选项：

这就是我们 Chrome DevTools 工具了，你可能看到的界面的语言为英语：我们可以通过点击右上角的设置图标，选择偏好设置，找到 languglge 选项更改为中文，重启浏览器即可。

下面我们来依次介绍导航栏选项所对应的功能，即元素（Elements）、控制台、源代码、网络、Performance insights、性能、内存、应用、安全、Lighthouse、图层、CSS概览。

元素（Elements）栏

❝

元素（Elements）：

元素（Elements）栏，代表一个网页里边的元素和样式

可以动态修改元素和样式

❞

通过以下示例了解其作用：首先准备一个HTML 文件，通过浏览器打开，右击进入检查，选择元素栏。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
        }
        .small{
            width: 100px;
            height: 100px;
        }
        .big{
            width: 200px;
            height: 200px;
        }
        .green{
            background-color: green;
        }
        .red{
            background-color: red;
        }
        .radius{
            border-radius: 10px;
        }
    </style>
</head>

<body>
   <div>
    <div class="box small red"></div>
    <div class="box big green"></div>
   </div>
</body>

</html>

「操作」

我们可以选中对应的元素，查看其样式和盒子模型

点击元素可以修改元素的属性（class style 等）甚至替换元素：

或者通过右侧样式栏的 .cls，为选中的元素，添加新类，或者移除已有类

选中对应的元素，通过右侧的样式栏，可以勾选/取消类名来动态的查看类名生效效果：
选中对应的元素，通过右侧的样式栏，点击元素的具体样式值（字号、颜色、宽度、高度等)可以进行编辑，浏览器可实时预览：

如点击背景颜色值，调出调色器，改变背景色

如点击宽度值，改变元素的宽度

选中元素后，点击右侧栏计算样式（Computed）下点击样式里的箭头可以调转到 styles 面板中的 css 规则。（当元素样式较多时，可以点击搜索对应的css样式）

如何调试伪类：

当我们调试元素的 :hover 伪类时，由于鼠标离去和进入，伪类样式就会取消和生效，使我们无法调试伪类的样式，那么我们可以通过以下方式，强制伪类生效，进行调试。

选中具有伪类的元素，右击点击菜单中的强制执行状态->选中对应的伪类即可：

或者通过右侧样式栏的 :hov ，来强制设置伪类生效：

控制台（Console）栏

❝

控制台（Console）：

控制台（Console）栏，可以用来代码中的日志，或执行js代码

❞

「日志级别」

输入以下代码，在控制台执行：

console.log('Hi'); //普通日志
console.warn('Hi'); //警告
console.error('Hi'); //错误
console.debug('Hi'); //debug
console.info('Hi'); //info

给日志添加样式，突出重要的信息：

console.log('%s %o,%c%s','hello',{name:'tom',age:18},'font-size:24px; color: red', 'Hi My Friend')

占位符解释：

%s：字符串占位符
%o：对象占位符
%c：样式占位符
%d：数字占位符

「不同类型的数据输出的颜色不同」

console.log(111);
console.log('324');

「其他的日志」

console.table(); // 可以以表格形式展示数据

示例：

const goods = [
    {name: 'apple', count: 300, price: 10.00},
    {name: 'orange', count: 500, price: 20.00}
];
console.log(goods);
console.table(goods);

这样可以很方便看见数据的结构

console.dir();  //以文件树的形式，显示对象

示例：如我们打印 document.body

console.log(document.body);
console.dir(document.body);

使用 console.log()方式，相当于拿到了整体的元素，使用console.dir()，使我们可以获取属性。

源代码（Sources））栏

❝

源代码（Sources）：

源代码（Sources））栏，可以用来展示项目的源代码，对代码进行断点调试

❞

「各栏介绍」

区域1：页面资源文件目录树：相当于我们的项目目录

区域2：代码的预览区域

区域3： Debug工具栏，从左到右依次为

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

区域4：断点调试器

「如何开始断点调试」

准备代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
        }
        .small{
            width: 100px;
            height: 100px;
        }
        .big{
            width: 200px;
            height: 200px;
        }
        .green{
            background-color: green;
        }
        .red{
            background-color: red;
        }
        .radius{
            border-radius: 10px;
        }
    </style>
</head>

<body>
   <div>
    <div class="box small red" ></div>
    <div class="box big green"></div>
   </div>
   <script>
    //立即执行函数
    (()=>{
        debugger
        console.log(1);
        console.log(2);
        console.log(4);
        console.log(5);
        console.log(6);
        console.log(7);
    })()
   </script>
</body>

</html>