调试能力决定学习效率。与其反复改代码碰运气,不如在 Sources 里打断点,看当时变量到底是什么。

Console Sources Network
图:Console / Sources / Network 三件套
  • Console:console.log、console.table 快速观察。
  • Sources:行号旁打断点,单步 Step over / into。
  • Network:确认请求是否发出、状态码与响应体。
  • Elements:检查最终计算样式,定位 CSS 覆盖问题。
先复现,再定位,最后修。跳过复现步骤,容易修错地方。