专栏首页javascript趣味编程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. }

本文分享自微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio),作者:宋风耳

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2.2.5 HTML5程序调试

    假设有一个网页,由debug.html何debug.js构成,其中debug.html内容如下:

    周星星9527
  • [物联网loT]树莓派实现局域网内LED亮灭

    [思路]:树莓派安装express服务器,访问服务器,与服务器交互,从而控制硬件,最终实现树莓派引脚电平控制,进而实现与树莓派电路板引脚相连的LED亮与灭。 ...

    周星星9527
  • 虚拟现实前传-Three.js实现管壳式换热器3D模型在线查看

    使用threejs实现3D模型加载和显示。3D编程就像拍大片,几个关键东西如下所列:

    周星星9527
  • 2.2.5 HTML5程序调试

    假设有一个网页,由debug.html何debug.js构成,其中debug.html内容如下:

    周星星9527
  • mpvue 全局变量在HTML模板<template> 的应用

    我们在开发项目时,经常用到的就是全局变量,在vue.js项目中,只要在main.js设置好全局变量后,在所有的页面方法和模板中都可以引用,把vue.js项目中的...

    honey缘木鱼
  • 业界 | 借助人工智能,百度推进医疗业务

    机器之心报道 作者:吴欣 经历一次重大业务框架调整之后,百度医疗大脑有了第一个应用项目。 4 月 26 日,百度医疗大脑宣布与国内社区医疗服务领导者社区 58...

    机器之心
  • Java中class文件结构

    class文件是一组以8位字节为基础单位的二进制流组成的。在这个二进制流中没有任何分隔符,所有的数据项都是一个挨一个紧凑排列的,这就代表着其中每个字节代表什么含...

    Java学习录
  • Vue原理—初探双向绑定

    tanoak
  • 前端小知识10点(2020.6.28)

    ① DOMContentLoaded 等构件完 dom 树,js 加载完后才会触发

    进击的小进进
  • cucumber测试框架

    1.1 什么是BDD(行为驱动开发)   首先了解一个概念,BDD(BehaviorDrivenDevelopment:行为驱动开发)为用户提供了从 开发人员和...

    爱撸猫的杰

扫码关注云+社区

领取腾讯云代金券