这是我参与「第五届青训营」伴学笔记创作活动的第 19 天
使用Chrome Develop Tool调试
作为一个前端开发工程师，没下载个谷歌浏览器都不好意思说自己是混这行的了。在移动开发的过程中，我们是可以使用桌面浏览器（推荐谷歌）进行调试的。尽管移动端网页与桌面端网页有诸多差异，但是说到底它还是一个在浏览器里浏览的HTML网页，所以最常用的还是在桌面借助Chrome调试器。
Chrome自带的Developer Tool对于调试移动端网页来说非常方便，可以通过调整下表所示的几个属性来调整页面。
| 属性名 | 功能 |
|---|---|
| User Agent | 设置当前模拟设备的用户代理(UA) |
| Device metrices | 设置页面的大小，默认值是模拟设置的大小 |
| Emulate touch events | 模拟触摸屏事件 |
| Fit in window | 页面大小是否会根据窗口大小进行适配 |
优点：无须额外的成本，方便快捷。
缺点：仅仅用来模拟，并不能完全代表移动设备的真实状况。
css 调试
Style 窗格调试
Style 窗格是什么，如下图：
选中dom 元素后，窗格内会显示当前元素的相关样式定义，在对应定义处进行修改，修改会即刻生效
样式文件内调整
style 窗格内，每一处样式定义，都会在右侧标明出处，出处有两种形式：
- 一种是系统内置，样式内容不可编辑，出处链接不可点击；
- 另外一种是用户定义，可编辑，点击出处链接，会跳转到DevTools工具的Sources面板，并高亮定位到对应的样式定义处，如果当前样式是定义在html文件中，样式不可编辑，如果打开的是单独的css文件，则可直接在当前样式文件内进行调试修改，如果当前css 文件调整比较多，可以直接将修改完成的样式文件，替换项目里对应文件，即能可视化调整，也能同步完成项目内源码调整。
js 调试
上面说了html调试，说了css 调试，似乎总感觉缺点什么，对，怎么一直没提断点，我们先来看下断点的定义：
调试设置断点可以让程序运行到该行程序时停住，借此观察程序到断点位置时，其变量、寄存器、I/O等相关的变量内容，有助于深入了解程序运作的机制，发现、排除程序错误的根源。
所以断点只是辅助调试的一种手段，一种让线索更加清晰，问题更容易暴露的方法，而在html、css调试时，由于并没有复杂的业务逻辑，代码调试非常直观，所以用不着。
常规调试
这里的「常规调试」，是相对「本地调试」而言，下一章节将具体说明。
可在DevTools Sources面板中可对js 进行调试，Sources面板包括三个部分：
- 1、File Navigator 窗格。 此处列出页面请求的每个文件。
- 2、Code Editor 窗格。 在 File Navigator 窗格中选择文件后，此处会显示该文件的内容。
- 3、JavaScript Debugging 窗格。 检查页面 JavaScript 的各种工具。 如果 DevTools 窗口布局较宽，此窗格会显示在 Code Editor 窗格右侧。
来看一个谷歌关于Sources面板调试js示例，地址。
通过分析代码，我们可以知道，点击求和按钮后，页面会出现2类结果：
- 两个输入框部分输入，结果显示“Error: one or both inputs are empty.”
- 两个输入完全输入，结果显示两个数字的和
通过执行代码，部分输入的情况，程序运行结果完全符合我们的预期，不存在问题。
