假设有一个网页,由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 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!