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. }

原文发布于微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio)

原文发表时间:2018-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT大咖说

R语言实例:利用css对shiny页面优化及htmlwidgets创建控件

摘要 本演讲将介绍如何利用CSS对shiny页面进行个性化设计及在网页中嵌入视频;并通过一个详细案例介绍了利用htmlwidgets包开发HTML控件,基于D3...

3416
来自专栏自由而无用的灵魂的碎碎念

去掉windows8.1鸡肋的开始按钮

可以使用我分享的链接下载startisgone: http://download.csdn.net/detail/wangallan/8972885

1002
来自专栏nummy

使用jsTree树形控件【1】入门

部署环境使用压缩版的jsTree.min.js,如果是开发环境可以使用jsTree.js

1682
来自专栏Spring相关

在Vue的webpack中结合runder函数

npm i vue-loader vue-template-compiler -D

762
来自专栏十月梦想

Vue动态组件绑定和v-once

        向上述就是那个符合条件显示在dom中,不符合的则直接在dom中销毁,这样是比较性能地下,如何正确的使用呢?可以加载一个v-once属性

2231
来自专栏柠檬先生

Vue 源码分析—— 目录结构

 1.compiler 目录包含Vue.js 所有编译相关的代码。它包括把所有模板解析成ast 语法树, ast 语法树优化等功能。

1972
来自专栏码代码的陈同学

5行代码为你的博客引入fancybox

官方Demo code很简单,将需要处理的 img 标签放到一个有 data-fancybox="gallery" 属性的 a 标签中即可,*href* 属性配...

2434
来自专栏极乐技术社区

极乐问答No.1 | 如何理解微信小程序的生命周期?

导语 通俗的讲,生命周期就是指一个对象的生老病死。 从软件的角度来看,生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。下面从一下三个方面介绍微信小程...

2617
来自专栏静默虚空的博客

Intellij IDEA 使用小结

快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE,为大多数操作建议了键盘快捷键。在这个主题中,您可以找到最不可缺少的列表,使 I...

3286
来自专栏腾讯云serverless的专栏

使用腾讯云 SCF 云函数压缩 COS 对象存储文件

如何处理 COS 对象存储中的大量文件打包需求?或许 SCF 无服务器云函数能助你一臂之力!

2K2

扫码关注云+社区

领取腾讯云代金券