开发调试｜ 青训营笔记

再盼春
77 阅读1分钟

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

Bug与Debug

Bug与Debug的产生

image.png

Debug的特点

  1. 多平台
  2. 多环境
  3. 多工具
  4. 多技巧

Chrome DevTools

Chrome 的 DevTools 是最常用的调试工具

PC端浏览器F12（检查）后会出现

  • elements
  • console
  • source
  • performance
  • network

接下来一一介绍

elements

元素，Elements面板会显示目前网页中的DOM、CSS样式，且可以修改页面上的DOM和 CSS，会即时看到结果，不用在编辑器修改、保存、再返回浏览器查看结果，更为方便快捷。 image.png

console

控制台

image.png

source

源代码

image.png

写debug来暂停代码，调试

image.png

图中的 XHR是所有请求的断点， DOM：html为元素变化时添加断点，其余三个则并不常用

出于安全考虑，需要压缩和混淆代码，变为不可阅读，此时代码出现问题该如何调试

方法:利用source map做一个映射

image.png

Network

网络

image.png

Application

内存

image.png

Performance

性能 image.png

Lightinghouse

image.png

移动端调试

真机调试

image.png

代理调试

image.png

常用工具

image.png

NodeJS调试

Nodejs 使用 Chrome DevTools 调试 --inspect-brk

image.png

VS Code + Inspector Protocol

image.png

常用开发调试技术

线上及时修改overrides

image.png

利用代理解决开发阶段的跨域问题

image.png

启用本地sourse map

image.png

使用代理工具mock数据

image.png

总结：作为一名前端工程师，无论是开发还是线上环境，浏览器或是node，移动端或者PC端，都会遇到一些bug，利用这些内容来更好的解决问题

本文图片均源自字节青训营PPT

了解更多内容推荐大家看一下这篇文章：juejin.cn/post/705549…

avatar
文章
阅读
粉丝