这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
1.之所以有调试
[web项目]往往由前端和后台组成，涉及的内容和知识特别多，我们由于对其运行机制理解不到位，同时没有掌握恰当的调试方法，当项目出现问题时就比较茫然、无从下手。本文将从一个简单的调试案例简述web项目调试过程和方法，以供参考。 web调试总体思路：
（1）理解清楚web项目运行基本机制，理清程序运行轨迹；
（2）掌握Java代码调试方法和技巧；
（3）掌握浏览器前端调试方法和技巧；
（4）基于以上方法，实践并总结，积累调试经验，提高调试的效率。
通常写错代码会带来以下两种主要类型的错误：
- 语法错误：由于拼写错误导致程序无法运行，通常熟悉语法并理解错误信息后很容易修复。
- 逻辑错误：不存在语法错误，但代码无法按预期运行。通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。
HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。当然，是存在隐患的。
2.错误信息分析
错误信息一般都是有用的，也有没用的，有一些经验后你就能够分析并修复这些错误。下面来观察这些错误信息。可以看到每条信息都对应一个行号和一条信息，使得定位错误更方便。
- End tag
liimplied, but there were open elements（需要li的结束标签，但又开始了新的元素）（共出现 2 次）：这条信息表明有开始标签必须有结束标签，必须出现结束标签的地方却没有找到它。行/列信息指出结束标签必须出现的位置的第一行，这一线索已经足够明显了。 - Unclosed element
strong（未闭合元素strong）：非常容易理解，<strong>元素没有闭合，行/列信息表明了它的位置。 - End tag
strongviolates nesting rules（结束标签strong违反了嵌套规则）：指出了错误嵌套的元素，行/列信息表明了它的位置。 - End of file reached when inside an attribute value. Ignoring tag（在属性值内达到文件末尾。忽略标签）: 这个比较难懂，它说的是在某个地方有一个属性的值格式有误，估计是在文件末尾附近，因为文件的结尾出现在了一个属性值里。事实上浏览器没有渲染超链接已经是一个很明显的线索了。
- End of file seen and there were open elements（文件结尾有未闭合的元素）：这个略有歧义，但基本上表明了有元素没有正确闭合。行号指向文件最后几行
3.WEB浏览器F12调试页面
Elements—标签页，可以查看并且编辑页面元素，在左侧可以点选某一个元素，该元素会在页面上高亮，同时在右侧显示该元素的所有样式；
Console—Console面板，就是Javascript控制台，Console最有用的，就是打断点的时候进行查看
Sources—Sources标签页，可以查看到请求的资源情况；可以查看当前网站的HTML，及其引入的所有CSS、Javascript文件。重要的是，在Javascript文件中的任何一行，我们都可以设置断点，脚本将会在这一行停下来。触发断点时，我们可以查看断点所在的作用域内的所有变量的值；
右侧窗格显示了局部变量、监视变量以及调用栈。右侧窗格的上方有继续、下一步、进入函数、跳出函数、禁用断点等按钮；
Network—查看网页的http通信情况，可以查看当前页面的所有网络请求；
Performance—performance检测页面性能；
Memory—内存分析的作用，内存分析工具可以帮助你了解应用的内存使用情况，从而帮助你避免内存泄漏或内存的过度消耗；
Application—application主要用来查看有哪些cookies和local Storage(H5本地存储Web storage特性的API), 测试的时候，有时需要清理和查看；
Security—通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS；
Audits—对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等；
Network 面板
在Network页面下方出现了一个个的条目，其中一个条目就代表一次发送请求和接收响应的过程。
①Name：请求名称；
②Status：响应状态码。200为响应成功，这个可以判断请求是否的到了正常响应；
③Type：请求文档类型。document即为一个HTML文档，即HTML代码；
④Initiator：请求源。用来标记请求是由哪个对象或进程发起的；
⑤Size：从服务器下载的文件和请求资源的大小。如果是从缓存中得到的资源，则为from cache；
⑥Time：发起请求到获得响应的总时间；
⑦Waterfall：网络请求的可视化瀑布流；
4.调试工具
在做前端开发时，我们需要用到一些调试工具用来调试我们的HTML、CSS或者JS代码，俗话说预先善其事必先利其器，这里我给大家推荐几款比较常用的前端调试工具。
这是我现在用的最多的一个浏览器调试工具，在经过了几个版本的更新，其调试功能也日渐强大。在打开Chrome后可以通过点击“F12”功能键、“Ctrl Shift I”或者“Ctrl Shift J”打开开发者工具。也可以通过工具 - 开发者工具 打开。
2、firefox插件Firebug
这是我在Chrome浏览器出现之前常用的调试工具，在Chrome出来之后就很少使用了，可以在firefox浏览器 - 添加附件 - 搜索firebug - 安装，然后在firefox浏览器的右上角会有个虫子的图标，那个就是firebug了。除此之外，firefox也内置了开发者的工具，可以从设置按钮打开开发者工具。
3、IE的开发者工具
某些内部应用的项目都是对IE有较好的支持的，所以这里也顺带提一下IE其实也是有对应的调试工具的，在之前的IE版本中内置的调试工具是相当的丑陋的（我记得是这样的），那目前IE11的调试工具功能也是比较强大，同样可以通过F12打开
4、IETest，IE浏览器版本切换工具
在开发Web项目的时候，经常会碰到需要在不同的IE版本中检查完成的网页是否能正常展现，这时就需要IETest帮我们模拟网页在IE5.5、IE6、IE7、IE8、IE9以及IE10等浏览器中的兼容性，让我们看一下辛苦做好的CSS样式或网站版面是否可以在各个主要浏览器正常显示。
5、Emmet
emmet算是HTML/CSS开发中的神器，如果做前端开发肯定会被emmet强大的功能吸引，他使用了仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，对多种文本编辑器都有较好的支持
6、JSON格式校验工具
JSON的使用越来越平凡，对JSON格式的校验也是很常见的，推荐2个比较方便的JSON校验工具，一个是在线的网站
5.结论
无论你在测试 internet、intranet 或者是 extranet 应用程序，web 测试相对于非 web 测试来说都是更具挑战性的工作。用户对 web 页面质量有很高的期望。在很多情况下，就像业务功能一样，页面用于维护和发展公共关系，所以第一印象非常重要。
