2.2.5 HTML5程序调试
2.2.5 HTML5程序调试
假设有一个网页，由debug.html何debug.js构成，其中debug.html内容如下：
1. <html lang="en">
2. <head>
3. <meta charset="UTF-8">
4. <title>CH2: Debug Demo </title>
5. <script type="text/javascript"src="debug.js"></script>
6. </head>
7. <body>
8. </body>
9. </html>
debug.js内容如下：
1. window.addEventListener("load", main, false);
2.
3. function main () {
4. var a=1;
5. var b=2;
6. var c=a+b;
7. var d=a+b+c;
8. }
如何知道js程序每一步各变量如何变化呢？我们以EDGE为例说明：
第1步：用EDGE打开网页，按F12键，打开“开发者工具”页面：
第2步：选择调试程序，并点击左侧js文件，设置断点（如图中红点，课鼠标点击设置或取消）
第3步：按F11或者F10调试程序，观察监视栏变量值的变化，如下图：
上文提及到的浏览器都有针对开发者的工具，以便于对js程序进行调试。调试功能的使用方法类似于Microsoft Visual Studio中的调试步骤，通过设置断点，观察变量的值。
FireFox甚至支持设置“条件断点”，给调试提供方便。
如何将计算过程中产生的数据或信息在网页内显式呢？如下js函数TraceLog实现在ID为host的标签元素内追加一段文本：
1. functionTraceLog(host,text){
2. var div=document.createElement("div");//创建一个div标签，即段落
3. div.innerHTML=text; //设置该标签属性值为text
4. document.getElementById(host).appendChild(div); //ID为host的标签内嵌入刚刚生成的段落
5. }
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。