Web 调试技术| 青训营笔记

71 阅读1分钟

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

课程重点

  1. Web 应用使用 Chrome devTools 调试
  2. 移动端 H5 调试
  3. NodeJs 应用调试
  4. 常用代理工具的使用

详细知识点介绍

bug与debug

bug的产生

image.png

前端debug的特点

image.png

chrome devtools

  • Elements
  • Console
  • Source
  • Performance
  • Network

动态修改元素和样式

image.png

console

image.png

sorce tab

image.png

break point 与 watch

image.png

scope与call stack

image.png

压缩后的代码如何调试?

image.png

source map

image.png

network

image.png

application

image.png

performance

image.png

performance 运用 示例

image.png

lighthouse

image.png

移动端 h5 调试

真机调试

image.png

vconsole

image.png

使用代理工具调试

image.png

常用代理工具

image.png

nodejs 调试

inspector protocol + chrome devtool

image.png

inspector protocol + vs code

image.png

常用开发调试技巧

image.png

image.png

image.png

image.png

image.png

引用参考

Web 调试技术