浏览器DevtoolsDevtools简介 Devtools的作用前端开发：开发预览、远程调试、性能调优、Bug跟踪

浏览器Devtools简介

Devtools的作用

前端开发： 开发预览、远程调试、性能调优、Bug跟踪、断点调试等；
后端开发： 网络抓包、开发调试Response；
测试： 服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试；
其他： 安装扩展插件，如Vue Devtools、React Developer Tools、AdBlock……

Devtools常用功能面板

不同浏览器的Devtools工具，功能基本一致，界面大同小异。在浏览器中，按F12可以快速打开Devtools，位置可自行设置，默认在浏览器下方。

Chrome中一般可看到如下8个面板：
Elements：页面DOM元素；
Console：控制台；
Sources：页面静态资源；
Network：网络；
Performance：设备加载性能分析；
Application：应用信息；
Memory：内存信息；
Security：安全分析。

高频面板简介

Elements（元素）： Elements元素面板可以查看及自由操作（选择、移动、编辑、显隐）网页的 DOM 和 CSS，并立即在浏览器里面得到反馈。
Console（控制台）： Console（控制台）面板可以显示代码中的日志信息，也可以独立运行JS代码。一般在开发期间，使用Console控制台面板记录诊断信息，调试前端代码。
Network（网络）： Network（网络）面板用于分析网页加载和检查网络资源。可查看网络请求的详情信息（请求地址、响应状态及数据、资源类型、大小、所用时间、Waterfall等）；可记录网页加载的网络活动（列出关键帧截屏及该帧被捕获时的网络请求等相关信息）；可对请求过滤或排序；可改变加载形为（如模拟离线及不同网速、清除浏览器缓存等）；可保存或导出请求数据等。
Application（应用）： Application（应用）面板可以检查、修改和调试网页的manifest、Service Worker、存储和缓存数据等。一般我用来调试及查看Local storage和Session storage。

Network请求资源列表详解

网络活动日志列表

'devtools请求资源列表'

每一行都代表一个资源。默认情况下，资源会按请求的时间顺序列出，每列代表资源的相关信息。默认列包括：

Name（名称）：资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
Status（状态）： HTTP响应状态码。
Type（类型）：资源类型。
Initiator（发起者）：导致请求资源的原因。点击“发起者”列中的链接可前往导致请求的源代码（跳到Sources面板中）。
Size（大小）：通过网络传输的资源量。
Time（时间）：请求所用时间。
Waterfall（瀑布流）：展示页面加载过程中各个资源请求的时间线和相关信息。

右键表头有更多功能，比如可设置需要显示的列。单击表头可以对列表进行排序。

具体资源的详情

'devtools请求资源详情'

点击某个资源请求的Name，可在右侧查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab：

Headers：HTTP请求头信息。
Preview：根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
Response：HTTP请求的响应信息。
Initiator：HTTP请求的调用堆栈信息及链式结构。
Cookies：HTTP请求的Request和Response过程中的Cookies信息。
Timing：整个HTTP请求生命周期过程中各部分花费的时间。

让日志变得更有趣更高效

前端开发中，Console控制台面板使用频率非常高，一般用来查看代码中的日志信息、报错信息等，这就需要用到console对象的一些方法。代码举例：

    console.log('普通日志信息');
    console.warn('这是警告');
    console.warn('这是警告');
    console.error('这是错误');

    // 自定义分类
    const tag = "[DEBUG]";
    console.log(`%c${tag}`, "color: green;", "自定义分类");

    // 巧用占位符
    const d = 2;
    const time = '10:00点';
    const name = '小明';
    console.log(`%c🎨这是有条趣的日志，🌍世界那么大，想去看看✈️。%d天后，%s，不见不散，${name}。`, 'color: tomato; font-size: 20px; line-height: 1.5; background-color: lightskyblue;', d, time);

    // 分组显示
    console.group('%c🏬地点', 'color: blue');
    console.log('具体地点信息')
    console.groupEnd();
    console.group('%c🚗工具', 'color: green');
    console.log('具体工具信息')
    console.groupEnd();
    console.group('%c🕛时间', 'color: tomato');
    console.log('具体时间信息')
    console.groupEnd();

    // 表格显示
    const arr = [
        { a: 1, b: 2, c: 3},
        { a: 11, b: 22, c: 33},
        { a: 111, b: 222, c: 333},
        { a: 1111, b: 2222, c: 3222}
    ];
    console.table(arr);

    // 条件输出，排除不必要的信息干扰
    const num = 1;
    const flag = num > 1;
    console.assert(flag, '我是有条件的,断言失败才显示');
    console.assert(!flag, '我是有条件的，断言失败才显示');

    // 计时
    function fn1() {
        for (let i = 0; i < 1000; i++) {
            for (let j = 0; j < 1000; j++) {
            }
        }
    };
    console.time('计时器fn1');
    fn1();
    console.timeEnd('计时器fn1');

    // 计数
    function fn2() {
        console.count('计数器1')
    };
    function fn3() {
        [1,2,3,4,5].forEach(() => fn2())
        console.countReset('计数器1');
    };
    fn3();

    // 函数调用轨迹
    function a1(a, b) {
        console.trace('a1 called')
        return a + b
    };
    function a2(a, b) {
        console.trace('a2 called')
        return a1(a, b)
    };
    function a3(a, b) {
        console.trace('a3 called')
        return a2(a, b)
    };
    a3(1, 2);