这是我参与「第五届青训营」伴学笔记创作活动的第16天
概要
web项目往往由前端和后台组成，涉及的内容和知识特别多，初学者由于对其运行机制理解不到位，同时没有掌握恰当的调试方法，当项目出现问题时就比较茫然、无从下手。这篇文章将介绍Web调试的过程和方法。
Bug与Debug
Bug的产生
Bug一词的原意是“昆虫”或“虫子”，而在电脑系统或程序中隐藏着的一些未被发现的缺陷或问题，人们也叫它“bug”。Bug的创始人格蕾丝·赫柏(Grace Murray Hopper)，是一位为美国海军工作的电脑专家，也是最早将人类语言融入到电脑程序的人之一。而代表电脑程序出错的“bug” 这名字，正是由赫柏所取的。
前端Bug的特点
- 多平台：浏览器、Hybrid、Node.js、小程序、桌面应用等
- 多环境：本地开发环境、线上开发环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint、sourceMap、代理等
Chrome devTools使用
Chrome Devtools 是前端开发者每天都在用的工具，它提供了很多调试功能，可以帮助我们更好的开发网页。
动态修改元素和样式
- 点击空白处新增样式属性及值
- 点击.cls旁边的加号增加选择器样式
Console控制台面板
一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互
- 快捷键Cmd+option+J(Mac)或Ctrl+Shift+J(Windows,Linux,Chrome OS)
- 以抽屉式导航栏打开，按ESC(点击Console时隐藏)
- 点击选择Show Console
- 消息堆叠，左侧显示一个数字，表明重复次数
- 不堆叠时选择show timestanps
- 处理控制台历史记录
- 清除，点击右键clear console，控制台输入clear()
- 按Ctrl+L
Source Tab
该面板中主要用来进行一些调试和查看源码
Network
在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时
Element
在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑
Performance
在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。有人会问，这个跟上面的 Network 有什么区别呢，上面也能显示耗时信息。在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息
Application
记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息
Lighthouse
审计面板会对页面的加载进行分析，然后给出提高页面性能的建议，官网建议查看 PageSpeed Insights 来获得更多的页面加载建议。
