3.4 OpenLayers 5的调试方法
在Web开发中，程序的调试方法与技巧是开发人员必须掌握的一个重要内容，非常关键。OpenLayers的开发其实就是基于HTML+JavaScript的Web开发，其调试方法与一般的Web开发相同。
Web开发调试涉及页面布局与样式、功能、性能等多个方面，目前有很多调试工具可供选用。在进行Web前端调试时，一般使用浏览器调试插件，如IE Developer ToolBar、Firebug等，通过浏览器调试插件可查看和调整网页的样式、调试脚本功能、监控网络请求等，这是Web前端开发必备的调试工具。基于浏览器调试插件的Web前端调试方法和技巧，也是一个Web开发者必须掌握的内容。除了浏览器调试插件，还有其他调试工具，如Fiddler、Yslow、HttpWatch等。另外，集成开发环境也内置了功能强大的调试工具，一般可直接使用集成开发环境内置的调试工具调试Web后台代码，也可以在此工具中通过添加进程的方式调试JavaScript代码。
常用的Web开发调试工具如下：
● 浏览器调试插件（IE Developer T oolBar、Firebug等）：可调试浏览器的布局/样式、JavaScript脚本，查看网络情况等。在浏览网页时按下F12键可打开该调试插件；
● 集成开发环境（MS V isual S tudio、Eclipse等）内置的调试工具：可调试Web后台代码，如C#、Java代码，也可以调试JavaScript脚本；
● Fiddler：可监控HTTP请求、获取HTTP包、修改HTTP头信息、映射本地文件等；
● Yslow：可监控页面性能、查找页面瓶颈、辅助调试页面（检查js语法、优化图片）；
● HttpWatch：可查看页面渲染关键时间点、查看HTTP请求顺序等。
说明：MS Visual Studio内置调试工具的功能极其丰富，可赋予开发人员强大的调试能力，调试非常方便。Eclipse是一个开源的、基于Java的可扩展开发平台，其调试功能也很强大，支持各类断点调试。
在Web前端开发中，通常在浏览网页时按F12键可打开浏览器调试插件，例如IE11与Chrome浏览器的调试页面分别如图3-21和图3-22所示，打开调试工具后可根据具体功能选择调试项与对应方法。一般调试方法如下：
图3-21 IE11浏览器的调试页面
图3-22 Chrome浏览器的调试页面
● 对于HTML、CSS的样式布局等，可选择元素对象等方式查看、调整；
● 对于JavaScript或后台代码，可在程序中设置断点调试，JavaScript代码还经常使用alert方法弹框方式进行调试；
● 对于Ajax请求可以使用网络监视功能捕获请求并分析问题。
建议在编程过程中逐步学习并掌握基本调试方法与常用技巧，例如，调试视图可查看对象值、悬停鼠标可查看表达式的实时值等。
OpenLayers开发调试方法与Web开发调试方法相同，在引入ol.js的同时需要在其同级目录下引入对应的源映射文件（ol.js.map），便于调试OpenLayers的具体功能代码。调试OpenLayers的简要步骤如下：
（1）预览当前功能网页，打开浏览器调试插件。
（2）切换到JavaScript脚本调试项，在需要调试的位置设置断点。
（3）启动调试功能，刷新当前网页，即可进入JavaScript代码中的断点。
（4）根据具体需求调试代码，可选择单步调试或断点调试等来查看对象值。
若涉及后台数据库的数据操作功能，或者其他的业务功能，则可直接使用集成开发环境内置的调试工具来调试代码（一般为C#或Java代码），调试方法也比较简单，采用断点调试即可。