前端开发调试知识｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第4天 ccccccc cccc

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

F12调试

(个人习惯用Edge

动态修改网页内容样式

官方文档: Microsoft Edge 开发人员文档 - Microsoft Edge Development | Microsoft Docs

console日志

颜色对应数据类型
table展示数组
元素文件书

断点调试; XHR, 调用栈添加控制台输出；debugger断点

一个demo：

<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>
</head>
<body>
    <input value="" class="num" id="numA" oninput="ChangerA()">
    +
    <input value="" class="num" id="numB" oninput="ChangerB()">
    =
    <span id="res"></span><br>
    <button id="run"> 计算 </button>

</body>
<script>
    let a=0
    let b=0
    
    function ChangerA(){
        a = document.getElementById('numA').vaule;
        console.log('a', a);
    }
    function ChangerB(){
        b = document.getElementById('numB').vaule;
        console.log('b', b);
    }

    document.getElementById('run').onclick=function(){
        console.log(a+b)
        debugger;

        document.getElementById('res').innerHTML = Number(a) + Number(b)
    }
</script>
</html>

闭包

js内嵌函数

function add() { var counter = 0; function plus() {counter += 1;} plus(); return counter; }

plus(); plus();

仅可在外部访问plus()

压缩后的代码

打包时sourceMap, 位于监控平台

网络

network 所有请求资源/网络环境/响应结果

Applicable存储方式

Performance

线程面板/统计

示例demo: Janky Animation (googlechrome.github.io)

不同网络环境下效果体现

模拟低性能下效果:卡顿? 优化源码性能

lighthouse: web性能分析

核心性能指标

LCD：内容绘制性能，应在首次加载后2.5s内发生
FID：首次输入延迟，交互性能，应为100ms或更短
CLS：积累分布偏移，视觉稳定性，应小于等于0.1

移动端调试

Vconsole

进行代理调试

Node.js调试

部署在服务端

常用开发调试技巧

在线上即时修改-overrides

本地空文件夹目录-授权

在page中修改代码，保存
devTools发布，查看修改历史

启用本地source map

小黄鸭调试大法

前端开发调试知识｜ 青训营笔记

前端开发调试知识｜青训营笔记