下载掌阅APP，畅读海量书库
立即打开
|
1.4 JavaScript脚本语言开发与调试 |
本节将通过一个实例介绍JavaScript脚本语言开发与调试的基本方法，即JavaScript脚本语言开发工具和调试工具的使用。
开发JavaScript脚本语言的方式非常灵活、可供选择的工具也非常多，比如：简单的文本编辑器，轻量级的EditPlus、UltraEdit或Sublime Text代码编辑器，以及功能非常强大的Visual Studio、Adobe Dreamweaver和JetBrains WebStrom重量级的集成开发平台，这些工具均可编写开发JavaScript脚本程序。笔者个人感觉，如果只是单纯编写JS代码可选择EditPlus这类的轻量级代码编辑器，因其具有简洁、快速、易于上手的特性，同时功能也非常齐全。但如果是开发大型Web项目，最好是选择WebStrom这类重量级的集成开发平台，因其具有强大的代码管理和调试功能，自然会事半功倍。
虽然集成开发平台具有一定的JavaScript脚本语言调试功能，不过更专业的做法是使用带有JS调试功能的浏览器进行JavaScript脚本代码的调试工作。目前，Google Chrome、Firefox、Safrai、Microsoft Edge、Opera developer等这些国外主流厂商的浏览器均内置有JS调试功能，且各个浏览器的界面、功能和方法大同小异，读者可根据个人喜好自行选择一款浏览器进行测试即可。笔者这里选用的是FireFox浏览器，主要是因为FireFox是较早实现JS调试功能的浏览器之一，且一直保持着及时更新。
下面通过一个具体的JavaScript代码实例介绍一下JS脚本开发与调试的基本步骤（基于WebStrom + EditPlus + FireFox）。
打开WebStrom开发平台，在文件（File）菜单中选择New Projects（新建工程）命令，新建一个Web工程项目，命名为“js-15days”，如图1.10所示。在工程项目中新建一个HTML5网页文件，命名为“ch01-js-debug.html”，如图1.11所示。
图1.10 使用WebStrom创建Web项目
图1.11 使用WebStrom创建HTML5网页
该HTML5网页文件中定义的代码如下（详见源代码ch01目录中ch10-js-debug.html文件）。
【代码1-8】
01 <!doctype html> 02 <html lang="en"> 03 <head> 04 <!-- 添加文档头部内容 --> 05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 06 <meta http-equiv="Content-Language" content="zh-cn" /> 07 <link rel="stylesheet" type="text/css" href="css/style.css"> 08 <title>JavaScript in 15-days</title> 09 </head> 10 <body> 11 <!-- 添加文档主体内容 --> 12 <header> 13 <nav>JavaScript 基础 - 脚本调试</nav> 14 </header> 15 <hr> 16 <!-- 添加文档主体内容 --> 17 <div id="id-div-count"> 18 </div> 19 </body> 20 <script type="text/javascript" src="js/ch01-js-debug.js"></script> 21 </html>
关于【代码1-8】的分析如下：
第17～18行代码通过<div>标签定义了一个层元素，用于动态输出页面内容；
第20行代码通过<script>标签引入了外部JavaScript脚本文件，其中“src”属性定义了外部脚本文件的相对路径地址（"js/ch01-js-debug.js"）。
下面通过WebStrom开发平台创建【代码1-8】中引入的“ch01-js-debug.js”脚本文件，如图1.12所示。
图1.12 使用WebStrom创建
然后暂时离开WebStrom开发平台，使用EditPlus代码编辑器编写JS代码，如图1.13所示。
图1.13 使用EditPlus编写
EditPlus代码编辑器简洁、快速、易于上手，编写具体代码时比使用集成开发工具有一定优势。当然，这也因人而异，软件本身没有高低优劣之分。
JavaScript脚本文件（“ch01-js-debug.js”）中定义的代码如下（详见源代码ch01目录中js/ch01-js-debug.js文件）。
【代码1-9】
01 var v_id_div_count = document.getElementById("id-div-count");
02 var strLine;
03 for(var i=1; i<10; i++) {
04 strLine = "i=" + i.toString() + "<br>";
05 console.log(strLine);
06 v_id_div_count.innerHTML += strLine;
07 }
【代码1-9】的主要功能就是向HTML网页中循环动态写入文本，因这里主要是介绍JavaScript脚本语言开发与调试的基本方法，所以每行代码的具体功能含义在此就不具体介绍了。
下面使用FireFox浏览器运行【代码1-8】与【代码1-9】定义的HTML网页（ch01-js-debug.html），如图1.14所示。打开FireFox浏览器的调试功能窗口，如图1.15所示。
图1.14 使用FireFox浏览器调试JS脚本
图1.15 打开FireFox浏览器JS调试功能窗口
在图1.15的JS源码窗口中为【代码1-9】的第05行脚本语句设置断点，如图1.16所示。
然后，按F5功能键重新刷新页面，再按“步进F11”功能键来调试执行JS代码，页面效果如图1.17和图1.18所示。从这两幅图中可以看到，每次执行到【代码1-9】中第05行脚本语句设置的断点处时，JS代码均会被中断，然后在日志窗口中输出调试信息（变量“i”计数器的数值）。以上就是JavaScript脚本语言开发与调试的基本过程方法。
图1.16 使用FireFox浏览器为JS脚本代码设置断点
图1.17 使用FireFox浏览器调试脚本代码（1）
图1.18 使用FireFox浏览器调试脚本代码（2）