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

前言

前端Debug的特点

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

前端Debug的特点

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

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

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

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

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

Chrome DevTools PC端调试工具

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

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

Chrome DevTools 工具

这就是我们 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>