开发调试秘籍--前端Debugger实战

调试入门秘籍

学习目标

报错和Bug，是贯穿程序员整个编程生涯中，无法回避的问题。而调试，就是帮助程序员定位问题、解决问题的重要手段，因此，调试是每个程序员必备技能。

本次课程需要基础的CSS、JS知识作为支撑，如果懂一些Vue和React语法，那就更好了。如果还没有掌握以上知识的同学，可以联系运营老师，获取福利课。

调试本身可分为两个过程：定位问题 和 解决问题。

本课程将集中讨论如何快速发现 和 定位问题，解决问题本身就是开发的基本功，具体办法涉及框架，这里不深入探讨。我们将从以下几点开始：

1. 掌握调试工具的基本使用
2. 调试基本流程
3. 通过案例定位Bug，修复Bug。

学完今天的内容：

1. 掌握Chrome调试工具的基本使用
2. 认识常见JS4种报错姿势
3. 能够在报错中提取关键信息
4. 能够通过调试工具、二分注释排除法，准确定位代码Bug位置。

验证效果：

1. 常见Bug，1分钟内找出Bug位置。
2. 隐藏Bug，二分注释法，准确找出Bug位置。

Chrome DevTool调试工具

效果图：

两种打开方式：

1. 右击网页-选择"检查"
2. 快捷键F12 或 Fn + F12

修改停靠位置：

调试工具的基本功能介绍

调试工具的面板有很多，先掌握做常用的4个：

• 元素(Element)
• 控制台（Console）
• 源代码（Sources）
• 网络（Network）

如下图：

元素 (Element)

作用：快速调试样式

注意：刷新会丢失

实用小技巧：🔔🔔

1. 调试样式 上 下 方向键可以快速微调
2. 存储为全局变量，快速获取dom元素

控制台（Console）

**作用：**输出浏览器运行过程中产生的信息

**实用小技巧：**🔔🔔

1. 可以当做计算器
2. 可以运行代码

如何打印不同的颜色？

  console.error('这是一条红色的文字');
  console