这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

浏览器调试

Chrome DevTools

以如下代码为例进行调试

<!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>Document</title>
    <style>
        .box{
            border: 2px solid black;
            width: 50px;
            height: 50px;
        }
        .box:hover{
            box-shadow: 10px 5px 5px gray;
        }
        .small{
            width: 100px;
            height: 100px;
        }
        .big{
            width: 200px;
            height: 200px;
        }

        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        .radius{
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="box small red"></div>
    <div class="box big green"></div>
</body>
</html>

Elements面板

展示网页元素，页面会显示鼠标悬浮的相应的结点

styles: 显示元素的样式，内容、边框、内边距、外边距的大小等。

点击.cls来动态修改类选择器
调试伪类：强制元素处于某一种状态
- 方法一：在elements面板中选中该元素->右键->Force state->选择想要的状态
- 方法二：在style面板中点击状态

computed: 输入样式名，搜索指定的样式
CSS中有声明的样式鼠标悬浮在其上时会有个小箭头，点击该箭头会跳转到styles面板中对应的CSS规则

Console面板

左侧可以选择等级，对日志进行分类查看

console.log
打印日志信息

注意控制台输出字符串的颜色和数字的不同，白色是字符串，紫色的是数字
console.warn 打印警告信息
console.error 打印错误信息
console.debug 打印调试信息
console.info
consile.table 具像化地展示JSON和数组数据，看起来更清晰
console.dir 通过类似文件树的方式展示对象的属性
console.time
你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。
占位符给日志添加样式，可以突出重要的信息 %s：字符串占位符；%o: 对象占位符；%c: 样式占位符；%d: 数字占位符

Source面板

浏览器中打断点的方式

在源代码中添加debugger
点击源代码的行号
鼠标移入相应的变量，就会显示当前值
Source右侧面板中的Watch可显示当前断点的值
- Scope: 展开Scope可以查看作用域列表（包含闭包）
- Call Stack可以查看当前JavaScript代码的调用栈问题1：如果通过检查中的Source面板就能看到当前页面的源代码，这样是否安全？如何解决该问题？
  答：网站上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a’、‘b’替换，整体变得不可阅读。
  问题2：压缩后的代码如何调试？
  
  思考题答案：上线前删除Source Map文件，将其上传到另一个平台

Network面板

显示整个站点在加载过程中请求的所有资源
上图表示可以模拟不同的网络来分析该站点的弱网适配情况

Web 调试技术 | 青训营笔记

浏览器调试

Chrome DevTools

Elements面板

Console面板

Source面板

Network面板