前端开发调试 | 青训营

攻城狮的大师兄
28 阅读4分钟

这是参加第六届青训营第六次笔记，以下是课程纲要以及知识要点，以及一丢丢自己的理解。简单的记录一下，方便后面回头复盘。复盘再深入更新思考吧。至于我说的东西可能不对，但不喜勿喷。如果，愿意帮忙纠正，还是很欢迎的。

一、PC端调试

1. Bug的产生
2. 前端Debug的特点
  • 多平台：浏览器，Hybrid，NodeJs，小程序，桌面应用等
  • 多环境：本地开发环境、线上环境
  • 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……
  • 多技巧：Console、BreakPoint、sourceMap、代理等
3. Chrome DevTools
  • 动态修改元素的样式
  • 调试伪类 使用 强制执行状态
  • Computed中可以搜索（快速找到样式）
  • 点击节点 - 截取节点屏幕图片
4. Console
  • console.log() 这里类型的数据输入的颜色不一样。
console.log("test")
console.log(123)

结果如下：
image.png

image.png

  • console.warn() 这个在控制台输出有黄色背景色，而且输出类型不同，文本的颜色也有一些不同
console.warn("test")
console.warn(123)

结果如下：
image.png

  • console.error() 这个在控制台输出有红色背景色，而且输出类型不同，文本的颜色也有一些不同
console.error("test")
console.error(123)

结果如下：

image.png

  • console.debug() 这个通常不会直接在控制台输出，要自己调整显示级别才行。这个输出也是类型不同输出颜色不同
console.debug("test")
console.debug(123)

结果如下：
image.png

  • console.info() 这里类型的数据输入的颜色不一样。
console.info("test")
console.info(123)

结果如下：
image.png

  • console.log() 中使用占位符
    • %s 字符串占位符
    • %o 对象占位符
    • %c 样式占位符 它后面输入内容的样式
    • %d 数字占位符
    • %f 浮点型
console.log("%s, \n %o, \n %c%d, \n %f, \n", "string", {name: "大师兄", sex: "man"}, "color:red;", 123, 123.456)

结果如下：
image.png

  • console.table() 具象化展示JSON和数组数据
const arr = ["test1", "test2", "test3", "test4", "test5"];
console.table(arr)

结果如下：

image.png

const obj = {
    test1: "test1",
    test2: "test2",
    test3: "test3",
    test4: "test4",
    test5: "test5",
};
console.table(obj)

结果如下：
image.png

  • console.dir() 通过类似文件树的方式展示对象的属性（dom元素的属性）
const obj = {
    test1: "test1",
    test2: "test2",
    test3: "test3",
    test4: "test4",
    test5: "test5",
};
console.dir(obj)

结果如下：
image.png

  • console.time() 和 console.timeEnd() 通常用来测试一段脚本的性能（执行时间）
console.time("testMethods");
(function test(){
    for(var i = 0; i < 100; i++){
        console.log(i);
    }
})();
console.timeEnd("testMethods");

结果：
1
2
3
……
99
testMethods: 9.833740234375 ms
5. Source Tab

  • 页面资源文件目录树

  • 代码预览区域

  • Debug 工具栏 （从左到右）

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

    • 断点调试器
    方式一

    浏览器中代码模块打断点

    方式二

    通过在代码中写入 debugger; 进入debug。

    鼠标悬停可以看到值
    Watch 监测变量结果
    Breakpoints 断点集合通过勾选调整断点状态
    Scope 作用域
    Call stack 调用堆栈
    XHR/fetch breakpoints 网络请求
    Dom 发生变化打断点

6. 压缩后的代码如何调试？
  • webpack、UglifyJS、terser 压缩混淆
  • 压缩混淆后的调试方法： webpack中 开启devtool的source-map
  • 上线不带sourcemap的 可以减小体积提升安全
  • sourcemap 上传到监控平台（线上出错如何调试，监控平台是什么？）
7. Network Tab - 网络请求

ALL 所有资源的请求
Fetch/XHR HTTP请求

  • Waterfall 并行 or 并行
  • No throttling 弱网运行
  • http请求中
    • headers 请求头
    • Respones 响应体
8. Application 缓存部分

cookie、 storage、 Storage中一键清除缓存

9. Performance 性能

页面卡顿 - > 查看FPS指标 / 打开FPS面板（三点， more tools，Rendering， FPS（Frame rendering stats）） ->

10. Lighhthouse 性能分析面板

二、移动端调试

1. 真机调试
  • ios
  • Android
2. Vconsole
3. 使用代理工具调试
  • Charles（收费）： 适合查看、控制网络请求、分析数据
  • Fiddler： 与Charles类似，适合windows平台
  • spy-debugger：远程调试手机页面，抓包
  • Whistle：基于Node实现的跨平台Web调试代理工具
4. NodeJs调试

Inspector Protocol + Chrome Devtool

  • 执行命令 node --inspect=8888 index.js
  • chrome 浏览器访问服务
  • 点击绿色node图表打开node调试面板（在Chrome://inspect/#devices 中配置 network target）
  • 在node调试面板中使用断点调试

Inspector Protocol + VS Code

  • VS Code 点击运行
  • 添加配置
  • 启动调试
  • 添加断点
  • 查看变量、堆栈
5. 常用开发调试工具

  • 调整css
    Sources - Overides 中修改会保存，可以在三点中more tools 的change查看修改

  • 利用代理解决开发阶段的跨域问题
    浏览器 -> 请求 -> 代理服务器 -> 真实服务器
    浏览器 <- 转发响应 <- 代理服务器 <- 响应 <- 真实服务期

  • 启动本地的source map

  • 使用代理工具Mock数据

学习建议以及总结：这里主要实践一下console，这个我用的比较多。
debug模式，应该也挺长用的。但是由于时间关系，只能先做记录了，回头再复盘吧。
至于，初学者，使用console还是解决很多问题的。
但不要在代码中留有大量的console，据说这东西会占内存，让console输出的变量无法释放内存。

不要急，慢慢来。

avatar
文章
阅读
粉丝